/* ============================================================
   Margaret Northup — monochrome, high-contrast, motion-forward
   Shared across home / about / blog. No build step.
   ============================================================ */

:root {
  /* Margaret Northup design system — strict monochrome, immersive-g reference */

  /* Base palette */
  --mn-white:      #F6F1E8;
  --mn-black:      #0A0A0A;
  --mn-gray-500:   #8A8A8A;
  --mn-gray-200:   #E5E5E5;
  --mn-gray-700:   #4A4A4A;

  /* Semantic — light mode */
  --color-bg:          var(--mn-white);
  --color-fg:          var(--mn-black);
  --color-muted:       var(--mn-gray-500);
  --color-divider:     var(--mn-gray-200);
  --color-fg-hover:    var(--mn-gray-700);

  --surface:           var(--color-bg);
  --text-primary:      var(--color-fg);
  --text-secondary:    var(--color-muted);
  --border-hairline:   var(--color-divider);

  --placeholder-fill:  var(--mn-gray-200);
  --placeholder-ink:   var(--mn-gray-500);

  /* Typography families */
  --font-display:  "Instrument Serif", "Times New Roman", Times, serif;
  --font-utility:  "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --weight-display:    400;
  --weight-utility:    400;
  --weight-utility-md: 500;

  /* Fluid type scale */
  --type-hero:       clamp(4rem, 14vw, 15rem);
  --type-statement:  clamp(2rem, 6vw, 6.5rem);
  --type-section:    clamp(1.75rem, 4vw, 4.5rem);
  --type-headline:   clamp(1.375rem, 2.4vw, 2.5rem);
  --type-body:       clamp(0.9375rem, 1vw, 1.125rem);
  --type-utility:    0.75rem;
  --type-utility-sm: 0.6875rem;

  --lh-hero:     0.9;
  --lh-display:  1.0;
  --lh-body:     1.4;
  --lh-utility:  1.2;

  --ls-display:  -0.015em;
  --ls-hero:     -0.02em;
  --ls-body:     -0.005em;
  --ls-utility:  0.08em;

  /* Spacing */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-48:  12rem;
  --space-64:  16rem;

  --section-y:    clamp(6rem, 14vh, 14rem);
  --section-y-sm: clamp(3rem, 8vh, 7rem);
  --caption-gap:  var(--space-3);

  /* Layout */
  --container-max:   100vw;
  --gutter-x:        clamp(1rem, 2.6vw, 2.5rem);
  --grid-columns:    12;
  --grid-gap:        clamp(0.75rem, 1.4vw, 1.5rem);

  --measure-narrow:  36ch;
  --measure-body:    62ch;
  --measure-wide:    72ch;

  --radius-0:        0;
  --border-width:    1px;

  --nav-h:           clamp(3.5rem, 5vh, 4.5rem);
  --nav-x:           var(--gutter-x);

  --z-cursor:  100;
  --z-nav:      80;
  --z-loader:   90;
  --z-overlay:  70;

  /* Motion */
  --ease-expo-out:    cubic-bezier(0.19, 1, 0.22, 1);
  --ease-quart-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear:      linear;

  --dur-instant:  120ms;
  --dur-fast:     240ms;
  --dur-short:    400ms;
  --dur-medium:   800ms;
  --dur-long:    1400ms;
  --dur-loader:  2200ms;

  --stagger-word:  120ms;
  --stagger-line:  180ms;

  /* ---- Legacy blog-token aliases → current monochrome system.
     Lights up the pre-existing .posts / .article / .prose components
     (see header: "Shared across home / about / blog"), which were authored
     against an earlier token vocabulary. Purely additive — these names are
     unused by home/about, so existing pages are unchanged. Aliases point at
     semantic tokens, so they stay theme-aware under data-theme="dark". ---- */
  --ink:       var(--color-fg);
  --ink-2:     var(--color-fg-hover);
  --ink-soft:  var(--color-muted);
  --line:      var(--color-divider);
  --paper:     var(--color-bg);
  --paper-2:   var(--mn-gray-200);
  --accent:    var(--color-fg);
  --measure:   var(--measure-body);
  --rhythm:    1.7rem;   /* long-form vertical step: p→p, list item, list↔p */
  --page:      var(--container-max);
  --spring:    var(--ease-expo-out);
  --font-mono: var(--font-utility);
}

