:root{
  --cream:#f6efe4;
  --cream-2:#efe6d6;
  --paper:#f9f4ea;
  --ink:#3a3128;
  --ink-soft:#5b4f43;
  --ink-quiet:#8a7d6e;
  --rose:#c48a8a;
  --rose-deep:#a5645f;
  --sage:#9db7a4;
  --sky:#a7bfd0;
  --lav:#b7a9c9;
  --gold:#c69a55;
  --copper:#b47a52;
  --line:rgba(58,49,40,.14);
  --line-soft:rgba(58,49,40,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);}
body{
  font-family:'Newsreader', Georgia, serif;
  font-weight:400;
  font-size:19px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background: var(--paper);
  overflow-x:hidden;
  min-height:100vh;
}

/* ---- full-bleed background (video OR image) ---- */
.bg-stage{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(1200px 800px at 15% -10%, #f4e9dc 0%, transparent 60%),
    radial-gradient(900px 700px at 90% 10%, #efe4d3 0%, transparent 55%),
    var(--paper);
}
.bg-stage video,
.bg-stage img{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:auto; height:100vh; min-width:100vw; min-height:100vh;
  object-fit:cover;
  opacity:.94;
  filter: saturate(.96) contrast(.98);
  /* smoothing hint for upscaled sources */
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
.bg-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(249,244,234,0)   0%,
      rgba(249,244,234,.35) 55%,
      rgba(249,244,234,.82) 82%,
      rgba(249,244,234,.96) 100%),
    radial-gradient(1400px 900px at 50% 30%, transparent 45%, rgba(58,49,40,.10) 100%);
}

/* paper grain overlay */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:
    radial-gradient(rgba(58,49,40,.035) 1px, transparent 1.4px),
    radial-gradient(rgba(58,49,40,.025) 1px, transparent 1.2px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity:.55;
}

h1,h2,h3,h4,.serif{
  font-family:'EB Garamond', 'Newsreader', Georgia, serif;
  font-weight:500;
  letter-spacing:.005em;
  color:var(--ink);
}
em, .italic{ font-style:italic; }

a{color:var(--copper); text-decoration:none; border-bottom:1px solid rgba(180,122,82,.35); padding-bottom:1px; transition:color .3s, border-color .3s;}
a:hover{color:var(--rose-deep); border-color:rgba(165,100,95,.55);}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:2;}
.narrow{max-width:720px;}

/* -------------------- NAV -------------------- */
nav.top{
  position:relative; z-index:5;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding:28px 40px 8px;
  font-family:'EB Garamond', serif;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
nav.top .lab{
  justify-self:start;
  font-family:'Newsreader', serif;
  font-style:italic;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--ink-quiet);
}
nav.top .lab a{
  color:var(--ink-soft);
  border-bottom:1px solid rgba(58,49,40,.18);
}
nav.top .lab a:hover{ color:var(--rose-deep); border-color:rgba(165,100,95,.5); }
nav.top .lab .tiny{
  display:block;
  font-size:10.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-style:normal;
  color:var(--ink-quiet);
  margin-bottom:2px;
  opacity:.75;
}

nav.top .brand{
  justify-self:center;
  display:flex; align-items:center; gap:12px;
  font-size:15px; letter-spacing:.18em;
}
nav.top .brand a{ color:inherit; border:none; }
nav.top .brand .glyph{
  width:22px; height:22px; display:inline-block;
  background:
    radial-gradient(circle at 50% 50%, transparent 4px, var(--copper) 4.5px, var(--copper) 5.5px, transparent 6px),
    radial-gradient(circle at 50% 50%, transparent 8px, var(--copper) 8.5px, var(--copper) 9.5px, transparent 10px);
  opacity:.75;
}
nav.top .links{ justify-self:end; }
nav.top .links a{ color:var(--ink-soft); border:none; margin-left:26px; letter-spacing:.14em; position:relative;}
nav.top .links a:hover{color:var(--rose-deep);}
nav.top .links a.active{ color:var(--ink); }
nav.top .links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background: var(--copper);
}
@media (max-width:820px){
  nav.top{ grid-template-columns: 1fr 1fr; padding:20px 24px 4px; }
  nav.top .lab{ grid-column:1; grid-row:1; }
  nav.top .brand{ justify-self:end; grid-column:2; grid-row:1; }
  nav.top .links{ grid-column:1 / -1; grid-row:2; justify-self:start; margin-top:8px; overflow-x:auto; white-space:nowrap; }
  nav.top .links a{ margin-left:0; margin-right:22px; }
}

