/* =========================================================================
   MISKINCIN STUDIOS — HOUSE STYLE
   A warm, editorial, slightly grumpy design system.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..900,0..100;1,9..144,300..900,0..100&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:ital,wght@0,400..700;1,400..700&display=swap');

/* ---------- Tokens ------------------------------------------------------- */
:root{
  /* Warm paper palette */
  --paper:        #F4EEDF;
  --paper-2:      #EDE4CE;
  --paper-edge:   #E2D6B8;
  --ink:          #0F0E0B;
  --ink-soft:     #2A2720;
  --ink-mute:     #6B655A;
  --rule:         #2A2720;

  /* Brand accents pulled from our own apps */
  --souppo:       #F26B1A;   /* orange */
  --souppo-warm:  #FFB03B;
  --snap:         #22B160;   /* green */
  --stamp:        #B6261F;   /* red inkpad */
  --sky:          #3B5A9A;

  /* Scale */
  --gut:   clamp(1rem, 2vw, 1.75rem);
  --edge:  clamp(1.25rem, 4vw, 3.5rem);
  --maxw:  1440px;

  --radius: 14px;

  /* Typography */
  --display: 'Fraunces', ui-serif, Georgia, serif;
  --body:    'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --ease-out: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset-ish ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;padding:0}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- Global canvas ------------------------------------------------ */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px, 1.05vw + 10px, 18px);
  line-height:1.55;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  font-feature-settings:"ss01","ss02","cv11";
}

/* Subtle paper grain — SVG noise baked in */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.18;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Page-edge vignette warmth */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(80,50,10,.08) 100%),
    radial-gradient(120% 80% at 50% 100%, transparent 55%, rgba(80,50,10,.08) 100%);
}

main,header,footer,section{position:relative; z-index:2}

/* ---------- Type ruleset ------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:0.95;
  margin:0;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
h1{ font-size:clamp(3.4rem, 9vw, 9.5rem); }
h2{ font-size:clamp(2.6rem, 6vw, 5.5rem); }
h3{ font-size:clamp(1.8rem, 3.2vw, 3rem); }
h4{ font-size:clamp(1.25rem, 1.6vw, 1.6rem); letter-spacing:-0.01em }

p{margin:0 0 1em}
em, .italic{ font-style:italic; font-variation-settings:"opsz" 144, "SOFT" 100 }
.serif{font-family:var(--display)}
.mono{font-family:var(--mono); letter-spacing:-0.01em}

.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex;
  align-items:center;
  gap:.6ch;
}
.eyebrow::before{
  content:"";
  width:1.4ch; height:1px;
  background:var(--ink-soft);
  display:inline-block;
}

/* ---------- Layout helpers ---------------------------------------------- */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--edge);
}
.wrap-tight{
  max-width:960px;
  margin:0 auto;
  padding:0 var(--edge);
}
.rule{ border:0; height:1px; background:var(--rule); opacity:.35; margin:0 }
.rule-thick{ border:0; height:2px; background:var(--rule); margin:0 }

/* ---------- Top bar ------------------------------------------------------ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(244,238,223,.92);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  /* Soft fade-out at bottom instead of a hard line — prevents the
     visible chip/line on mobile Safari where backdrop-filter can leak. */
  box-shadow: 0 12px 16px -12px rgba(15,14,11,.06);
  border-bottom: 0;
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:.7rem; padding-bottom:.7rem;
  gap:1rem;
}
.brand{
  display:inline-flex; align-items:center; gap:.5ch;
  font-family:var(--display);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:-0.03em;
  font-variation-settings:"opsz" 40, "SOFT" 50;
  text-decoration:none;
  color:var(--ink);
}
.brand img.brand-logo{
  height: 64px;
  width: auto;
  display: block;
}
/* Text fallback styling (used only if someone removes the img) */
.brand .dot{
  width:.55em; height:.55em; border-radius:50%;
  background:var(--souppo);
  display:inline-block;
  transform:translateY(.08em);
  box-shadow: 0 0 0 3px rgba(242,107,26,.15);
}
.brand sup{
  font-family:var(--mono);
  font-size:.55rem;
  font-weight:500;
  letter-spacing:.05em;
  margin-left:.3ch;
  color:var(--ink-mute);
  top:-.9em;
}

nav.primary{
  display:flex; align-items:center; gap:clamp(.8rem,2vw,1.75rem);
  font-size:.95rem;
}
nav.primary a{
  position:relative;
  padding:.3em 0;
  color:var(--ink-soft);
  transition:color .2s var(--ease-out);
}
nav.primary a:hover,
nav.primary a[aria-current="page"]{ color:var(--ink) }
nav.primary a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--souppo);
}