:root[data-theme="dark"] {
  --color-bg:          var(--mn-black);
  --color-fg:          #FFFFFF;
  --color-muted:       #6B6B6B;
  --color-divider:     #1F1F1F;
  --color-fg-hover:    #B0B0B0;

  --surface:           var(--color-bg);
  --text-primary:      var(--color-fg);
  --text-secondary:    var(--color-muted);
  --border-hairline:   var(--color-divider);

  --placeholder-fill:  #1F1F1F;
  --placeholder-ink:   #6B6B6B;
}

*{box-sizing:border-box;}
html{
  /* Subtle paper texture (procedural feTurbulence, no image asset). A deliberate,
     approved deviation from the "flat colour only" rule to match the reference plaster. */
  --paper-texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");
  background-color:var(--color-bg);
  background-image:var(--paper-texture);
  background-repeat:repeat;
  background-size:220px 220px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
  transition:background-color var(--dur-medium) var(--ease-quart-inout);
}
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:transparent; /* html carries the base color; the reveal layer sits behind content */
  color:var(--color-fg);
  font-family:var(--font-utility);
  font-size:var(--type-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background var(--dur-medium) var(--ease-quart-inout),
              color var(--dur-medium) var(--ease-quart-inout);
}

::selection{background:var(--color-fg);color:var(--color-bg);}

/* ----- typography primitives ----- */
.display{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.9;
}
.mono{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ----- layout ----- */
.wrap{max-width:var(--page);margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem);}
.col{max-width:var(--measure);}

/* ----- links ----- */
a{color:inherit;text-decoration:none;}

/* Underline swipe — 1px, left-to-right on hover, 400ms expo-out */
.link-swipe{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
}
.link-swipe::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:currentColor;
  transform-origin:right center;
  transform:scaleX(0);
  transition:transform var(--dur-short) var(--ease-expo-out);
}
.link-swipe:hover::after,
.link-swipe:focus-visible::after{
  transform-origin:left center;
  transform:scaleX(1);
}

.link{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:left bottom;
  transition:background-size var(--dur-short) var(--ease-expo-out);
}
.link:hover{background-size:100% 1px;}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px;}

/* ============================================================
   Homepage nav — fixed, blend-mode difference, transparent
   ============================================================ */
.nav-home{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--nav-h);
  padding:0 var(--nav-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:var(--z-nav);
  mix-blend-mode:difference;
  color:#fff;
  background:none;
  border:none;
  pointer-events:none;
}
.nav-home > *{pointer-events:auto;}

.nav-home__wordmark{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:clamp(1.25rem, 1.6vw, 1.5rem); /* ~20–24px */
  line-height:1;
  letter-spacing:-0.01em;
  color:inherit;
  white-space:nowrap;
}

/* Off/On theme toggle removed in Stage 3.5 — nav is wordmark only.
   The data-theme mechanic (colors.css / :root[data-theme="dark"]) is kept for later. */

/* ============================================================
   Design-system nav for content pages (about / contact).
   Fixed, transparent, wordmark left + utility links right.
   ============================================================ */
.site-nav{
  position:fixed;top:0;left:0;right:0;
  height:var(--nav-h);
  padding:0 var(--gutter-x);
  display:flex;align-items:center;justify-content:flex-end;
  z-index:var(--z-nav);
  pointer-events:none;
}
.site-nav > *{pointer-events:auto;}
.site-nav__brand{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:clamp(1.25rem,1.6vw,1.5rem);
  line-height:1;letter-spacing:-0.01em;
  color:var(--color-fg);
}
.site-nav__links{
  display:flex;gap:var(--space-6);
  font-family:var(--font-utility);
  font-size:var(--type-utility);
  font-weight:var(--weight-utility-md);
  letter-spacing:var(--ls-utility);
  text-transform:uppercase;
}
.site-nav__links a{color:var(--color-fg);opacity:.6;transition:opacity var(--dur-short) var(--ease-expo-out);}
.site-nav__links a:hover,.site-nav__links a[aria-current="page"]{opacity:1;}

/* Legacy nav (about/contact until migrated) */
.nav{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--color-bg) 82%,transparent);
  border-bottom:1px solid var(--color-divider);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px;}