/* -------------------- HERO (index only) -------------------- */
.hero{
  position:relative;
  min-height: calc(100vh - 90px);
  display:flex; align-items:flex-end; justify-content:center;
  padding: 0 0 90px;
  z-index:2;
}
.hero-title{
  position:relative;
  text-align:center;
  padding:0 24px;
  max-width:900px;
}
.hero-title::before{
  content:""; position:absolute; inset:-40px -10% -30px -10%;
  background: radial-gradient(ellipse at center, rgba(249,244,234,.85) 0%, rgba(249,244,234,.55) 45%, rgba(249,244,234,0) 75%);
  z-index:-1;
  pointer-events:none;
}
.hero-title h1{
  font-size: clamp(38px, 6vw, 78px);
  line-height:1.02;
  letter-spacing:-.01em;
  font-weight:500;
}
.hero-title h1 .sep{
  display:inline-block; width:.5em; text-align:center;
  color:var(--copper); font-style:italic; font-weight:400;
  transform:translateY(-.05em);
}
.hero-sub{
  margin: 22px auto 0;
  max-width: 620px;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height:1.55;
  font-style:italic;
}
.hero-cta, .link-cta{
  margin-top:34px;
  display:inline-flex; align-items:center; gap:12px;
  font-family:'EB Garamond', serif;
  font-size:16px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--copper);
  border:none;
  border-bottom:1px solid rgba(180,122,82,.4);
  padding:6px 2px;
}
.hero-cta:hover, .link-cta:hover{ color:var(--rose-deep); border-color:rgba(165,100,95,.6); }
.hero-cta .arrow, .link-cta .arrow{
  display:inline-block; width:20px; height:1px; background:currentColor; position:relative;
}
.hero-cta .arrow::after, .link-cta .arrow::after{
  content:""; position:absolute; right:-1px; top:-3px; width:7px; height:7px;
  border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg);
}

/* -------------------- PAGE HEADER (sub-pages) -------------------- */
.page-head{
  position:relative;
  z-index:2;
  min-height: 58vh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding: 20px 24px 80px;
  text-align:center;
}
.page-head .eyebrow{ margin-bottom:18px; }
.page-head h1{
  position:relative;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height:1.05;
  letter-spacing:-.005em;
  font-weight:500;
  max-width:900px;
}
.page-head h1 em{ color:var(--rose-deep); font-style:italic; }
.page-head p.lede{
  position:relative;
  margin: 22px auto 0;
  max-width:600px;
  color:var(--ink-soft);
  font-style:italic;
  font-size: clamp(17px, 1.35vw, 20px);
}
.page-head .veil{
  position:absolute; inset:auto -20% -30px -20%; height:120%; z-index:-1;
  background: radial-gradient(ellipse at center bottom, rgba(249,244,234,.9) 0%, rgba(249,244,234,.55) 45%, rgba(249,244,234,0) 78%);
  pointer-events:none;
}

/* -------------------- section rhythm -------------------- */
main.content{
  position:relative; z-index:2;
  background:
    linear-gradient(180deg, rgba(249,244,234,.0), rgba(249,244,234,.98) 60px, rgba(249,244,234,1) 100%);
  padding-top: 40px;
  margin-top: -40px;
}
section{ position:relative; padding: 110px 0; z-index:2; }
.eyebrow{
  font-family:'EB Garamond', serif;
  font-size:13px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-quiet);
  margin-bottom:22px;
}
.eyebrow .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--copper); vertical-align:middle; margin-right:14px; opacity:.8;}
h2{
  font-size: clamp(34px, 4.2vw, 56px);
  line-height:1.05;
  letter-spacing:-.005em;
  font-weight:500;
  margin-bottom:28px;
  max-width:760px;
}
h2 em{ color:var(--rose-deep); font-style:italic; }
.lede{
  font-size: clamp(18px, 1.4vw, 21px);
  color:var(--ink-soft);
  max-width:640px;
  line-height:1.6;
}

.divider{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:0 auto 70px;
  max-width:340px;
  color:var(--copper);
  opacity:.7;
}
.divider .line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, currentColor 40%, currentColor 60%, transparent); }
.divider .mark{ font-family:'EB Garamond', serif; font-style:italic; font-size:22px; }

