/* Wild Curiosity — shared styles
   Type:   Instrument Serif (display) + Space Mono (all metadata)
   Ground: warm paper, soft brown-black ink, terracotta used sparingly */

:root{
  --paper:#F4F1EA; --paper-dim:#E6E1D6;
  --ink:#1A1815; --ink-soft:#4A443C; --ink-faint:#8A8377;
  --terracotta:#A6462E; --rule:rgba(26,24,21,.16);
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem)}

.meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0 0 1.3rem}
.serif-lede{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.45;
  max-width:46ch;color:var(--ink-soft);margin:0}

.nav{max-width:1200px;margin:0 auto;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.25rem,4vw,3.5rem) 1rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.nav-rule{max-width:1200px;margin:0 auto;height:1px;background:var(--rule)}
.lock{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.lock svg{width:48px;height:auto;flex-shrink:0}
.lock .wm{font-family:var(--serif);font-size:1.05rem;line-height:1.02;letter-spacing:.02em}
.lock .wm em{opacity:.75}
.nav-links{display:flex;gap:clamp(1rem,2.6vw,1.9rem);list-style:none;margin:0 0 .35rem;padding:0}
.nav-links a{font-family:var(--mono);font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-faint);transition:color .25s;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}

.page-head{padding:clamp(3rem,7vw,6rem) 0 clamp(1.75rem,3.5vw,3rem)}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,8vw,5.6rem);
  line-height:.9;margin:0 0 1.2rem;letter-spacing:-.012em}

.case{padding:clamp(3rem,6vw,5.5rem) 0;border-top:1px solid var(--rule)}
.case:first-of-type{border-top:none;padding-top:0}
.case h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6.5vw,4.4rem);
  line-height:.92;margin:0 0 1rem;letter-spacing:-.01em}
.line{font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.45rem);line-height:1.45;
  max-width:68ch;color:var(--ink-soft);margin:0 0 clamp(1.75rem,3.5vw,2.75rem)}
.line.todo{color:var(--terracotta);font-style:italic}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tile{position:relative;margin:0;overflow:hidden;background:var(--paper-dim);aspect-ratio:4/5}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.tile:hover img,.tile:hover video{transform:scale(1.03)}
.motion-mark{position:absolute;left:10px;bottom:9px;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;padding-left:13px}
.motion-mark::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;
  margin-top:-2.5px;border-radius:50%;background:#fff;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.tile--pending{display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px var(--rule)}
.pending-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);text-align:center;line-height:2}
.pending-label em{display:block;font-style:normal;font-size:.54rem;color:var(--terracotta)}

.label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;
  margin-top:1.15rem;padding-top:.95rem;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-faint)}
.label b{color:var(--terracotta);font-weight:400}

.case--short{padding:clamp(2.25rem,4.5vw,3.5rem) 0}

.band{padding:clamp(3rem,6vw,5.5rem) 0;border-top:1px solid var(--rule)}
.band-inner{max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem)}
.band h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3.4rem);
  line-height:1;margin:0 0 1.3rem;letter-spacing:-.01em;max-width:20ch}
.band p.body{max-width:56ch;margin:0 0 1rem;color:var(--ink-soft);font-size:.94rem}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.75rem);
  margin-top:clamp(2rem,4vw,3rem)}
.point .num{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  color:var(--terracotta);display:block;margin-bottom:.7rem}
.point h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:0 0 .5rem;line-height:1.2}
.point p{margin:0;font-size:.88rem;line-height:1.65;color:var(--ink-soft)}

.mock{background:#fff;border:1px solid var(--rule);max-width:560px}
.mock-bar{padding:.55rem .9rem;border-bottom:1px solid var(--rule);display:flex;gap:.4rem}
.dot{width:9px;height:9px;border-radius:50%;background:var(--paper-dim)}
.mock-body{padding:1.3rem 1.4rem 1.5rem}
.mock-q{font-family:var(--serif);font-size:1.15rem;margin:0 0 .8rem;line-height:1.3}
.mock-a{font-size:.86rem;line-height:1.65;margin:0 0 1rem;color:var(--ink-soft)}
.mock-miss{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terracotta);margin:0;padding-top:.85rem;border-top:1px solid var(--rule)}

.audit{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:clamp(1.5rem,3vw,2.5rem)}
.score{border:1px solid var(--rule);padding:clamp(1.5rem,3vw,2.2rem)}
.score .label{border:none;margin:0;padding:0}
.score .val{font-family:var(--serif);font-size:clamp(3.6rem,9vw,5.4rem);line-height:.85;margin:.6rem 0 0}
.score .val small{font-size:1.3rem;color:var(--ink-faint)}
.score .flag{display:inline-block;margin-top:1rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);
  border:1px solid var(--terracotta);padding:.3rem .6rem}
.queries{list-style:none;margin:0;padding:0}
.queries li{display:flex;justify-content:space-between;gap:1.5rem;padding:.9rem 0;
  border-bottom:1px solid var(--rule);font-family:var(--serif);font-size:1.08rem}
.queries li span{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;padding-top:.35rem}

.btn{display:inline-block;margin-top:1.6rem;padding:.8rem 1.5rem;border:1px solid var(--ink);
  text-decoration:none;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--paper)}

.footer{margin-top:clamp(3rem,7vw,6rem);border-top:1px solid var(--rule);
  padding:clamp(2.5rem,5vw,4rem) 0}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem);
  display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-end}