.lang{
  display:inline-flex;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.06em;
  border:1px solid var(--rule);
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.35);
}
.lang a{
  padding:.4em .9em;
  color:var(--ink-soft);
  text-transform:uppercase;
  transition:all .2s var(--ease-out);
}
.lang a.on{
  background:var(--ink);
  color:var(--paper);
}
.lang a:not(.on):hover{ background:rgba(15,14,11,.06) }

.menu-btn{ display:none }

@media (max-width:760px){
  nav.primary{
    position:fixed; inset:60px 0 auto 0;
    flex-direction:column; align-items:flex-start;
    background:var(--paper);
    padding:1.5rem var(--edge);
    border-bottom:1px solid var(--rule);
    transform:translateY(-110%);
    transition:transform .35s var(--ease-out);
    gap:1rem;
    box-shadow:0 20px 40px -25px rgba(0,0,0,.25);
  }
  nav.primary.open{ transform:translateY(0) }
  nav.primary a{ font-size:1.35rem; font-family:var(--display); letter-spacing:-0.02em }
  .menu-btn{
    display:inline-flex; align-items:center; gap:.4ch;
    font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
    text-transform:uppercase;
    padding:.45rem .75rem;
    border:1px solid var(--rule); border-radius:999px;
  }
}

/* ---------- Hero --------------------------------------------------------- */
.hero{ padding:clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem) }
.hero .head{
  display:grid;
  grid-template-columns: 1fr;
  gap:1.5rem;
}
.hero h1{
  font-size:clamp(3rem, 10vw, 11rem);
  letter-spacing:-0.035em;
  font-variation-settings:"opsz" 144, "SOFT" 20, "wght" 500;
}
.hero h1 .swap{ font-style:italic; font-variation-settings:"opsz" 144, "SOFT" 100, "wght" 400 }
.hero h1 .strike{
  position:relative; display:inline-block;
  color:var(--ink-mute);
}
.hero h1 .strike::after{
  content:""; position:absolute; left:-.05em; right:-.05em; top:52%;
  height:.06em; background:var(--stamp);
  transform:rotate(-3deg);
}

.hero .lede{
  max-width:50ch;
  font-size:clamp(1.05rem, 1.3vw, 1.25rem);
  color:var(--ink-soft);
  line-height:1.55;
}
.hero .meta-row{
  display:flex; flex-wrap:wrap; gap:1.25rem 2rem; align-items:baseline;
  margin-top:2.5rem; padding-top:1.25rem;
  border-top:1px solid var(--rule);
}
.hero .meta-row div{ display:flex; flex-direction:column; gap:.2rem }
.hero .meta-row .k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute) }
.hero .meta-row .v{ font-family:var(--display); font-size:1.15rem; font-style:italic; font-variation-settings:"opsz" 40, "SOFT" 60 }

.sig{
  position:absolute;
  right:var(--edge); top:1rem;
  font-family:var(--display); font-style:italic;
  font-variation-settings:"opsz" 14, "SOFT" 100;
  color:var(--ink-mute);
  font-size:.95rem;
  transform:rotate(-3deg);
  text-align:right;
}
@media (max-width:760px){ .sig{ display:none } }

/* ---------- Stamp / marginalia ------------------------------------------ */
.stamp{
  display:inline-block;
  padding:.35em .9em;
  border:2px solid var(--stamp);
  color:var(--stamp);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  transform:rotate(-4deg);
  border-radius:4px;
  background:rgba(182,38,31,.04);
}
.stamp-green{ border-color:var(--snap); color:var(--snap); background:rgba(34,177,96,.06) }
.stamp-orange{ border-color:var(--souppo); color:var(--souppo); background:rgba(242,107,26,.06) }
.stamp-ink{ border-color:var(--ink); color:var(--ink); background:rgba(15,14,11,.04) }

.margin-note{
  font-family:var(--display); font-style:italic;
  font-variation-settings:"opsz" 14, "SOFT" 100;
  color:var(--ink-mute);
  font-size:.95rem;
  line-height:1.3;
}