/* -------------------- THREE STEPS -------------------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:56px;
  margin-top:70px;
}
@media (max-width:900px){ .steps{grid-template-columns:1fr; gap:64px;} }
.step{ position:relative; padding-top:8px; }
.step .num{
  font-family:'EB Garamond', serif; font-style:italic;
  color:var(--copper); font-size:20px; letter-spacing:.05em;
  display:flex; align-items:baseline; gap:12px;
  margin-bottom:24px;
}
.step .num::after{
  content:""; display:inline-block; flex:1; height:1px;
  background:linear-gradient(90deg, currentColor, transparent);
  opacity:.5;
}
.step h3{ font-size:34px; letter-spacing:-.005em; margin-bottom:14px;}
.step p{ color:var(--ink-soft); line-height:1.6; }
.step .icon{ width:64px; height:64px; margin-bottom:18px; display:flex; align-items:center; justify-content:center;}
.step .icon svg{width:100%; height:100%;}

/* -------------------- STUDIO -------------------- */
.studio{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:80px;
  align-items:center;
}
@media (max-width:900px){ .studio{grid-template-columns:1fr; gap:56px;} }
.studio-art{
  position:relative;
  aspect-ratio: 4/5;
  border-radius:2px;
  background:
    radial-gradient(circle at 30% 25%, rgba(196,138,138,.28), transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(157,183,164,.24), transparent 55%),
    radial-gradient(circle at 55% 90%, rgba(183,169,201,.22), transparent 55%),
    linear-gradient(180deg, #f4ead9, #ece0cc);
  box-shadow:
    inset 0 0 60px 6px rgba(246,239,228,.7),
    0 20px 40px -24px rgba(58,49,40,.18);
  overflow:hidden;
}
.soul-card{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.card{
  position:relative; width:74%;
  background:#faf3e6;
  padding:34px 30px 26px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 12px 30px -14px rgba(58,49,40,.28);
  transform:rotate(-2.5deg);
  border:1px solid rgba(58,49,40,.06);
}
.card::before{
  content:""; position:absolute; inset:-14px -10px auto -10px; height:22px;
  background:repeating-linear-gradient(90deg, rgba(157,183,164,.55) 0 8px, rgba(157,183,164,.2) 8px 14px);
  transform:rotate(-3deg); opacity:.8;
}
.card .stamp{
  font-family:'EB Garamond', serif; font-style:italic; color:var(--ink-quiet);
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  margin-bottom:14px;
  display:flex; justify-content:space-between;
}
.card .stamp .seal{ color:var(--copper); }
.card h4{ font-family:'EB Garamond', serif; font-weight:500; font-size:28px; line-height:1.15; margin-bottom:10px;}
.card .meta{ font-size:14px; color:var(--ink-soft); font-style:italic; margin-bottom:20px;}
.card .lines{
  border-top:1px solid var(--line-soft);
  padding-top:14px;
  font-size:14px; color:var(--ink-soft); line-height:1.7;
}
.card .lines .k{ color:var(--ink-quiet); font-style:italic; font-family:'EB Garamond', serif; margin-right:8px; }
.card .hash{
  margin-top:20px; padding-top:14px; border-top:1px dashed var(--line);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size:11px; color:var(--copper); letter-spacing:.03em;
  word-break:break-all;
}
.card .hash::before{ content:"sealed · "; color:var(--ink-quiet); font-family:'EB Garamond', serif; font-style:italic; letter-spacing:.1em;}
.key-str{
  position:absolute; top:0; right:14%; width:2px; height:64px;
  background:linear-gradient(180deg, transparent, rgba(58,49,40,.28));
}
.key-svg{ position:absolute; top:56px; right:calc(14% - 14px); width:36px; height:36px; transform:rotate(8deg); }

.studio-body h2{ margin-bottom:22px; }
.studio-body p{ color:var(--ink-soft); margin-bottom:18px; max-width:520px; }
.studio-cta{
  margin-top:26px;
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 22px;
  background:#3a3128; color:#f6efe4;
  font-family:'EB Garamond', serif;
  font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  border:none;
  box-shadow: 0 10px 24px -12px rgba(58,49,40,.4);
  transition: transform .25s ease, background .3s;
}
.studio-cta:hover{ background:#2c251e; transform: translateY(-1px); color:#f6efe4;}
.studio-cta .arrow{ display:inline-block; width:22px; height:1px; background:currentColor; position:relative;}
.studio-cta .arrow::after{content:""; position:absolute; right:-1px; top:-3px; width:7px; height:7px; border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg);}
.studio-note{ display:block; margin-top:14px; font-style:italic; color:var(--ink-quiet); font-size:15px; }

/* -------------------- OPEN SOURCE -------------------- */
.os-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:60px;}
.os-head .lede{max-width:520px;}
.repo-list{ border-top:1px solid var(--line); }
.repo{
  display:grid;
  grid-template-columns: 220px 1fr auto;
  gap:32px;
  padding:26px 4px;
  border-bottom:1px solid var(--line);
  align-items:baseline;
  transition:background .3s;
}
.repo:hover{ background: rgba(198,154,85,.05); }
@media (max-width:720px){ .repo{ grid-template-columns:1fr; gap:6px; padding:22px 4px;} }
.repo .name{
  font-family:'EB Garamond', serif;
  font-size:24px; font-weight:500;
  color:var(--ink);
  display:flex; align-items:baseline; gap:12px;
}
.repo .name .tag{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-quiet);
  padding:2px 8px; border:1px solid var(--line); border-radius:2px;
  font-family:'Newsreader', serif;
}
.repo .desc{ color:var(--ink-soft); font-style:italic; }
.repo .link{
  font-family:'EB Garamond', serif; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--copper); white-space:nowrap;
  border-bottom:1px solid rgba(180,122,82,.35);
}
.repo .link.pending{ color:var(--ink-quiet); border-color:transparent; font-style:italic; text-transform:none; letter-spacing:0; font-family:'Newsreader',serif;}

