/* KĀRYA — shared design system. Dark charcoal & patinated brass. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@600;800&family=Hanken+Grotesk:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500&display=swap');

:root{
  --ink:#14110D; --ink-2:#1A160F; --ink-3:#221C13;
  --ivory:#ECE4D5; --ivory-dim:#C6BCA9; --mute:#8C8272;
  --brass:#C29B5E; --brass-deep:#8A6D3B; --brass-glint:#E9CE92;
  --line:rgba(194,155,94,.20); --line-soft:rgba(236,228,213,.09);
  --disp:"Archivo Expanded",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
  --pad:clamp(1.15rem,4vw,2.75rem);
  --maxw:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--ivory);
  font-family:var(--body); font-weight:400; font-size:clamp(1rem,.55vw + .9rem,1.06rem);
  line-height:1.65; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* faint warm vignette so pure charcoal never reads flat */
  background-image:radial-gradient(120% 80% at 50% -10%, rgba(194,155,94,.06), transparent 60%);
  background-attachment:fixed;
}
::selection{background:var(--brass);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* ---- eyebrow / mono utility ---- */
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass)}
.mute{color:var(--mute)}

/* ---- top bar ---- */
.top{position:sticky;top:0;z-index:50;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  background:color-mix(in srgb,var(--ink) 78%,transparent);
  border-bottom:1px solid var(--line-soft)}
.top .wrap{display:flex;align-items:baseline;justify-content:space-between;
  padding-block:1.05rem}
.brand{font-family:var(--disp);font-weight:800;letter-spacing:.14em;
  font-size:1.02rem;text-transform:uppercase}
.brand small{font-family:var(--mono);font-weight:400;letter-spacing:.16em;
  font-size:.62rem;color:var(--mute);display:block;text-transform:uppercase;margin-top:.15rem}
.nav{display:flex;gap:1.6rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ivory-dim)}
.nav a{position:relative;padding-bottom:.2rem}
.nav a:hover,.nav a:focus-visible{color:var(--brass-glint)}
.nav a[aria-current="page"]{color:var(--brass)}

/* ---- hero ---- */
.hero{padding-block:clamp(4.5rem,13vh,9rem) clamp(3rem,8vh,5rem)}
.hero .eyebrow{margin:0 0 1.6rem}
.hero h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.85rem,7.2vw,5.6rem);line-height:.98;letter-spacing:.01em;margin:0;
  max-width:16ch;overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
.hero .lede{margin:1.9rem 0 0;max-width:46ch;color:var(--ivory-dim);
  font-size:clamp(1.05rem,1.4vw,1.25rem)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.section-label{display:flex;align-items:baseline;gap:1rem;
  padding-top:clamp(2.5rem,6vh,4rem);padding-bottom:1.4rem}
.section-label .n{font-family:var(--mono);color:var(--brass);font-size:.75rem;letter-spacing:.2em}
.section-label h2{font-family:var(--mono);font-weight:400;text-transform:uppercase;
  letter-spacing:.24em;font-size:.78rem;color:var(--ivory-dim);margin:0}

/* ---- catalogue (index + plate viewer) ---- */
.catalogue{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(4rem,10vh,7rem);align-items:start}
@media(min-width:900px){.catalogue{grid-template-columns:1.05fr .95fr}}

.index{list-style:none;margin:0;padding:0}
.work{border-top:1px solid var(--line-soft)}
.work:last-child{border-bottom:1px solid var(--line-soft)}
.work .row{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;
  align-items:baseline;padding:clamp(1.1rem,2.4vw,1.7rem) .2rem;position:relative;
  transition:padding-left .28s cubic-bezier(.2,.7,.2,1)}
.work a.row{cursor:pointer} /* only real links show the click affordance */
.work .num{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--brass);
  grid-row:1/3}
.work .title{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(1.15rem,2.1vw,1.7rem);line-height:1.05;
  color:var(--ivory);transition:color .25s}
.work .meta{grid-column:2;display:flex;gap:.9rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--mute);
  text-transform:uppercase}
.work .meta .field{color:var(--ivory-dim)}
.work .meta .status{color:var(--brass)}
.work .desc{grid-column:2;color:var(--ivory-dim);font-size:.96rem;margin-top:.35rem;max-width:54ch}
/* brass sweep underline on hover/focus/active */
.work .row::after{content:"";position:absolute;left:.2rem;right:.2rem;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--brass),var(--brass-glint));
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.work.is-active .row::after,.work .row:hover::after,.work .row:focus-visible::after{transform:scaleX(1)}
.work.is-active .row,.work .row:hover,.work .row:focus-visible{padding-left:1rem}
.work.is-active .title,.work .row:hover .title{color:var(--brass-glint)}

