/* ------------------------------------------------------------------
   Zorah guides — stylesheet
   Palette: Zorah 2.0 signature palette (brand book, p.10-11). Nothing outside it.
   Type: Montserrat, self-hosted, four weights.
   ------------------------------------------------------------------ */

@font-face{font-family:Montserrat;font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/montserrat-latin-300.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/montserrat-latin-ext-300.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/montserrat-latin-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/montserrat-latin-ext-400.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/montserrat-latin-500.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/montserrat-latin-ext-500.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/montserrat-latin-600.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/montserrat-latin-ext-600.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Zorah 2.0 signature palette */
  --creme:#FEF9F4;
  --creme-lumiere:#F7F4EE;
  --amande:#EEDFC6;
  --beige-chaud:#D9C7A6;
  --sauge:#C3CE94;
  --sauge-naturel:#A6B79A;
  --vert-olive:#7D8F68;
  --or-vegetal:#D4AF37;
  --champagne:#E9D8B6;
  --peche:#F9DBB8;
  --cacao:#3B2E22;
  --vert-profond:#2E4A3B;
  --foret:#3D5033;

  /* set per page by the theme */
  --wash:var(--creme-lumiere);
  --accent:var(--vert-olive);

  /* notices never use red: the brand book forbids it */
  --notice:#8C5A2B;

  --rule:rgba(59,46,34,.14);
  --measure:34rem;
  --pad:clamp(1.5rem,6vw,3.25rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;
  color:var(--cacao);background:var(--creme);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--vert-profond);outline-offset:3px;border-radius:2px}

/* ---------- layout ---------- */

.page{min-height:100svh;display:flex;flex-direction:column}
.shell{
  flex:1;width:100%;max-width:1240px;margin-inline:auto;
  display:flex;flex-direction:column;
}
.content{flex:1}

.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem var(--pad) .9rem;
}
.masthead__logo img{width:118px;height:auto}
.langswitch{
  appearance:none;border:0;background:none;cursor:pointer;padding:.5rem;margin:-.5rem;
  font:inherit;font-size:.8125rem;font-weight:500;letter-spacing:.06em;
  color:var(--vert-profond);
}
.langswitch:hover{color:var(--foret)}
.langswitch[hidden]{display:none}

/* visual panel: same aperture on every page, different figure inside */
.panel{
  position:relative;background:var(--wash);color:var(--accent);
  height:min(30vh,190px);overflow:hidden;flex:none;
}
.panel::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 22% 8%,rgba(255,255,255,.62),transparent 62%);
  pointer-events:none;
}
.panel__art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:150%;width:auto}

.content{padding:clamp(1.6rem,6vw,2.6rem) var(--pad) 0}

/* ---------- screens ---------- */

.screen[hidden]{display:none}
.screen:focus{outline:none}
.screen{animation:rise .45s cubic-bezier(.2,.7,.25,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen{animation:none}
  *{transition-duration:.01ms !important}
}

/* ---------- type ---------- */

.mark{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:500;letter-spacing:.1em;color:var(--accent);
  margin-bottom:1.05rem;
}
.mark::before{content:'';width:26px;height:1px;background:currentColor;opacity:.6}

.headline{
  font-size:clamp(1.95rem,6.4vw,3rem);font-weight:300;line-height:1.1;
  letter-spacing:-.015em;color:var(--vert-profond);
  max-width:16ch;text-wrap:balance;
}
.sub{margin-top:1.1rem;max-width:44ch;color:rgba(59,46,34,.82)}

.inside{margin-top:2rem;max-width:var(--measure)}
.inside__title{
  font-size:.78rem;font-weight:600;letter-spacing:.1em;
  color:rgba(59,46,34,.55);padding-bottom:.7rem;border-bottom:1px solid var(--rule);
}
.inside li{
  padding:.72rem 0 .72rem 1.35rem;border-bottom:1px solid var(--rule);
  font-size:.94rem;line-height:1.5;position:relative;
}
.inside li::before{
  content:'';position:absolute;left:.1rem;top:1.25rem;
  width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.75;
}

/* ---------- form ---------- */

.capture{margin-top:2.1rem;max-width:27rem}
.field{display:block}
.field__label{
  display:block;font-size:.8rem;font-weight:500;letter-spacing:.04em;
  color:rgba(59,46,34,.7);margin-bottom:.5rem;
}
.field__input{
  width:100%;height:58px;padding:0 1.35rem;border-radius:999px;
  border:1px solid var(--beige-chaud);background:#FFFDF9;
  font:inherit;font-size:1rem;color:var(--cacao);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field__input::placeholder{color:rgba(59,46,34,.38)}
.field__input:focus{outline:none;border-color:var(--vert-olive);box-shadow:0 0 0 3px rgba(125,143,104,.18)}
.field__input[aria-invalid='true']{border-color:var(--notice)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:58px;padding:0 1.9rem;border-radius:999px;border:1px solid transparent;
  font:inherit;font-size:.98rem;font-weight:500;letter-spacing:.01em;
  cursor:pointer;text-decoration:none;
  background:var(--vert-profond);color:var(--creme);
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--foret)}
.btn:active{transform:translateY(1px)}
.btn--wide{width:100%}
.btn--quiet{background:transparent;color:var(--vert-profond);border-color:var(--vert-profond)}
.btn--quiet:hover{background:rgba(46,74,59,.07)}
.btn[disabled]{opacity:.6;cursor:default}
.btn__dots{display:inline-block;width:1.1em;text-align:left}

.capture .btn{margin-top:.85rem}
.note{margin-top:.9rem;font-size:.78rem;line-height:1.55;color:rgba(59,46,34,.62)}
.note a{text-decoration:underline;text-underline-offset:2px}
.error{
  margin-top:.7rem;font-size:.84rem;color:var(--notice);
  display:flex;align-items:baseline;gap:.45rem;
}
.error[hidden]{display:none}
.error::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:currentColor;transform:translateY(-2px)}

