/* ZOKKU home, Colour field (W10, 23 Oct 2026: the user chose lab home B as the home). Loaded after site.css and
   home.css by index.html only. The whole opening is the chapter field of the plugin on air (--hf-campo / --hf-ink from
   js/home-field.js): tammo orange, edagrow gold, omoline and utsuri on their dark glass. The title is the largest thing
   on the page and the live window sits under it, full strength. One authored moment: at each change the next field
   wipes in from the left (700 ms), the ink turns halfway; with reduced motion it just changes. Below the field the
   shelf sits on paper (the icons carry the colour) and "One way of working" on salvia. */

:root{--hf-campo:#F07A4A; --hf-ink:#0A0A0A; --hf-glifo:#0A0A0A}

/* ---------- Opening on the field ---------- */
.apertura{background:var(--hf-campo);color:var(--hf-ink);--fg:var(--hf-ink);--fg-2:var(--hf-ink);--bg:var(--hf-campo);--btn-bg:var(--hf-ink);--btn-fg:var(--hf-campo);transition:color 300ms ease}
.apertura ::selection{background:var(--hf-ink);color:var(--hf-campo)}
.hf-velo{position:absolute;inset:0;z-index:-2;pointer-events:none}
.ap-titolo{color:var(--hf-ink)}
.ap-lato p{color:var(--hf-ink)}
.ap-sfondo{-webkit-mask-image:none;mask-image:none}
.ap-strato{transition:opacity 700ms var(--ease-soft)}
.ap-strato.attivo{opacity:1}
.ap-strato > img,.ap-strato > video,.ap-strato > picture > img{transform:none;object-fit:cover;object-position:50% 50%}
.ap-dida-ruolo{color:var(--hf-ink);opacity:.8}
.ap-pausa{background:transparent;color:var(--hf-ink);box-shadow:inset 0 0 0 1.5px var(--hf-ink)}
.ap-barre li{background:color-mix(in srgb,var(--hf-ink) 22%,transparent)}
.ap-barre li::after{background:var(--hf-ink)}
.apertura :focus-visible{outline-color:var(--hf-ink)}

@media (max-width:700px){
  .ap-titolo{font-size:clamp(56px,17vw,84px);margin-bottom:24px}
  /* the window sits straight on the field: no frame colour, a hairline of ink and a soft drop */
  .ap-sfondo{background:transparent;box-shadow:none;height:calc((100vw - 2 * var(--margine)) / 1.5625)}
  .ap-strato{inset:0}
  .ap-strato > img,.ap-strato > video,.ap-strato > picture > img{border-radius:10px;box-shadow:0 0 0 1px color-mix(in srgb,var(--hf-ink) 30%,transparent),0 22px 40px -22px rgba(0,0,0,.55)}
}

@media (min-width:701px){
  .apertura{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(32px,4vw,64px) var(--margine) clamp(48px,6vw,96px);align-items:start}
  .apertura .griglia{display:contents}
  .ap-titolo{grid-column:1 / -1;grid-row:1;font-size:clamp(72px,9.6vw,164px);letter-spacing:-.045em;line-height:.9;max-width:none}
  .ap-lato{grid-column:1 / span 3;grid-row:2;padding-top:36px}
  .ap-lato p{font-size:var(--s-lead)}
  .ap-sfondo{position:relative;inset:auto;z-index:0;grid-column:4 / span 9;grid-row:2;margin-top:36px;aspect-ratio:1000 / 640;border-radius:16px;background:rgba(0,0,0,.18);box-shadow:0 0 0 1px color-mix(in srgb,var(--hf-ink) 26%,transparent),0 50px 90px -50px rgba(0,0,0,.7)}
  .ap-strato{inset:0}
  .ap-strato > img,.ap-strato > video,.ap-strato > picture > img{border-radius:16px}
  .ap-dida{grid-column:1 / span 3;grid-row:2;align-self:end;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
  .ap-dida-link{display:flex;flex-direction:column;min-height:48px;color:inherit;text-decoration:none}
  .ap-dida-nome{font-size:28px;font-weight:500;line-height:1.1}
  .ap-barre{grid-column:1 / -1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin-bottom:10px}
  .ap-barre li{height:3px;border-radius:2px;overflow:hidden}
  .ap-barre li::after{content:"";display:block;height:100%;transform:scaleX(0);transform-origin:left}
  .ap-barre li.fatto::after{transform:none}
  .ap-barre li.on::after{animation:ap-riempi var(--hold,8000ms) linear forwards}
  .ap-barre.fermo li.on::after{animation-play-state:paused}
  .ap-pausa{min-height:44px;min-width:44px;padding:0 16px;border-radius:var(--r-s);font-size:15px;font-weight:500}
}
@media (min-width:701px) and (max-width:1100px){
  .ap-lato,.ap-dida{grid-column:1 / span 4}
  .ap-sfondo{grid-column:5 / span 8}
}

/* ---------- Under the field: the shelf on paper, the tiles carry the colour ---------- */
.scaffale{background:var(--bg);color:var(--fg);--house-fg:var(--fg);--house-2:var(--fg-2)}
.chi{background:var(--zk-salvia);color:var(--zk-inchiostro);--fg:var(--zk-inchiostro);--fg-2:#33433A}
@media (prefers-color-scheme:dark){.chi{background:#1E2A21;color:#E6EEE7;--fg:#E6EEE7;--fg-2:#B9CDBD}}