/* ---------- Ticker ------------------------------------------------------- */
.ticker{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  position:relative;
}
.ticker .track{
  display:flex; gap:3rem;
  padding:.9rem 0;
  white-space:nowrap;
  animation:slide 40s linear infinite;
  will-change:transform;
}
.ticker span{
  font-family:var(--display);
  font-style:italic;
  font-variation-settings:"opsz" 40, "SOFT" 100;
  font-size:1.2rem;
  opacity:.9;
}
.ticker span::after{
  content:"✦"; margin-left:2.5rem; color:var(--souppo-warm); font-style:normal;
}
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ---------- Section containers ------------------------------------------ */
section{ padding:clamp(3.5rem, 7vw, 6rem) 0 }
section + section{ border-top:1px solid var(--rule) }
.sec-head{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap:1rem;
  margin-bottom:clamp(2rem,4vw,3.5rem);
  align-items:start;
}
@media (min-width:900px){
  .sec-head{ grid-template-columns: 1fr 1.2fr; gap:3rem }
  .sec-head .mini{ position:sticky; top:90px }
}
.sec-head .num{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--ink-mute);
  text-transform:uppercase;
}
.sec-head h2{ margin-top:.5rem }
.sec-head .sub{ color:var(--ink-soft); font-size:1.1rem; margin-top:1.2rem; max-width:55ch }

/* ---------- Manifesto list ---------------------------------------------- */
.manifesto{
  display:grid; gap:0;
}
.manifesto li{
  list-style:none;
  display:grid;
  grid-template-columns: 4rem 1fr auto;
  gap:1.5rem;
  padding:1.6rem 0;
  border-top:1px solid var(--rule);
  align-items:baseline;
}
.manifesto li:last-child{ border-bottom:1px solid var(--rule) }
.manifesto .n{ font-family:var(--mono); font-size:.75rem; letter-spacing:.15em; color:var(--ink-mute) }
.manifesto .t{ font-family:var(--display); font-size:clamp(1.4rem,2.5vw,2.2rem); font-variation-settings:"opsz" 80, "SOFT" 20; line-height:1.1 }
.manifesto .c{ color:var(--ink-soft); font-size:.95rem; max-width:18ch; text-align:right; font-style:italic }
@media (max-width:680px){
  .manifesto li{ grid-template-columns: 3rem 1fr; }
  .manifesto .c{ grid-column:2; text-align:left; margin-top:.4rem }
}

/* ---------- Product cards ----------------------------------------------- */
.product-grid{
  display:grid;
  gap:clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(12, 1fr);
}
.product{
  grid-column: span 12;
  position:relative;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper-2);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  display:grid;
  grid-template-columns: 1fr;
}
.product:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 50px -30px rgba(30,20,5,.35);
}
@media (min-width:900px){
  .product-lg{ grid-column: span 12; grid-template-columns: 1.1fr 1fr }
  .product-sm{ grid-column: span 6 }
}
.product .media{
  position:relative;
  min-height:320px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:2rem;
}
.product .body{
  padding:clamp(1.5rem, 3vw, 2.5rem);
  display:flex; flex-direction:column; gap:1.1rem;
  justify-content:space-between;
}
.product h3{ font-size:clamp(1.8rem,3vw,2.6rem); line-height:.95 }
.product .tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-mute);
}
.product .desc{ color:var(--ink-soft); font-size:1rem; max-width:40ch }
.product .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding-top:1rem;
  border-top:1px dashed rgba(15,14,11,.2);
}
.product .link{
  display:inline-flex; align-items:center; gap:.5ch;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
}
.product .link .arr{ transition: transform .25s var(--ease-out) }
.product:hover .link .arr{ transform: translateX(4px) }

/* Souppo themed bg */
.media-souppo{
  background:
    radial-gradient(120% 100% at 30% 30%, #FFD97A 0%, #F2A337 45%, #D26F17 100%);
}
.media-souppo::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  background-position: 0 0;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.media-souppo img{
  max-height:420px; position:relative; z-index:1;
  filter: drop-shadow(0 20px 25px rgba(80,30,0,.35));
  animation: bob 5s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)} }

/* Snap themed bg */
.media-snap{
  background:
    linear-gradient(180deg, #F4FFF4 0%, #E3FFEB 100%);
}
.media-snap::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(-15deg, transparent 0 38px, rgba(34,177,96,.07) 38px 39px);
  pointer-events:none;
}
.media-snap .stack{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:1.2rem;
}
.media-snap img.icon{ width:140px; border-radius:28px; box-shadow:0 20px 30px -15px rgba(34,177,96,.5) }
.media-snap img.word{ max-width:340px; filter: drop-shadow(0 6px 10px rgba(34,177,96,.1)) }

/* Status pill */
.pill{
  display:inline-flex; align-items:center; gap:.5ch;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35em .8em;
  border-radius:999px;
  border:1px solid var(--rule);
  background:rgba(15,14,11,.04);
}
.pill .dot{ width:.5em; height:.5em; border-radius:50%; background:var(--snap); display:inline-block }
.pill.dev .dot{ background:var(--souppo); animation:blink 1.6s var(--ease-out) infinite }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.3} }