/* mobile inline plate strip (viewer hidden < 900px) */
.work .strip{grid-column:2;height:56px;margin-top:.8rem;border-radius:2px;
  border:1px solid var(--line-soft)}
@media(min-width:900px){.work .strip{display:none}}

/* sticky plate viewer (desktop) */
.viewer{display:none}
@media(min-width:900px){
  .viewer{display:block;position:sticky;top:88px}
  .viewer .stack{position:relative;aspect-ratio:4/5;border:1px solid var(--line);
    border-radius:3px;overflow:hidden}
  .viewer .plate{position:absolute;inset:0;opacity:0;transition:opacity .34s ease}
  .viewer .plate.is-active{opacity:1}
  .viewer .cap{margin-top:1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between}
  .viewer .cap b{color:var(--ivory-dim);font-weight:500}
}

/* ---- the abstract plate (per-project palette via --p1/--p2/--p3) ---- */
.plate{position:relative;background:
    radial-gradient(120% 92% at 16% 12%, color-mix(in srgb,var(--p2) 60%,transparent), transparent 58%),
    radial-gradient(120% 120% at 88% 90%, color-mix(in srgb,var(--p3) 20%,transparent), transparent 52%),
    linear-gradient(152deg, var(--p1), color-mix(in srgb,var(--p1) 60%,#000));
  isolation:isolate}
.plate::before{content:"";position:absolute;inset:0;mix-blend-mode:overlay;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
.plate::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(var(--ang,116deg),transparent 46%,rgba(233,206,146,.5) 46.6%,rgba(233,206,146,.72) 47%,transparent 47.5%),
    radial-gradient(58% 58% at var(--glx,82%) var(--gly,20%), rgba(233,206,146,.16), transparent 60%);
  opacity:.9}
/* per-plate variation so the seven fields never read as one texture */
.index .work:nth-child(1) .plate,.viewer .plate:nth-of-type(1){--ang:116deg;--glx:84%;--gly:16%}
.index .work:nth-child(2) .plate,.viewer .plate:nth-of-type(2){--ang:132deg;--glx:20%;--gly:22%}
.index .work:nth-child(3) .plate,.viewer .plate:nth-of-type(3){--ang:100deg;--glx:88%;--gly:78%}
.index .work:nth-child(4) .plate,.viewer .plate:nth-of-type(4){--ang:142deg;--glx:16%;--gly:80%}
.index .work:nth-child(5) .plate,.viewer .plate:nth-of-type(5){--ang:94deg;--glx:78%;--gly:24%}
.index .work:nth-child(6) .plate,.viewer .plate:nth-of-type(6){--ang:122deg;--glx:24%;--gly:74%}
.index .work:nth-child(7) .plate,.viewer .plate:nth-of-type(7){--ang:150deg;--glx:86%;--gly:70%}
.index .work:nth-child(8) .plate,.viewer .plate:nth-of-type(8){--ang:108deg;--glx:30%;--gly:30%}
.index .work:nth-child(9) .plate,.viewer .plate:nth-of-type(9){--ang:138deg;--glx:82%;--gly:82%}
.index .work:nth-child(10) .plate,.viewer .plate:nth-of-type(10){--ang:92deg;--glx:50%;--gly:18%}
.index .work:nth-child(11) .plate,.viewer .plate:nth-of-type(11){--ang:126deg;--glx:18%;--gly:50%}
.index .work:nth-child(12) .plate,.viewer .plate:nth-of-type(12){--ang:146deg;--glx:88%;--gly:40%}

/* ---- case study ---- */
.case-hero{padding-top:clamp(2rem,6vh,4rem)}
.back{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);display:inline-flex;gap:.5rem;align-items:center}
.back:hover{color:var(--brass-glint)}
.case-hero h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.85rem,6vw,4.4rem);line-height:1;letter-spacing:.01em;margin:1.4rem 0 0;max-width:18ch;
  overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
.case-num{font-family:var(--mono);color:var(--brass);letter-spacing:.2em;font-size:.8rem;margin-top:1.6rem}
.banner{margin:clamp(1.8rem,5vh,3rem) 0;aspect-ratio:16/7;border:1px solid var(--line);
  border-radius:3px;overflow:hidden}
@media(max-width:640px){.banner{aspect-ratio:5/4}}
.case-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);
  padding-bottom:clamp(3rem,8vh,5rem)}
@media(min-width:820px){.case-grid{grid-template-columns:.42fr .58fr}}
.spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.4rem}
.spec dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.spec dd{margin:0;color:var(--ivory-dim);font-size:.95rem}
.prose h3{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.2em;
  font-size:.76rem;color:var(--brass);margin:0 0 .8rem}