.nav .brand{
  font-family:var(--font-display);font-weight:800;
  font-size:1.02rem;letter-spacing:-.02em;white-space:nowrap;
}
.nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;}
.nav ul a{
  font-size:.82rem;font-weight:500;letter-spacing:.02em;
  transition:color .2s;
}
@media (max-width:640px){
  .nav .wrap{height:58px;}
  .nav ul{gap:1.05rem;}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding:clamp(2.5rem,7vw,5rem) 0 clamp(1.5rem,4vw,3rem);}
.meta-line{
  display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;align-items:center;
  color:var(--ink-soft);border-bottom:1px solid var(--line);
  padding-bottom:1.1rem;margin-bottom:clamp(2rem,5vw,3.5rem);
}
.meta-line .item{display:inline-flex;align-items:center;gap:.5rem;}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);position:relative;}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);opacity:.6;animation:ping 2.4s var(--spring) infinite;}
@keyframes ping{0%{transform:scale(.6);opacity:.7;}70%,100%{transform:scale(1.8);opacity:0;}}

.eyebrow{margin:0 0 clamp(1.2rem,3vw,2rem);color:var(--ink-soft);}
.eyebrow b{color:var(--ink);font-weight:600;}

h1.hero-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(3.6rem,15.5vw,13.5rem);
  line-height:.9;letter-spacing:0;text-transform:lowercase;
  margin:0;text-wrap:balance;
}
h1.hero-title .row{display:block;overflow:hidden;}
h1.hero-title .row > span{display:block;will-change:transform;}
h1.hero-title em{font-style:italic;font-weight:500;}
h1.hero-title .thin{-webkit-text-stroke:2px var(--ink);color:transparent;font-weight:700;}

.hero-body{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);align-items:flex-end;
  justify-content:space-between;margin-top:clamp(2rem,5vw,3.25rem);
}
.lede{font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.45;max-width:34rem;margin:0;}
.lede .soft{color:inherit;}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;}

/* buttons */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.6rem;border-radius:999px;border:1px solid var(--ink);
  background:var(--bg);color:var(--fg);
  font-weight:500;font-size:.95rem;white-space:nowrap;
  transition:background .3s var(--spring),color .3s var(--spring),transform .2s var(--spring);
  will-change:transform;
}
.btn .arrow{transition:transform .3s var(--spring);}
.btn:hover{--bg:transparent;--fg:var(--ink);}
.btn:hover .arrow{transform:translate(3px,-3px);}
.btn.ghost{--bg:transparent;--fg:var(--ink);}
.btn.ghost:hover{--bg:var(--ink);--fg:var(--paper);}

/* ============================================================
   Marquee
   ============================================================ */
.marquee{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  overflow:hidden;padding:.85rem 0;white-space:nowrap;
  -webkit-user-select:none;user-select:none;
}
.marquee .track{display:inline-flex;gap:0;animation:scroll 32s linear infinite;}
.marquee:hover .track{animation-play-state:paused;}
.marquee .track span{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,3vw,2.2rem);letter-spacing:-.02em;
  padding:0 1.4rem;display:inline-flex;align-items:center;gap:2.8rem;
}
.marquee .track span::after{content:"✳";color:var(--accent);font-size:.7em;}
@keyframes scroll{to{transform:translateX(-50%);}}

/* ============================================================
   Section scaffolding + reveal
   ============================================================ */
section{padding:clamp(3.5rem,9vw,7rem) 0;border-bottom:1px solid var(--line);}
.sec-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:clamp(2rem,5vw,3.5rem);}
.sec-num{color:var(--ink-soft);}
h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1;letter-spacing:-.005em;margin:0;
  text-transform:lowercase;text-wrap:balance;
}
h3{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;margin:0 0 .5rem;}
p{margin:0 0 1.1rem;}
p.soft{color:var(--ink-2);}
.lead-p{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.45;letter-spacing:-.01em;max-width:40rem;}

/* reveal-on-scroll */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--spring),transform .9s var(--spring);}
[data-reveal].is-in{opacity:1;transform:none;}

/* ============================================================
   Work grid (invert-on-hover cards)
   ============================================================ */