/* ---------- language gate ---------- */

.gate{padding-top:.6rem}
.gate__title{font-size:clamp(1.6rem,5.4vw,2.3rem);font-weight:300;color:var(--vert-profond);letter-spacing:-.01em}
.gate__help{margin-top:.7rem;font-size:.9rem;color:rgba(59,46,34,.7)}
.gate__choices{display:flex;flex-direction:column;gap:.75rem;margin-top:1.8rem;max-width:27rem}
@media (min-width:520px){.gate__choices{flex-direction:row}.gate__choices .btn{flex:1}}

/* ---------- unlocked ---------- */

.unlocked__cover{
  display:flex;gap:1.25rem;align-items:center;
  padding:1.1rem;margin-top:1.6rem;max-width:27rem;
  background:var(--creme-lumiere);border:1px solid var(--rule);
}
.unlocked__thumb{flex:none;width:86px;height:112px;background:var(--wash);color:var(--accent);position:relative;overflow:hidden;border:1px solid var(--rule)}
.unlocked__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.unlocked__thumb img[hidden],.unlocked__thumb svg[hidden]{display:none}
.unlocked__thumb svg{position:absolute;inset:0;width:100%;height:100%}
.unlocked__file{font-size:.9rem;line-height:1.45}
.unlocked__file strong{display:block;font-weight:500;color:var(--vert-profond)}
.unlocked__file span{color:rgba(59,46,34,.6);font-size:.8rem}
.actions{display:flex;flex-direction:column;gap:.7rem;margin-top:1.4rem;max-width:27rem}
@media (min-width:520px){.actions{flex-direction:row}.actions .btn{flex:1}}

/* ---------- footer ---------- */

.foot{
  margin-top:auto;padding:2.4rem var(--pad) 1.9rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:baseline;
  font-size:.76rem;color:rgba(59,46,34,.55);
}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:2px}
.foot__trust{flex-basis:100%;color:rgba(59,46,34,.45)}

/* ---------- desktop ---------- */

@media (min-width:900px){
  .shell--split{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    grid-template-rows:auto 1fr auto;
  }
  .shell--split .masthead{grid-column:1;grid-row:1}
  .shell--split .panel{grid-column:2;grid-row:1 / 4;height:auto;min-height:560px}
  .shell--split .panel__art{height:min(66%,520px)}
  .shell--split .content{grid-column:1;grid-row:2;align-self:center;padding:clamp(1.5rem,3vw,2.6rem) var(--pad)}
  .shell--split .foot{grid-column:1;grid-row:3;margin-top:0}
  .shell--split .headline{max-width:14ch}
}

/* ---------- index page ---------- */

.index__head{padding:clamp(2rem,7vw,4rem) var(--pad) 0;max-width:52rem}
.index__title{font-size:clamp(2rem,6vw,3rem);font-weight:300;letter-spacing:-.015em;color:var(--vert-profond)}
.index__intro{margin-top:1rem;max-width:42ch;color:rgba(59,46,34,.8)}
.grid{
  padding:clamp(1.8rem,5vw,3rem) var(--pad) 0;
  display:grid;gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-top:clamp(1.8rem,5vw,3rem);
}
.grid{padding:0;margin-inline:var(--pad)}
@media (min-width:700px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:1060px){.grid{grid-template-columns:1fr 1fr 1fr}}
.card{
  display:flex;gap:1.1rem;align-items:flex-start;
  padding:1.4rem 1.2rem;background:var(--creme);text-decoration:none;
  transition:background .18s ease;
}
.card:hover{background:var(--creme-lumiere)}
.card__thumb{flex:none;width:56px;height:72px;background:var(--wash);color:var(--accent);position:relative}
.card__thumb svg{position:absolute;inset:0;width:100%;height:100%}
.card__title{font-size:1rem;font-weight:500;color:var(--vert-profond);line-height:1.35}
.card__kw{display:block;margin-top:.35rem;font-size:.74rem;letter-spacing:.09em;color:var(--accent)}
.card__lang{display:block;margin-top:.55rem;font-size:.76rem;color:rgba(59,46,34,.55)}

/* ---------- 404 ---------- */

.stack{padding:clamp(3rem,12vw,6rem) var(--pad);max-width:36rem}
.stack .btn{margin-top:1.8rem}