/* ---------- Two-column editorial ---------------------------------------- */
.two-col{
  display:grid; gap:clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width:900px){ .two-col{ grid-template-columns: 1fr 1fr } }

.q-block{
  padding:2rem;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  position:relative;
}
.q-block::before{
  content:"“";
  position:absolute;
  top:-2.2rem; left:1rem;
  font-family:var(--display);
  font-size:8rem; line-height:1;
  color:var(--souppo);
  opacity:.5;
}

.drop-cap::first-letter{
  font-family:var(--display);
  font-size:5.5em;
  line-height:.85;
  float:left;
  padding:.1em .15em 0 0;
  font-variation-settings:"opsz" 144, "SOFT" 40;
  color:var(--souppo);
  font-weight:500;
}

/* ---------- Team ---------------------------------------------------------*/
.team-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:1.5rem;
}
.card-member{
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1.75rem;
  background:var(--paper-2);
  display:flex; flex-direction:column; gap:1rem;
  position:relative;
  transition: transform .4s var(--ease-out);
}
.card-member:hover{ transform:translateY(-4px) rotate(-.5deg) }
.card-member .portrait{
  width:100%;
  aspect-ratio: 4/5;
  background:
    linear-gradient(135deg, rgba(242,107,26,.2), rgba(34,177,96,.18));
  border-radius:8px;
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.card-member .portrait .initials{
  font-family:var(--display);
  font-size:6rem;
  font-variation-settings:"opsz" 144, "SOFT" 20, "wght" 500;
  color:var(--ink);
  mix-blend-mode:multiply;
}
.card-member .portrait::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/></svg>");
  mix-blend-mode:multiply; opacity:.5;
}
.card-member h4{ font-size:1.5rem; line-height:1 }
.card-member .role{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute) }
.card-member p{ font-size:.92rem; color:var(--ink-soft); line-height:1.5; margin:0 }
.card-member .sig-inline{
  font-family:var(--display); font-style:italic; font-size:.9rem;
  color:var(--ink-mute);
  border-top:1px dashed rgba(15,14,11,.2);
  padding-top:.8rem;
}

/* ---------- Values/grid ------------------------------------------------- */
.grid-6{
  display:grid;
  gap:1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.value{
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1.4rem;
  background:var(--paper-2);
  position:relative;
  overflow:hidden;
  transition: all .4s var(--ease-out);
}
.value:hover{
  background:var(--ink); color:var(--paper);
  transform: translateY(-3px);
}
.value .n{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.12em; color:var(--ink-mute);
  transition: color .4s var(--ease-out);
}
.value:hover .n{ color:var(--souppo-warm) }
.value h4{ margin:.7rem 0 .4rem; font-size:1.3rem }
.value p{ font-size:.9rem; margin:0; line-height:1.5; color:var(--ink-soft); transition:color .4s var(--ease-out) }
.value:hover p{ color:rgba(244,238,223,.75) }

/* ---------- FAQ --------------------------------------------------------- */
details{
  border-top:1px solid var(--rule);
  padding:1.25rem 0;
}
details:last-of-type{ border-bottom:1px solid var(--rule) }
details summary{
  list-style:none;
  cursor:pointer;
  display:flex; justify-content:space-between; gap:2rem;
  align-items:baseline;
  font-family:var(--display);
  font-size:clamp(1.2rem, 2vw, 1.8rem);
  font-variation-settings:"opsz" 40, "SOFT" 20;
  line-height:1.15;
}
details summary::-webkit-details-marker{ display:none }
details summary::after{
  content:"+"; font-family:var(--mono); font-size:1.4rem; color:var(--souppo);
  transition: transform .3s var(--ease-out);
}
details[open] summary::after{ content:"×"; transform:rotate(90deg); color:var(--stamp) }
details .ans{
  max-width:65ch;
  padding:1rem 0 0;
  color:var(--ink-soft);
  font-size:1rem; line-height:1.6;
}

/* ---------- CTA footer block -------------------------------------------- */
.cta-block{
  padding:clamp(3rem, 6vw, 5rem) 0;
  border-top:1px solid var(--rule);
  text-align:center;
  background: radial-gradient(80% 140% at 50% 0%, rgba(242,107,26,.08), transparent 55%);
}
.cta-block h2{
  font-size:clamp(2.5rem, 7vw, 6rem);
  letter-spacing:-0.03em;
  margin-bottom:1rem;
  font-variation-settings:"opsz" 144, "SOFT" 40;
}
.cta-block h2 em{
  font-variation-settings:"opsz" 144, "SOFT" 100;
  color:var(--souppo);
}
.cta-block p{ color:var(--ink-soft); max-width:50ch; margin:0 auto 2rem }
.btn{
  display:inline-flex; align-items:center; gap:.7ch;
  padding:1.1em 1.6em;
  background:var(--ink);
  color:var(--paper);
  border-radius:999px;
  font-family:var(--mono); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  transition: all .3s var(--ease-out);
  border:1px solid var(--ink);
}
.btn:hover{ background:var(--souppo); border-color:var(--souppo); color:var(--ink) }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--rule) }
.btn.ghost:hover{ background:var(--ink); color:var(--paper) }