.grid-work{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.grid-work .cell{
  background:var(--paper);padding:clamp(1.6rem,3vw,2.6rem);
  min-height:15rem;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  transition:background .4s var(--spring),color .4s var(--spring);position:relative;
}
.grid-work .cell:hover{background:var(--ink);color:var(--paper);}
.grid-work .cell:hover .cell-num{color:var(--paper);opacity:.5;}
.grid-work .cell:hover h3{color:var(--paper);}
.cell-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.cell-num{color:var(--ink-soft);transition:color .4s;}
.cell p{margin:0;color:inherit;}
.grid-work .cell:hover p{color:var(--paper);opacity:.85;}
@media (max-width:720px){ .grid-work{grid-template-columns:1fr;} .grid-work .cell{min-height:auto;} }

/* ============================================================
   About split
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start;}
@media (max-width:820px){ .split{grid-template-columns:1fr;gap:2rem;} }
.credits{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--line);}
.credits li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.95rem;}
.credits li span:last-child{color:var(--ink-soft);text-align:right;}
.note{
  border-left:2px solid var(--accent);padding:.2rem 0 .2rem 1.25rem;margin-top:1.5rem;
  color:var(--ink-2);font-style:italic;
}

/* ============================================================
   Writing / posts list
   ============================================================ */
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.posts li a{
  display:grid;grid-template-columns:auto 1fr auto;gap:1rem 2rem;align-items:baseline;
  padding:clamp(1.5rem,3vw,2.25rem) 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--spring);
}
.posts li a:hover{padding-left:.75rem;}
.posts .p-date{color:var(--ink-soft);white-space:nowrap;}
.posts .p-main{display:flex;flex-direction:column;}
.posts .p-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:-.02em;line-height:1.05;}
.posts .p-excerpt{color:var(--ink-2);font-size:.98rem;margin:.5rem 0 0;max-width:40rem;}
.posts .p-go{align-self:center;transition:transform .35s var(--spring);}
.posts li a:hover .p-go{transform:translate(4px,-4px);}
@media (max-width:640px){
  .posts li a{grid-template-columns:1fr;}
  .posts .p-go{display:none;}
}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:end;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;gap:2.5rem;} }
.contact-lines{list-style:none;margin:0;padding:0;}
.contact-lines li{padding:1rem 0;border-bottom:1px solid var(--line);}
.contact-lines li:first-child{border-top:1px solid var(--line);}
.contact-lines .k{display:block;color:var(--ink-soft);margin-bottom:.2rem;}
.contact-lines .v{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:-.02em;}

/* ============================================================
   Footer
   ============================================================ */
footer{padding:clamp(3rem,7vw,5rem) 0 clamp(2rem,4vw,3rem);}
.footer-big{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.6rem,12vw,9rem);line-height:.82;letter-spacing:-.045em;margin:0 0 2.5rem;
}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 1.4rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:1.5rem;}
.footer-row .foot-meta{display:inline-flex;align-items:center;gap:1rem;}
.footer-row a{color:var(--ink-2);}
.footer-row a:hover{color:var(--ink);}

/* ============================================================
   Article (blog post) typography
   ============================================================ */
.article{padding:clamp(2.5rem,6vw,4.5rem) 0;}
.article-head{max-width:52rem;margin-bottom:clamp(2.5rem,6vw,4rem);}
.article-head h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.4rem,6vw,4.75rem);line-height:.95;letter-spacing:-.035em;margin:1.75rem 0 0;
  text-wrap:balance;
}
.article-head .dek{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.45;color:var(--ink-2);max-width:42rem;}
.byline{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;color:var(--ink-soft);align-items:center;margin:1.75rem 0 0;}
.prose{max-width:var(--measure);}
.prose > *{margin-left:auto;margin-right:auto;}
.prose p{font-size:1.12rem;line-height:1.72;margin:0 auto var(--rhythm);}
.prose h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin:2.75rem auto 1.1rem;line-height:1.05;}
.prose h3{font-family:var(--font-display);font-size:1.3rem;margin:2rem auto .6rem;}
.prose strong{font-weight:600;}
.prose ul{max-width:var(--measure);margin:0 auto var(--rhythm);padding-left:0;list-style:none;}
.prose ul li{position:relative;padding-left:1.6rem;margin-bottom:var(--rhythm);line-height:1.6;}
.prose ul li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--accent);transform:rotate(45deg);}
.prose ol{max-width:var(--measure);margin:0 auto var(--rhythm);padding-left:1.4rem;}
.prose ol li,.prose ul li{font-size:1.12rem;line-height:1.72;} /* match .prose p for uniform body text */
.prose ol li{margin-bottom:var(--rhythm);padding-left:.3rem;}
.prose ol li::marker{color:var(--ink-soft);}
.prose .lead{letter-spacing:-.01em;color:var(--ink);margin-bottom:2.5rem;}
.pull{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,3.5vw,2.4rem);line-height:1.1;letter-spacing:-.02em;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:2rem 0;margin:2.75rem auto;max-width:var(--measure);text-wrap:balance;
}
.signoff{max-width:var(--measure);margin:3rem auto 0;padding-top:1.75rem;border-top:1px solid var(--line);color:var(--ink-2);}
.prose .signoff{margin-top:3rem;} /* restore top margin clobbered by .prose p specificity */
.signoff strong{color:var(--ink);}