/* -------------------- WHY -------------------- */
.why{ position:relative; padding: 130px 0; }
.why-inner{ max-width:700px; margin:0 auto; text-align:left; padding: 0 24px; }
.why h2{ font-size: clamp(30px, 3.4vw, 44px); text-align:center; margin: 0 auto 48px;}
.why p{
  font-size: clamp(18px, 1.35vw, 21px);
  line-height:1.72;
  color:var(--ink-soft);
  margin-bottom:26px;
}
.why p:first-of-type::first-letter{
  font-family:'EB Garamond', serif;
  font-size: 4.4em; float:left; line-height:.9; padding: 6px 12px 0 0;
  color:var(--rose-deep); font-style:italic; font-weight:500;
}
.why .promise{
  margin-top:32px;
  padding: 22px 26px;
  border-left: 2px solid var(--copper);
  background: rgba(246,239,228,.55);
  font-style:italic;
  color:var(--ink);
}
.why .sig{
  margin-top:36px; text-align:right;
  font-family:'EB Garamond', serif; font-style:italic; color:var(--ink-quiet);
}
.why .sig .swirl{ display:block; margin: 0 0 0 auto; width:56px; height:24px; color:var(--copper); opacity:.7; }

/* next-page link at bottom of sub-pages */
.next-page{
  display:flex; justify-content:space-between; align-items:baseline;
  margin: 90px auto 0; max-width:1180px; padding:40px 32px 0;
  border-top:1px solid var(--line);
  color:var(--ink-quiet); font-style:italic;
}
.next-page .prev, .next-page .next{
  font-family:'EB Garamond', serif; font-style:normal;
  letter-spacing:.14em; text-transform:uppercase; font-size:14px;
  color:var(--copper); border:none;
}
.next-page .label{ display:block; font-size:11px; letter-spacing:.28em; color:var(--ink-quiet); margin-bottom:6px; font-family:'EB Garamond', serif; text-transform:uppercase;}

/* -------------------- FOOTER -------------------- */
footer{
  position:relative;
  padding: 60px 0 80px;
  border-top:1px solid var(--line);
  color:var(--ink-quiet);
  font-size:15px;
  z-index:2;
  background: var(--paper);
}
.foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:30px; flex-wrap:wrap;
}
.foot .brand{ font-family:'EB Garamond', serif; font-size:20px; font-weight:500; color:var(--ink); letter-spacing:.02em;}
.foot .brand em{color:var(--copper);}
.foot .links a{ margin-left:26px; color:var(--ink-soft); border:none; letter-spacing:.14em; text-transform:uppercase; font-family:'EB Garamond', serif; font-size:13px;}
.foot .links a:first-child{margin-left:0}
.foot .ack{
  width:100%; margin-top:36px; padding-top:24px; border-top:1px dashed var(--line-soft);
  display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
  color:var(--ink-quiet); font-style:italic; font-size:14px;
}
.foot .ack .raven{color:var(--rose-deep);}
.foot .ack .lab-note a{ color:var(--ink-soft); border-bottom:1px solid rgba(58,49,40,.18);}

/* reveal on scroll */
.reveal{ opacity:1; transform:none; transition: transform 1.1s ease; }
.reveal.in{ transform:none; }
.reveal.d1{ transition-delay:.1s;} .reveal.d2{transition-delay:.22s;} .reveal.d3{transition-delay:.36s;}

/* The original five motion-collages are intentionally swappable at
   /assets/backgrounds/<route>.mp4. Until that archive is restored, the
   supplied watercolor key art carries each page with a distinct crop. */
.bg-stage img{ width:100%; height:100%; left:0; transform:none; }
.bg-stage[data-page="home"] img{ object-position:center; }
.bg-stage[data-page="what"] img{ object-position:22% center; filter:saturate(.88) hue-rotate(8deg) brightness(1.04); }
.bg-stage[data-page="studio"] img{ object-position:50% center; filter:saturate(.82) brightness(1.06); }
.bg-stage[data-page="open"] img{ object-position:82% center; filter:saturate(.82) hue-rotate(-8deg) brightness(1.04); }
.bg-stage[data-page="why"] img{ object-position:62% center; filter:saturate(.8) hue-rotate(14deg) brightness(1.06); }
.studio-cta[aria-disabled="true"]{ cursor:not-allowed; opacity:.72; }
.studio-cta[aria-disabled="true"]:hover{ background:#3a3128; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}
</content>