/* ---------- Footer ------------------------------------------------------ */
footer{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(3rem, 6vw, 5rem) 0 2rem;
  position:relative; z-index:2;
}
footer .wrap{ display:grid; gap:2.5rem }
footer h3{
  font-size:clamp(2.8rem, 7vw, 6rem);
  letter-spacing:-0.03em;
  font-variation-settings:"opsz" 144, "SOFT" 40, "wght" 400;
  line-height:.9;
}
footer h3 em{ font-variation-settings:"opsz" 144, "SOFT" 100; color:var(--souppo-warm) }
footer .cols{
  display:grid; gap:2rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-top:2rem; border-top:1px solid rgba(244,238,223,.15);
}
footer .col h5{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(244,238,223,.55);
  margin:0 0 .9rem;
}
footer .col a{
  display:block; padding:.3rem 0;
  color:rgba(244,238,223,.85);
  font-size:.95rem;
  transition:color .2s var(--ease-out);
}
footer .col a:hover{ color:var(--souppo-warm) }
footer .bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:2rem; border-top:1px solid rgba(244,238,223,.15);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; color:rgba(244,238,223,.5);
  text-transform:uppercase;
}

/* ---------- Misc utilities ---------------------------------------------- */
.accent-orange{ color:var(--souppo) }
.accent-green{ color:var(--snap) }
.accent-red{ color:var(--stamp) }
.hand{
  font-family:var(--display);
  font-style:italic;
  font-variation-settings:"opsz" 14, "SOFT" 100, "wght" 300;
  color:var(--ink-mute);
}
.underline-wob{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6'><path d='M0 3 Q 25 0 50 3 T 100 3' fill='none' stroke='%23F26B1A' stroke-width='2'/></svg>");
  background-repeat:no-repeat;
  background-position: 0 94%;
  background-size: 100% .35em;
  padding-bottom:.1em;
}

/* page intro for inner pages */
.page-head{
  padding:clamp(4rem, 9vw, 8rem) 0 clamp(2.5rem, 5vw, 4rem);
  display:grid; gap:1.25rem;
}
.page-head h1{ font-size:clamp(3rem, 9vw, 8rem); line-height:.9 }
.page-head .lede{ color:var(--ink-soft); font-size:clamp(1.05rem,1.3vw,1.25rem); max-width:55ch }

/* animations on load */
.reveal{ opacity:0; transform:translateY(14px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out) }
.reveal.in{ opacity:1; transform:none }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
.reveal.d5{ transition-delay:.40s } .reveal.d6{ transition-delay:.48s }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* For the Miskincin wordmark fallback */
.wordmark-svg{ height: 28px; width:auto }

/* Team portrait: illustrated rotoscope-style images fill the 4:5 box.
   Prompts already produce warm-paper palette — so NO multiply blend (would
   muddy the flats). Light filter + "darken" mode preserves ink linework
   without crushing the color fields. Works for PNG (transparent) or JPG. */
.card-member .portrait img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  filter: saturate(.95) contrast(1.02);
  mix-blend-mode: darken;
}
.card-member .portrait:has(img)::after{ opacity:.15 }
.card-member .portrait:has(img){ background:#F4EEDF }

/* ---------- Ensemble (group) portrait -------------------------------------*/
.ensemble{
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 0 0;
}
.ensemble figure{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  box-shadow: 0 10px 40px rgba(15,14,11,.08);
  position: relative;
}
.ensemble figure img{
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.98);
}
.ensemble figcaption{
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  color: var(--ink-mute);
  text-align: center;
  padding: .9rem 1.2rem;
  border-top: 1px dashed rgba(15,14,11,.15);
  background: var(--paper);
  line-height: 1.45;
}
.ensemble .stamp{ display:inline-block; margin-bottom: 1rem }