/* back link */
.back{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-soft);transition:gap .3s var(--spring),color .2s;}
.back:hover{gap:.85rem;color:var(--ink);}

/* generic page header */
.page-head{padding:clamp(3rem,7vw,5.5rem) 0 clamp(1.5rem,3vw,2.5rem);}
.page-head h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.8rem,9vw,6.5rem);line-height:.92;letter-spacing:0;
  text-transform:lowercase;margin:1.75rem 0 0;
}

/* ============================================================
   Liquid chrome hero orb
   ============================================================ */
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,5vw,4rem);align-items:center;
}
h1.hero-title.words{
  font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:.98;letter-spacing:-.035em;
}
.chrome-wrap{position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;}
.chrome{
  position:relative;
  width:min(42vw,540px);aspect-ratio:1;
  border-radius:42% 58% 56% 44% / 48% 42% 58% 52%;
  background:conic-gradient(from var(--a),
    #0d0d0e,#8b8e94 8%,#eceef1 15%,#55585f 24%,#f7f8fa 33%,#26282c 45%,
    #b9bcc2 56%,#141519 66%,#d8dade 76%,#484b51 86%,#f3f4f6 94%,#0d0d0e 100%);
  filter:contrast(1.12) brightness(1.04) blur(1px);
  box-shadow:0 40px 90px -30px rgba(12,12,11,.55), inset 0 2px 40px rgba(255,255,255,.25);
  animation:chrome-spin 16s linear infinite, chrome-morph 18s ease-in-out infinite;
  will-change:transform,border-radius,--a;
}
/* fixed top-left sheen for depth */
.chrome::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;
  background:radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%);
  mix-blend-mode:screen;pointer-events:none;
}
/* cursor-tracked specular highlight */
.chrome::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;
  background:radial-gradient(closest-side circle at var(--mx,60%) var(--my,40%),
    rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  mix-blend-mode:screen;pointer-events:none;
  transition:background-position .12s linear;
}
@keyframes chrome-spin{ to{ --a:360deg; } }
@keyframes chrome-morph{
  0%,100%{border-radius:42% 58% 56% 44% / 48% 42% 58% 52%;transform:rotate(0deg) scale(1);}
  33%{border-radius:60% 40% 42% 58% / 55% 60% 40% 45%;transform:rotate(4deg) scale(1.03);}
  66%{border-radius:46% 54% 62% 38% / 40% 52% 48% 60%;transform:rotate(-3deg) scale(.99);}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .chrome-wrap{margin-top:2.5rem;}
  .chrome{width:min(74vw,380px);}
}

/* ============================================================
   Two-pillar service blocks
   ============================================================ */
.pillar-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:.5rem;}
.pillar-head .tag{color:var(--ink-soft);}
.pillar-sub{color:var(--ink-2);font-size:clamp(1.05rem,1.6vw,1.25rem);margin:.75rem 0 0;}

.stack{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;border-top:1px solid var(--line);}
.stack li{
  display:grid;grid-template-columns:auto 1fr;gap:.4rem 2rem;
  padding:clamp(1.4rem,3vw,2.1rem) 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--spring);
}
.stack li:hover{padding-left:.75rem;}
.stack .s-num{color:var(--ink-soft);}
.stack .s-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,2.4vw,1.85rem);letter-spacing:-.02em;line-height:1.05;grid-column:2;}
.stack .s-body{grid-column:2;color:var(--ink-2);margin:.55rem 0 0;max-width:44rem;}
@media (max-width:560px){
  .stack li{grid-template-columns:1fr;}
  .stack .s-title,.stack .s-body{grid-column:1;}
}

/* ============================================================
   Splash hero — green field + generative scribble figure
   ============================================================ */