.footer-links{display:flex;flex-direction:column;gap:.55rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.footer-links a{text-decoration:none;color:var(--ink-faint)}
.footer-links a:hover{color:var(--ink)}

@media(max-width:860px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .points{grid-template-columns:1fr;gap:1.75rem}
  .audit{grid-template-columns:1fr}
  .nav{flex-direction:column;align-items:flex-start;gap:1rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tile img,.tile video{transition:none}
  .tile:hover img,.tile:hover video{transform:none}
  .motion-mark::before{animation:none;opacity:.8}
}

/* two equal panels — used for the today / should-say comparison */
.audit--even{grid-template-columns:1fr 1fr}
.audit--even .mock{max-width:none}
@media(max-width:860px){.audit--even{grid-template-columns:1fr}}

/* two-up variant of the numbered points */
.points--two{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.points--two{grid-template-columns:1fr}}
/* home page portfolio strip */
.strip{display:block;text-decoration:none;margin-top:clamp(2rem,4vw,3rem)}
.strip .grid{margin:0}
.strip-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;
  margin-top:1.15rem;padding-top:.95rem;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-faint)}
.strip:hover .strip-note b{color:var(--ink)}
.strip-note b{color:var(--terracotta);font-weight:400;transition:color .25s}

/* ============================================================
   BRAND — colour blocking, palette strip, manifesto
   Palette taken from the Wild Curiosity brand board
   ============================================================ */
:root{
  --forest:#1A2520;      /* deep green block, matches the monogram ink */
  --forest-mid:#243029;
  --cream:#F5F0E8;
  --olive:#515C3A;
  --avocado:#8EA448;
  --ochre:#C8923A;
  --rust:#B85C38;
}

/* --- full-bleed dark band --- */
.band--dark{background:var(--forest);color:var(--cream);border-top:none}
.band--dark .meta{color:rgba(245,240,232,.5)}
.band--dark h2,.band--dark h3{color:var(--cream)}
.band--dark p.body{color:rgba(245,240,232,.8);font-size:.98rem;line-height:1.75}
.band--dark .point h3{color:var(--cream)}
.band--dark .point p{color:rgba(245,240,232,.7)}
.band--dark .point .num{color:var(--ochre)}
.band--dark .btn{border-color:rgba(245,240,232,.45);color:var(--cream)}
.band--dark .btn:hover{background:var(--cream);color:var(--forest)}
.band--dark a{color:var(--cream)}
.band--dark .mock{background:var(--forest-mid);border-color:rgba(245,240,232,.16)}
.band--dark .mock-bar{border-color:rgba(245,240,232,.16)}
.band--dark .dot{background:rgba(245,240,232,.2)}
.band--dark .mock-q{color:var(--cream)}
.band--dark .mock-a{color:rgba(245,240,232,.76)}
.band--dark .mock-miss{color:var(--ochre);border-color:rgba(245,240,232,.16)}
.band--dark .score{border-color:rgba(245,240,232,.3)}
.band--dark .score .flag{color:var(--ochre);border-color:var(--ochre)}
.band--dark .queries li{border-color:rgba(245,240,232,.16);color:var(--cream)}
.band--dark .queries li span{color:rgba(245,240,232,.5)}

/* --- palette strip: the divider device --- */
.strip-rule{display:flex;height:6px;width:100%}
.strip-rule span{flex:1 1 20%}
.strip-rule i:first-child{}

/* --- manifesto: oversized type with the monogram behind it --- */
.manifesto{position:relative;overflow:hidden}
.manifesto .band-inner{position:relative;z-index:1}
.manifesto .mark{position:absolute;right:clamp(1rem,6vw,5rem);top:50%;transform:translateY(-50%);
  width:min(34vw,380px);height:auto;opacity:.11;z-index:0;pointer-events:none}
@media(max-width:860px){.manifesto .mark{width:60vw;opacity:.07;right:-8%}}
.manifesto h2{font-size:clamp(2.5rem,6.4vw,4.8rem);line-height:.98;max-width:15ch;margin-bottom:1.8rem}
.pull{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.35rem,3vw,2.15rem);line-height:1.35;max-width:26ch;
  color:var(--cream);margin:0 0 1.6rem;padding-left:1.1rem;
  border-left:2px solid var(--ochre)}
.manifesto p.body{max-width:52ch;font-size:.95rem}
.sig{font-family:var(--serif);font-size:1.15rem;color:rgba(245,240,232,.75);margin-top:2rem}

/* --- footer tagline --- */
.tagline{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink-faint)}

/* about page — portrait beside text */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.about figure{margin:0}
.about img{width:100%;height:auto;display:block}
.about--flip .about-text{order:-1}
.about h2{margin-bottom:1.2rem}
.about p.body:last-child{margin-bottom:0}
@media(max-width:860px){
  .about{grid-template-columns:1fr}
  .about--flip .about-text{order:0}
}
.rules{list-style:none;margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(2rem,4vw,3.5rem)}
.rules li{padding:1rem 0;border-top:1px solid var(--rule);
  font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.4}
.band--dark .rules li{border-color:rgba(245,240,232,.18)}
@media(max-width:860px){.rules{grid-template-columns:1fr}}


/* what travels — typographic list of published work */
.travels{list-style:none;margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding:0;max-width:60rem}
.travels li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem 1.5rem;
  padding:1rem 0;border-bottom:1px solid var(--rule)}
.travels a{font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.35rem);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .25s}
.travels a:hover{border-bottom-color:var(--ink)}
.travels .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap;padding-top:.4rem}
.travels .n b{color:var(--terracotta);font-weight:400}
.travels .nolink{font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.35rem)}