.prose p{margin:0 0 1.3rem;color:var(--ivory-dim);max-width:56ch}
.prose .did{list-style:none;margin:0 0 1.6rem;padding:0}
.prose .did li{padding:.7rem 0;border-top:1px solid var(--line-soft);color:var(--ivory);font-size:.98rem}
.prose .did li:last-child{border-bottom:1px solid var(--line-soft)}
.pager{display:flex;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--line);padding:clamp(1.6rem,4vh,2.4rem) 0 clamp(4rem,9vh,6rem);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.pager a:hover{color:var(--brass-glint)}
.pager .lbl{color:var(--mute);display:block;font-size:.66rem;margin-bottom:.35rem}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);padding-block:clamp(2.5rem,6vh,4rem)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:baseline}
.foot .mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.foot a.mono:hover{color:var(--brass-glint)}

/* ---- focus + reveal + reduced motion ---- */
:focus-visible{outline:2px solid var(--brass-glint);outline-offset:3px;border-radius:2px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  body{background-attachment:scroll}
}

/* =================== PITCH MODE (portfolio: real work) =================== */
.shot{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--ink-2)}
.shot img{display:block;width:100%;height:auto}

/* nav CTA button */
.nav .cta{color:var(--ink);background:var(--brass);padding:.45rem .85rem;border-radius:3px;letter-spacing:.1em}
.nav .cta:hover,.nav .cta:focus-visible{background:var(--brass-glint);color:var(--ink)}
.hero .actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

/* services strip */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:4px;overflow:hidden}
@media(min-width:720px){.services{grid-template-columns:repeat(3,1fr)}}
.services .svc{background:var(--ink);padding:1.25rem 1.4rem;min-height:96px}
.services .svc .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.services .svc p{margin:.5rem 0 0;font-size:.88rem;color:var(--ivory-dim)}

/* work grid of real-screenshot cards */
.grid{display:grid;grid-template-columns:1fr;gap:clamp(1.3rem,3vw,2rem);padding-bottom:clamp(2.5rem,7vh,4.5rem)}
@media(min-width:760px){.grid{grid-template-columns:1fr 1fr}}
.card{display:block;border:1px solid var(--line-soft);border-radius:5px;overflow:hidden;background:var(--ink-2);
  transition:border-color .25s ease, transform .3s cubic-bezier(.2,.7,.2,1)}
.card:hover,.card:focus-visible{border-color:var(--line);transform:translateY(-3px)}
.card .thumb{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line-soft);background:var(--ink-3)}
.card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s ease}
.card:hover .thumb img{transform:scale(1.03)}
.card .body{padding:1.1rem 1.3rem 1.35rem;display:grid;gap:.5rem}
.card .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--brass)}
.card h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.05;margin:0;color:var(--ivory)}
.card:hover h3{color:var(--brass-glint)}
.card .tags{font-family:var(--mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);display:flex;gap:.35rem .9rem;flex-wrap:wrap}
.card .tags .live{color:var(--brass)}

/* case study: visit button + palette swatches */
.visit{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--brass);
  padding:.72rem 1.15rem;border-radius:3px;transition:background .2s}
.visit:hover,.visit:focus-visible{background:var(--brass-glint);color:var(--ink)}
.visit.ghost{background:transparent;color:var(--brass);border:1px solid var(--line)}
.visit.ghost:hover{color:var(--brass-glint);border-color:var(--brass);background:transparent}
.nolink{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.swatches{display:flex;gap:.7rem;flex-wrap:wrap;margin:.3rem 0 0}
.swatches .sw{display:grid;gap:.4rem;justify-items:center}
.swatches .chip{width:46px;height:46px;border-radius:5px;border:1px solid var(--line-soft)}
.swatches .sw span{font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;color:var(--mute)}

/* pitch CTA block */
.pitch{border-top:1px solid var(--line);padding:clamp(3rem,9vh,6rem) 0 clamp(3.5rem,10vh,6.5rem)}
.pitch h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.8rem,4.6vw,3.4rem);line-height:1;letter-spacing:.01em;margin:0;max-width:20ch;text-wrap:balance}
.pitch p{color:var(--ivory-dim);margin:1.2rem 0 1.9rem;max-width:50ch}
.process{display:grid;grid-template-columns:1fr;gap:1.4rem;padding:clamp(1rem,3vh,2rem) 0 0}
@media(min-width:720px){.process{grid-template-columns:repeat(3,1fr)}}
.process .step{border-top:1px solid var(--line);padding-top:1rem}
.process .step .n{font-family:var(--mono);color:var(--brass);font-size:.72rem;letter-spacing:.2em}
.process .step h4{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.05rem;margin:.5rem 0 .4rem;color:var(--ivory)}
.process .step p{color:var(--ivory-dim);font-size:.9rem;margin:0}