.splash{
  position:relative;
  height:220vh;                 /* scroll room: the art rotates as you scroll through */
  background:transparent;       /* let the global cursor-revealed porcelain show through the hero (html carries the paper) */
}
.stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;
  background:transparent; /* let the global cursor-reveal show through the hero */
}

/* ============================================================
   Cursor-revealed porcelain (reveal.js) — fixed canvas behind all
   content, over the paper background. reveal.js draws the porcelain
   only in a soft magnifying lens at the cursor and fades the canvas
   each frame, so old reveals dissolve back into the paper (trailing
   wake). The <video> is an offscreen draw source only.
   ============================================================ */
.reveal{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.reveal__video{
  position:absolute; width:2px; height:2px; top:0; left:0;
  opacity:0; pointer-events:none;   /* draw source only — never shown directly */
}
.reveal__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ============================================================
   Contact — the dark floral ending of the home page.
   A fixed inverted-porcelain layer (z-index:-1) sits above the light
   reveal (z-index:-2); site.js crossfades it in as you scroll to the
   contact section, so the porcelain fades to a dark floral scene.
   ============================================================ */
.top-about{
  position:fixed; top:clamp(1.6rem,4vh,2.4rem); right:var(--gutter-x);
  z-index:var(--z-nav);
  font-family:var(--font-utility); font-size:var(--type-utility);
  font-weight:var(--weight-utility-md); letter-spacing:var(--ls-utility);
  text-transform:uppercase; color:#fff;
  mix-blend-mode:difference; /* #fff + difference → dark on light, light on dark: legible on both */
}
/* Home nav cluster — same fixed placement + difference-blend as .top-about,
   but a flex row so "Notes" sits alongside "About". */
.top-nav{
  position:fixed; top:clamp(1.6rem,4vh,2.4rem); right:var(--gutter-x);
  z-index:var(--z-nav);
  display:flex; gap:var(--space-6);
  font-family:var(--font-utility); font-size:var(--type-utility);
  font-weight:var(--weight-utility-md); letter-spacing:var(--ls-utility);
  text-transform:uppercase; color:#fff;
  mix-blend-mode:difference; /* legible on both light paper and dark contact scene */
}
.top-nav a{color:#fff;}
.contact-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:#0A0A0A; opacity:0;
}
.contact-bg__video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:invert(1) brightness(0.5) contrast(1.2); /* light plaster → dark floral */
}
.contact-bg::after{ /* flat moody tint for legibility (no gradient) */
  content:""; position:absolute; inset:0; background:rgba(10,10,10,0.4);
}
.contact{
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--section-y) var(--gutter-x);
  color:#fff;
}
.contact__email{
  font-family:var(--font-display);
  font-size:clamp(2rem,6vw,6.5rem); /* statement scale */
  line-height:1; letter-spacing:var(--ls-display);
  color:#fff; text-align:center;
}
.contact__links,
.contact__elsewhere{
  position:absolute; right:var(--gutter-x); bottom:clamp(2rem,5vh,3.5rem);
  display:flex; gap:var(--space-8);
  font-family:var(--font-utility); font-size:var(--type-utility);
  font-weight:var(--weight-utility-md); letter-spacing:var(--ls-utility);
  text-transform:uppercase;
}
/* Lift the profile links clear of the centred motto — both otherwise share the
   same bottom offset and overlap. Stack them one spacing step (--space-8) above it. */
.contact__elsewhere{ bottom:calc(clamp(2rem,5vh,3.5rem) + var(--space-8)); }
.contact__links a,
.contact__elsewhere a{ color:#fff; opacity:.65; transition:opacity var(--dur-short) var(--ease-expo-out); }
.contact__links a:hover,
.contact__elsewhere a:hover{ opacity:1; }
/* Desktop shows the full name; the <=700px block swaps to the "MMG" abbreviation. */
.contact__elsewhere .mmg-abbr{ display:none; }
/* Small centred motto footer, same utility face as the "About" link. */
.contact__motto{
  position:absolute; left:0; right:0; bottom:clamp(2rem,5vh,3.5rem);
  margin:0; text-align:center;
  font-family:var(--font-utility); font-size:var(--type-utility);
  font-weight:var(--weight-utility-md); letter-spacing:var(--ls-utility);
  text-transform:uppercase; color:#fff; opacity:.55;
}
@media (max-width:700px){
  .contact__links,
  .contact__elsewhere{ left:var(--gutter-x); right:var(--gutter-x); justify-content:center; gap:var(--space-6); flex-wrap:wrap; }
  .contact__elsewhere .mmg-full{ display:none; }
  .contact__elsewhere .mmg-abbr{ display:inline; }
}

/* ============================================================
   Entrance sequence (index) — ivory overlay, symbol breathing 2s,
   then a 600ms fade-out. Pure-CSS driven so it self-clears even if JS stalls.
   ============================================================ */
.entrance{
  position:fixed;inset:0;z-index:9000;
  background:var(--color-bg);
  display:grid;place-items:center;
  animation:entrance-out 2600ms both;
}
.entrance__symbol{
  width:80px;height:80px;object-fit:contain;
  animation:entrance-pulse 2000ms var(--ease-quart-inout) both;
}
@keyframes entrance-pulse{
  0%  {opacity:.4;transform:scale(1);}
  20% {opacity:1; transform:scale(1.05);}
  40% {opacity:.4;transform:scale(1);}
  60% {opacity:1; transform:scale(1.05);}
  80% {opacity:.4;transform:scale(1);}
  100%{opacity:1; transform:scale(1.05);}
}
@keyframes entrance-out{
  0%,76.92%{opacity:1;}                 /* hold opaque through the 2000ms pulse */
  100%{opacity:0;visibility:hidden;}    /* then fade 600ms (2000→2600ms) */
}
@media (prefers-reduced-motion:reduce){ .entrance{display:none;} }

/* ============================================================
   About — "quantumizing" meditative placeholder.
   ============================================================ */
.quantum{
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:var(--gutter-x);
}
/* Word + symbol are equal partners in one container that breathes as a unit. */
.quantum__inner{
  display:flex;flex-direction:column;align-items:center;
  gap:32px;
  animation:quantum-breathe var(--dur-loader) var(--ease-quart-inout) infinite;
}
.quantum__word{
  font-family:var(--font-display);
  font-style:italic;              /* *quantumizing* */
  font-size:var(--type-statement);
  line-height:1;
  letter-spacing:var(--ls-display);
  color:var(--color-fg);
  margin:0;
}
/* Symbol sits larger but faint — recedes toward the background while still
   breathing in phase with the word (the container drives the shared fade). */
.quantum__symbol{
  height:clamp(6rem, 16vw, 14rem);
  width:auto;display:block;
  opacity:.18;
}
@keyframes quantum-breathe{
  0%{opacity:.15;} 50%{opacity:1;} 100%{opacity:.15;}
}
@media (prefers-reduced-motion:reduce){
  .quantum__inner{animation:none;opacity:1;}
}
.scribble-canvas{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;
  width:100%;height:100%;display:block;pointer-events:none;
  /* horizontal fade: figure stays dense on the left, dims across the right so
     the headline reads over it. No vertical fade — feet still bleed off-screen. */
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 42%,rgba(0,0,0,0.30) 66%,rgba(0,0,0,0.16) 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 42%,rgba(0,0,0,0.30) 66%,rgba(0,0,0,0.16) 100%);
  will-change:transform;transform-origin:30% 45%;
  opacity:0;transition:opacity .8s ease;
}
.scribble-canvas.ready{opacity:1;}

/* Stage 3 — hero word entrance: translateY(110%)→0, opacity 0→1,
   1400ms expo-out, 120ms per-word stagger (set inline by site.js), runs once */
.splash-title[data-hero-words] .w{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:0.16em;margin-bottom:-0.16em; /* room for descenders under overflow:hidden */
}
.splash-title[data-hero-words] .w > span{ display:inline-block; }
/* Words are visible by default; only the .hero-anim class (set inline before
   paint, and never under reduced-motion) arms the lift — so a slow/disabled
   JS load never leaves the hero blank. */
html.hero-anim .splash-title[data-hero-words] .w > span{
  transform:translateY(110%);opacity:0;
  transition:transform var(--dur-long) var(--ease-expo-out),
             opacity var(--dur-long) var(--ease-expo-out);
}
html.hero-anim .splash-title[data-hero-words].is-in .w > span{transform:translateY(0);opacity:1;}
.stage > .wrap{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  height:100%;
  padding-top:clamp(4rem,10vh,6rem);padding-bottom:clamp(2rem,5vw,3.25rem);
}
.splash-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.wordmark .wm{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.35rem,2.4vw,1.95rem);letter-spacing:-.035em;line-height:1;display:block;
}
.wordmark .wm-sub{display:block;margin-top:.55rem;color:var(--ink-2);}
.arrow-mark{
  flex:none;width:58px;height:24px;background:var(--accent);
  clip-path:polygon(0 34%,58% 34%,58% 0,100% 50%,58% 100%,58% 66%,0 66%);
}
.splash-head{margin:0 0 0 auto;max-width:42rem;text-align:left;transform:translateX(clamp(0.5rem,3vw,3.25rem));}
@media (max-width:900px){ .splash-head{margin:0;max-width:46rem;transform:none;} }
.splash-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.7rem,7.6vw,6.6rem);line-height:.94;letter-spacing:0;
  text-transform:lowercase;margin:.9rem 0 0;text-wrap:balance;color:var(--ink);
}

/* Mantis-style edge rails framing the viewport */
.rail{
  position:absolute;z-index:3;font-family:inherit;
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  pointer-events:none;
}
.rail a{pointer-events:auto;}
.rail-left{left:clamp(.7rem,1.4vw,1.4rem);top:clamp(6rem,16vh,10rem);writing-mode:vertical-rl;transform:rotate(180deg);display:flex;gap:1.5rem;}
.rail-made{left:clamp(.7rem,1.4vw,1.4rem);bottom:clamp(1.2rem,3vw,2rem);writing-mode:vertical-rl;transform:rotate(180deg);}
.rail-right{right:clamp(.7rem,1.4vw,1.4rem);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;display:flex;gap:1.6rem;text-align:right;}
@media (max-width:820px){ .rail{display:none;} }
.splash-head .hero-cta{margin-top:clamp(1.5rem,3vw,2.25rem);}
.scroll-cue{
  align-self:flex-start;margin-top:clamp(1.5rem,3vw,2.25rem);
  color:var(--ink-2);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5rem;
}
.scroll-cue .down{display:inline-block;animation:bob 1.8s var(--spring) infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
@media (max-width:760px){
  .scribble-canvas{opacity:.85;}
  .scribble-canvas.ready{opacity:.9;}
}

/* ============================================================
   Brand mark — the brush wordmark. Never a focal point:
   small, quiet, opacity-dialed so it reads like a signature.
   ============================================================ */
.brandmark{
  display:inline-block;width:auto;height:34px;
  opacity:.5;transition:opacity .3s var(--spring);
}
.brandmark:hover{opacity:.8;}
.footer-mark{height:30px;}

/* ============================================================
   CircleText — "made with love ❥" ring ornament (from the
   design system's chrome/CircleText). Slowly rotates; heart
   sits at the centre. A quiet sign-off, never a focal point.
   ============================================================ */
.signoff-circle{display:flex;justify-content:center;padding:clamp(3rem,7vw,5rem) 0 clamp(1rem,3vw,2rem);}
.circle-badge{position:relative;width:150px;height:150px;}
.circle-badge .ring{position:absolute;inset:0;animation:mn-spin 22s linear infinite;}
.circle-badge .ring span{
  position:absolute;left:50%;top:50%;transform-origin:0 0;white-space:pre;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.circle-badge .heart{position:absolute;inset:0;display:grid;place-items:center;font-size:27px;color:var(--ink);}
@keyframes mn-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .circle-badge .ring{animation:none;} }

/* ============================================================
   Placeholder pages — the shimmering word, alone.
   ============================================================ */
.placeholder{
  min-height:calc(100svh - 64px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:2.2rem;padding:2rem;
}
.thinking{
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:clamp(2.6rem,9vw,6rem);letter-spacing:.01em;line-height:1;
  text-transform:lowercase;
  background:linear-gradient(100deg,var(--paper-2) 22%,var(--ink) 50%,var(--paper-2) 78%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 2.6s linear infinite;
}
@keyframes shimmer{to{background-position:-220% 0;}}
.placeholder .brandmark{height:30px;}
@media (prefers-reduced-motion:reduce){
  .thinking{animation:none;background:none;-webkit-text-fill-color:var(--ink);color:var(--ink);}
}

/* reduced motion: kill all the movement, keep it readable */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  [data-reveal]{opacity:1 !important;transform:none !important;}
  .marquee .track{animation:none;transform:none;}
}