/* ==========================================================================
   ROBERTA ARMANI — THE LIVING ARCHIVE
   Design system: "Archival Marks"
   main.css — tokens, primitives, layout, components
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Palette */
  --paper:        #F7F3EA;
  --paper-deep:   #EFE8D9;
  --ink:          #172329;
  --terracotta:   #B85C45;
  --celadon:      #B8C8B9;
  --butter:       #F1E4BE;
  --rose:         #D6B6AA;
  --plum:         #433238;
  --stone:        #63605A;   /* brand stone #77746D darkened for AA text contrast */
  --stone-brand:  #77746D;   /* original palette value, decorative use */
  --white:        #FFFFFF;

  /* Derived */
  --ink-80:   rgba(23,35,41,.80);
  --ink-64:   rgba(23,35,41,.64);
  --line:     rgba(23,35,41,.16);
  --line-soft:rgba(23,35,41,.09);
  --line-dark:rgba(247,243,234,.20);
  --terra-08: rgba(184,92,69,.08);

  /* Type */
  --sans: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:"Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* Fluid scale */
  --t-mark:   clamp(.625rem, .58rem + .18vw, .70rem);
  --t-micro:  clamp(.75rem, .72rem + .14vw, .8125rem);
  --t-small:  clamp(.875rem, .85rem + .16vw, .9375rem);
  --t-body:   clamp(1rem, .96rem + .22vw, 1.0625rem);
  --t-lead:   clamp(1.125rem, 1.02rem + .48vw, 1.375rem);
  --t-h4:     clamp(1.125rem, 1.02rem + .5vw, 1.4375rem);
  --t-h3:     clamp(1.5rem, 1.28rem + 1.05vw, 2.25rem);
  --t-h2:     clamp(2rem, 1.5rem + 2.35vw, 3.75rem);
  --t-h1:     clamp(2.5rem, 1.55rem + 4.3vw, 6rem);
  --t-mega:   clamp(3.25rem, 1.6rem + 7.4vw, 9rem);
  --t-numeral:clamp(3.5rem, 2rem + 7vw, 9rem);

  /* Rhythm */
  --gut: clamp(1.25rem, .85rem + 1.9vw, 2.5rem);
  --pad: clamp(1.25rem, .45rem + 3.6vw, 4.5rem);
  --sec: clamp(4.5rem, 2.6rem + 8.4vw, 10rem);
  --maxw: 1560px;
  --read: 34rem;

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 74px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  overflow-x:hidden;
  max-width:100%;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:300;
  line-height:1.72;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
strong,b{font-weight:600}
em{font-style:italic}
hr{border:0;border-top:1px solid var(--line);margin:0}

::selection{background:var(--terracotta);color:var(--paper)}

:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
  border-radius:2px;
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;top:-100px;left:var(--pad);z-index:200;
  background:var(--ink);color:var(--paper);
  padding:.85rem 1.4rem;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}
.skip-link:focus{top:12px}

/* --------------------------------------------------------------------------
   3. AUTH GATE — hides page only while a redirect is in flight
   -------------------------------------------------------------------------- */
html.ra-gate body{visibility:hidden}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */
.serif{font-family:var(--serif);font-weight:300}

.mark{
  font-family:var(--sans);
  font-size:var(--t-mark);
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--stone);
  line-height:1.5;
  display:inline-block;
}
.mark--ink{color:var(--ink-64)}
.mark--terra{color:var(--terracotta)}
.mark--light{color:rgba(247,243,234,.62)}
.mark--slash > span{color:var(--terracotta);margin-right:.55em}

/* Eyebrow with rule */
.eyebrow{
  display:flex;align-items:center;gap:.9rem;
  font-size:var(--t-mark);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--stone);
}
.eyebrow::after{
  content:"";flex:1 1 auto;height:1px;background:var(--line);max-width:220px;
}
.eyebrow b{color:var(--terracotta);font-weight:500}
.eyebrow--light{color:rgba(247,243,234,.66)}
.eyebrow--light::after{background:var(--line-dark)}
.eyebrow--light b{color:var(--rose)}
.eyebrow--nogrow::after{display:none}

.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:var(--t-h1);
  line-height:1.02;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.display em{font-style:italic;color:var(--terracotta)}

.h2{
  font-family:var(--serif);font-weight:300;font-size:var(--t-h2);
  line-height:1.06;letter-spacing:-.015em;text-wrap:balance;
}
.h2 em{font-style:italic;color:var(--terracotta)}
.h3{
  font-family:var(--serif);font-weight:400;font-size:var(--t-h3);
  line-height:1.14;letter-spacing:-.01em;
}
.h4{
  font-family:var(--sans);font-weight:500;font-size:var(--t-h4);
  line-height:1.3;letter-spacing:-.006em;
}

.lead{
  font-size:var(--t-lead);line-height:1.6;font-weight:300;
  color:var(--ink-80);letter-spacing:.002em;
}
.prose p + p{margin-top:1.35em}
.prose p{color:var(--ink-80);max-width:38rem}
.prose .lead{color:var(--ink)}
.measure{max-width:var(--read)}
.muted{color:var(--stone)}
.center{text-align:center}

/* Drop-cap opener */
.opener::first-letter{
  font-family:var(--serif);
  font-size:3.1em;line-height:.86;font-weight:400;
  float:left;margin:.06em .11em 0 0;color:var(--terracotta);
}

/* Large numeral */
.numeral{
  font-family:var(--serif);font-weight:300;
  font-size:var(--t-numeral);line-height:.82;
  letter-spacing:-.04em;color:var(--terracotta);
}
.numeral--ghost{color:transparent;-webkit-text-stroke:1px rgba(23,35,41,.22)}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
}
.wrap--narrow{max-width:1080px}
.section{padding-block:var(--sec)}
.section--tight{padding-block:calc(var(--sec) * .62)}
.section--flush-top{padding-top:0}

.grid{display:grid;gap:var(--gut)}
.g12{grid-template-columns:repeat(12,minmax(0,1fr))}

/* Rule with terracotta tick */
.rule{
  position:relative;height:1px;background:var(--line);
  width:100%;margin-block:2.5rem;
}
.rule::before{
  content:"";position:absolute;left:0;top:-2px;
  width:34px;height:5px;background:var(--terracotta);
}
.rule--dark{background:var(--line-dark)}
.rule--dark::before{background:var(--rose)}

/* Tonal blocks */
.tone-ink{background:var(--ink);color:var(--paper)}
.tone-ink p,.tone-ink .lead{color:rgba(247,243,234,.76)}
.tone-plum{background:var(--plum);color:var(--paper)}
.tone-plum p,.tone-plum .lead{color:rgba(247,243,234,.76)}
.tone-celadon{background:var(--celadon);color:var(--ink)}
.tone-celadon p,.tone-celadon .lead{color:rgba(23,35,41,.82)}
.tone-butter{background:var(--butter);color:var(--ink)}
.tone-butter p,.tone-butter .lead{color:rgba(23,35,41,.82)}
.tone-deep{background:var(--paper-deep)}
.tone-ink .h2 em,.tone-plum .h2 em,.tone-ink .display em{color:var(--rose)}

/* Hairline frame */
.framed{border:1px solid var(--line);padding:clamp(1.5rem,1rem + 2.2vw,3rem)}
.framed--dark{border-color:var(--line-dark)}

/* --------------------------------------------------------------------------
   6. ARCHIVE PLATE — the signature image device
   Images are CONTAINED on a tinted ground: nothing is ever cropped.
   -------------------------------------------------------------------------- */
.plate{
  position:relative;
  display:flex;flex-direction:column;
  margin:0;
}
.plate__frame{
  position:relative;
  background:var(--paper-deep);
  border:1px solid var(--line);
  padding:clamp(.75rem,.4rem + 1.3vw,1.5rem);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.plate__frame img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
/* aspect variants — image is contained, so ratio never distorts the subject */
.plate--tall  .plate__frame{aspect-ratio:3/4}
.plate--port  .plate__frame{aspect-ratio:4/5}
.plate--sq    .plate__frame{aspect-ratio:1/1}
.plate--wide  .plate__frame{aspect-ratio:16/10}
.plate--pano  .plate__frame{aspect-ratio:21/9}

/* Grounds */
.plate--celadon .plate__frame{background:var(--celadon)}
.plate--butter  .plate__frame{background:var(--butter)}
.plate--rose    .plate__frame{background:var(--rose)}
.plate--ink     .plate__frame{background:var(--ink);border-color:rgba(247,243,234,.16)}
.plate--plum    .plate__frame{background:var(--plum);border-color:rgba(247,243,234,.16)}
.plate--paper   .plate__frame{background:var(--white)}

/* Registration marks (decorative corners) */
.plate__frame::before,
.plate__frame::after{
  content:"";position:absolute;width:13px;height:13px;pointer-events:none;
  border-color:rgba(23,35,41,.34);
}
.plate__frame::before{top:9px;left:9px;border-top:1px solid;border-left:1px solid}
.plate__frame::after{bottom:9px;right:9px;border-bottom:1px solid;border-right:1px solid}
.plate--ink .plate__frame::before,.plate--ink .plate__frame::after,
.plate--plum .plate__frame::before,.plate--plum .plate__frame::after{border-color:rgba(247,243,234,.34)}

/* Caption strip */
.plate__cap{
  display:flex;gap:1rem;align-items:baseline;
  padding-top:.85rem;
  border-top:1px solid var(--line);
  margin-top:.85rem;
}
.plate__cap .idx{
  font-size:var(--t-mark);font-weight:500;letter-spacing:.2em;
  color:var(--terracotta);flex:0 0 auto;
}
.plate__cap .txt{
  font-size:var(--t-micro);line-height:1.55;color:var(--stone);font-weight:300;
}
.plate--onink .plate__cap{border-top-color:var(--line-dark)}
.plate--onink .plate__cap .txt{color:rgba(247,243,234,.62)}
.plate--onink .plate__cap .idx{color:var(--rose)}

/* --------------------------------------------------------------------------
   7. BUTTONS / LINKS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.85rem;
  font-size:var(--t-micro);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;
  padding:1.05rem 1.85rem;
  border:1px solid var(--ink);
  color:var(--ink);background:transparent;
  position:relative;overflow:hidden;
  transition:color .4s var(--ease),border-color .4s var(--ease);
  min-height:52px;
}
.btn span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.85rem}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .48s var(--ease);z-index:0;
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{color:var(--paper)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

.btn--terra{border-color:var(--terracotta);color:var(--terracotta)}
.btn--terra::before{background:var(--terracotta)}
.btn--terra:hover,.btn--terra:focus-visible{color:var(--paper)}

.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid::before{background:var(--terracotta)}
.btn--solid:hover,.btn--solid:focus-visible{color:var(--paper);border-color:var(--terracotta)}

.btn--light{border-color:rgba(247,243,234,.42);color:var(--paper)}
.btn--light::before{background:var(--paper)}
.btn--light:hover,.btn--light:focus-visible{color:var(--ink);border-color:var(--paper)}

/* Text link with animated underline */
.tlink{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--t-micro);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
  position:relative;padding-bottom:.4rem;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--terracotta);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .45s var(--ease);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.tlink:hover{color:var(--terracotta)}
.tlink .arw{transition:transform .4s var(--ease)}
.tlink:hover .arw{transform:translateX(4px)}
.tlink--light{color:var(--paper)}
.tlink--light::after{background:var(--rose)}
.tlink--light:hover{color:var(--rose)}

/* --------------------------------------------------------------------------
   8. HEADER / NAVIGATION (sticky)
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:90;
  background:rgba(247,243,234,.88);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
.site-header.is-stuck{
  box-shadow:0 1px 24px rgba(23,35,41,.07);
  background:rgba(247,243,234,.96);
}
.nav{
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:flex;align-items:baseline;gap:.75rem;flex:0 0 auto}
.brand__name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.2rem,1.05rem + .5vw,1.55rem);
  line-height:1;letter-spacing:.005em;white-space:nowrap;
}
.brand__mark{
  font-size:var(--t-mark);letter-spacing:.24em;text-transform:uppercase;
  color:var(--terracotta);font-weight:500;
}
.brand:hover .brand__name{color:var(--terracotta)}

.nav__list{display:flex;align-items:center;gap:clamp(1rem,.2rem + 1.35vw,2.1rem)}
.nav__link{
  position:relative;display:block;padding:.55rem 0;
  font-size:var(--t-mark);font-weight:400;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-64);
  transition:color .32s var(--ease);white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:4px;height:4px;background:var(--terracotta);
  border-radius:50%;opacity:0;transform:scale(.4);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{opacity:.45;transform:scale(1)}
.nav__link[aria-current="page"]{color:var(--ink);font-weight:500}
.nav__link[aria-current="page"]::after{opacity:1;transform:scale(1)}

.nav__end{display:flex;align-items:center;gap:1.1rem;flex:0 0 auto}
.nav__exit{
  font-size:var(--t-mark);letter-spacing:.19em;text-transform:uppercase;
  color:var(--stone);border:1px solid var(--line);
  padding:.6rem .95rem;transition:.32s var(--ease);
}
.nav__exit:hover{color:var(--terracotta);border-color:var(--terracotta)}

/* Scroll progress */
.nav__progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--terracotta);transform:scaleX(0);transform-origin:left center;
}

/* Burger */
.burger{
  display:none;width:46px;height:46px;position:relative;
  border:1px solid var(--line);flex:0 0 auto;
}
.burger i{
  position:absolute;left:50%;translate:-50% 0;
  width:19px;height:1.5px;background:var(--ink);
  transition:transform .42s var(--ease),opacity .28s var(--ease);
}
.burger i:nth-child(1){top:17px}
.burger i:nth-child(2){top:23px}
.burger i:nth-child(3){top:29px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile panel */
.navpanel{
  position:fixed;inset:0;z-index:95;
  background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + 2rem) var(--pad) 2rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-14px);
  transition:opacity .42s var(--ease),transform .42s var(--ease),visibility .42s;
  overflow-y:auto;
}
.navpanel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.navpanel__list{display:flex;flex-direction:column;margin-top:1rem}
.navpanel__item{border-top:1px solid var(--line-dark)}
.navpanel__item:last-child{border-bottom:1px solid var(--line-dark)}
.navpanel__link{
  display:flex;align-items:baseline;gap:1.1rem;
  padding:1.05rem 0;
  font-family:var(--serif);font-size:clamp(1.65rem,1.2rem + 2.6vw,2.5rem);
  font-weight:300;line-height:1.1;color:var(--paper);
  transition:color .3s var(--ease),padding-left .35s var(--ease);
}
.navpanel__link .n{
  font-family:var(--sans);font-size:var(--t-mark);font-weight:500;
  letter-spacing:.2em;color:var(--rose);flex:0 0 auto;
}
.navpanel__link:hover,.navpanel__link[aria-current="page"]{color:var(--rose);padding-left:.5rem}
.navpanel__foot{
  margin-top:auto;padding-top:2.25rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
  justify-content:space-between;
}
body.nav-open{overflow:hidden}

/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--paper);position:relative}
.site-footer a{color:inherit}
.footer__top{
  padding-block:clamp(3.25rem,2rem + 4.4vw,6rem);
  border-bottom:1px solid var(--line-dark);
}
.footer__grid{
  display:grid;gap:clamp(2.25rem,1.4rem + 3vw,4rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
.footer__statement{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.6rem,1.15rem + 2.1vw,2.7rem);
  line-height:1.14;letter-spacing:-.012em;color:var(--paper);
  max-width:22ch;
}
.footer__statement em{font-style:italic;color:var(--rose)}
.footer__h{
  font-size:var(--t-mark);letter-spacing:.24em;text-transform:uppercase;
  color:var(--rose);margin-bottom:1.35rem;display:block;font-weight:500;
}
.footer__nav li + li{margin-top:.62rem}
.footer__nav a{
  font-size:var(--t-small);color:rgba(247,243,234,.74);
  transition:color .3s var(--ease),padding-left .3s var(--ease);
  display:inline-block;
}
.footer__nav a:hover{color:var(--paper);padding-left:.35rem}

.footer__contact dt{
  font-size:var(--t-mark);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,243,234,.62);margin-bottom:.3rem;
}
.footer__contact dd{margin:0 0 1.15rem}
.footer__contact dd a,.footer__contact dd span{
  font-size:var(--t-small);color:var(--paper);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),color .3s var(--ease);
}
.footer__contact dd a:hover{border-bottom-color:var(--rose);color:var(--rose)}

/* Social icons */
.social{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:.35rem}
.social a{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line-dark);color:rgba(247,243,234,.78);
  transition:background .34s var(--ease),color .34s var(--ease),border-color .34s var(--ease),transform .34s var(--ease);
}
.social a:hover,.social a:focus-visible{
  background:var(--terracotta);border-color:var(--terracotta);
  color:var(--paper);transform:translateY(-3px);
}
.social svg{width:17px;height:17px;fill:currentColor}

.footer__bottom{
  padding-block:1.75rem;
  display:flex;flex-wrap:wrap;gap:.9rem 2rem;
  align-items:center;justify-content:space-between;
}
.footer__bottom p,.footer__bottom a{
  font-size:var(--t-micro);color:rgba(247,243,234,.6);letter-spacing:.03em;
}
.footer__bottom a{border-bottom:1px solid rgba(247,243,234,.28);transition:.3s var(--ease)}
.footer__bottom a:hover{color:var(--rose);border-bottom-color:var(--rose)}

/* --------------------------------------------------------------------------
   10. PAGE MASTHEAD (internal pages)
   -------------------------------------------------------------------------- */
.masthead{
  padding-top:clamp(3rem,1.8rem + 4.4vw,6.25rem);
  padding-bottom:clamp(2.25rem,1.4rem + 3vw,4rem);
  border-bottom:1px solid var(--line);
}
.masthead__row{
  display:grid;gap:var(--gut);
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  align-items:end;
}
.masthead__title{
  font-family:var(--serif);font-weight:300;
  font-size:var(--t-mega);line-height:.94;letter-spacing:-.028em;
  margin-top:1.6rem;
}
.masthead__title em{font-style:italic;color:var(--terracotta)}
.masthead__meta{display:flex;flex-direction:column;gap:.9rem;padding-bottom:.6rem}
.metarow{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding-bottom:.62rem;border-bottom:1px solid var(--line-soft);
}
.metarow dt{font-size:var(--t-mark);letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.metarow dd{margin:0;font-size:var(--t-micro);color:var(--ink);text-align:right;font-weight:400}

/* --------------------------------------------------------------------------
   11. SHARED EDITORIAL COMPONENTS
   -------------------------------------------------------------------------- */

/* Section head: numeral + label + optional intro */
.shead{margin-bottom:clamp(2.25rem,1.5rem + 2.6vw,4rem)}
.shead__top{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap}
.shead__num{
  font-family:var(--serif);font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);
  color:var(--terracotta);line-height:1;font-weight:400;
}
.shead__label{
  font-size:var(--t-mark);letter-spacing:.26em;text-transform:uppercase;
  color:var(--stone);font-weight:500;
}
.shead__line{flex:1 1 90px;height:1px;background:var(--line);min-width:40px}
.shead h2{margin-top:1.4rem}
.shead--light .shead__label{color:rgba(247,243,234,.6)}
.shead--light .shead__num{color:var(--rose)}
.shead--light .shead__line{background:var(--line-dark)}

/* Marginal annotation */
.margin-note{
  border-left:2px solid var(--terracotta);
  padding-left:1.15rem;
  font-size:var(--t-micro);line-height:1.65;color:var(--stone);
}
.margin-note b{
  display:block;color:var(--ink);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  font-size:var(--t-mark);margin-bottom:.5rem;
}
.margin-note--light{border-left-color:var(--rose);color:rgba(247,243,234,.66)}
.margin-note--light b{color:var(--paper)}

/* Pull quote */
.pullquote{
  position:relative;
  padding:clamp(1.75rem,1rem + 2.6vw,3rem) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pullquote blockquote{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,1.05rem + 2.1vw,2.85rem);
  line-height:1.16;letter-spacing:-.014em;
  color:var(--ink);text-wrap:balance;
}
.pullquote blockquote em{font-style:italic;color:var(--terracotta)}
.pullquote cite{
  display:block;margin-top:1.5rem;font-style:normal;
  font-size:var(--t-mark);letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);
}
.pullquote--light blockquote{color:var(--paper)}
.pullquote--light blockquote em{color:var(--rose)}
.pullquote--light cite{color:rgba(247,243,234,.6)}
.pullquote--light{border-color:var(--line-dark)}

/* Fact rail */
.facts{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.facts__item{background:var(--paper);padding:clamp(1.4rem,1rem + 1.3vw,2.15rem)}
.facts__item dt{
  font-size:var(--t-mark);letter-spacing:.22em;text-transform:uppercase;
  color:var(--terracotta);margin-bottom:.85rem;font-weight:500;
}
.facts__item dd{margin:0;font-size:var(--t-small);line-height:1.62;color:var(--ink-80)}
.facts--deep .facts__item{background:var(--paper-deep)}
.facts--pair{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Index rows (used on journal + work listings) */
.idxrow{
  display:grid;gap:var(--gut);align-items:start;
  grid-template-columns:auto minmax(0,1fr);
  padding-block:clamp(2rem,1.4rem + 2vw,3.25rem);
  border-top:1px solid var(--line);
}
.idxrow__n{
  font-family:var(--serif);font-size:clamp(2rem,1.4rem + 2.4vw,3.6rem);
  line-height:.9;color:var(--terracotta);font-weight:300;
}

/* CTA band */
.ctaband{
  display:grid;gap:clamp(1.75rem,1rem + 2.6vw,3.5rem);
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  align-items:center;
}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:.9rem}

/* Next-page pager */
.pager{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.pager__cell{
  padding:clamp(1.75rem,1.2rem + 2vw,3rem) 0;
  display:flex;flex-direction:column;gap:.85rem;
  transition:padding .4s var(--ease);
}
.pager__cell + .pager__cell{
  border-left:1px solid var(--line);
  padding-left:clamp(1.25rem,.8rem + 1.8vw,2.5rem);
}
.pager__cell:hover{padding-left:clamp(1.6rem,1rem + 2.2vw,3rem)}
.pager__cell:first-child:hover{padding-left:.5rem}
.pager__t{
  font-family:var(--serif);font-size:clamp(1.5rem,1.15rem + 1.7vw,2.4rem);
  font-weight:300;line-height:1.1;
}
.pager__cell:hover .pager__t{color:var(--terracotta)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  font-size:var(--t-mark);letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);padding:.42rem .8rem;color:var(--stone);
  background:var(--paper);
}
.chip--terra{border-color:var(--terracotta);color:var(--terracotta)}
.chip--light{border-color:var(--line-dark);color:rgba(247,243,234,.7);background:transparent}

/* ==========================================================================
   12. PAGE — INDEX (ACCESS)
   ========================================================================== */
body.access{
  min-height:100svh;display:flex;flex-direction:column;
  background:var(--paper);
  position:relative;
}
.access__deco{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.access__field{
  position:absolute;inset:0;pointer-events:none;z-index:0;
}
.access__field span{position:absolute;background:var(--line-soft)}
.access__field .v{top:0;bottom:0;width:1px}
.access__field .h{left:0;right:0;height:1px}
.access__glow{
  position:absolute;width:min(60vw,620px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(184,92,69,.10) 0%,rgba(184,92,69,0) 68%);
  right:-8vw;top:-10vh;pointer-events:none;z-index:0;
}
.access__glow.two{
  left:-14vw;bottom:-18vh;top:auto;right:auto;
  background:radial-gradient(circle,rgba(184,200,185,.28) 0%,rgba(184,200,185,0) 68%);
}
.access__inner{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:1360px;margin-inline:auto;
  padding:clamp(2.5rem,1.5rem + 4vw,5rem) var(--pad);
}
.access__head{
  position:absolute;top:clamp(1.5rem,1rem + 2vw,2.75rem);
  left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;gap:1rem;
  z-index:1;
}
.access__grid{
  display:grid;gap:clamp(2.5rem,1.4rem + 4.4vw,6rem);
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center;
}
.access__name{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.75rem,1.2rem + 7.2vw,7.5rem);
  line-height:.92;letter-spacing:-.032em;margin-top:1.5rem;
}
.access__name .ln{display:block}
.access__name .ln:last-child{color:var(--terracotta);font-style:italic;padding-left:.06em}
.access__sub{
  margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line);
  max-width:30rem;font-size:var(--t-small);line-height:1.7;color:var(--stone);
}
.access__panel{
  border:1px solid var(--line);
  background:rgba(255,255,255,.5);
  padding:clamp(1.75rem,1.1rem + 2.6vw,3.25rem);
  position:relative;
}
.access__panel::before,.access__panel::after{
  content:"";position:absolute;width:16px;height:16px;border-color:var(--terracotta);
}
.access__panel::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid}
.access__panel::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid}
.access__panel h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  line-height:1.15;margin-top:1.15rem;
}
.field{margin-top:2rem}
.field > label{
  display:block;font-size:var(--t-mark);letter-spacing:.22em;
  text-transform:uppercase;color:var(--stone);margin-bottom:.75rem;font-weight:500;
}
.field__wrap{position:relative;display:flex;align-items:center}
.field input[type="password"],
.field input[type="text"]{
  width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--ink);
  padding:.85rem 3rem .85rem 0;
  font-size:clamp(1rem,.94rem + .35vw,1.2rem);
  font-family:var(--sans);font-weight:300;letter-spacing:.16em;
  color:var(--ink);
  transition:border-color .3s var(--ease);
}
.field input::placeholder{color:rgba(119,116,109,.55);letter-spacing:.24em}
.field input:focus{outline:none;border-bottom-color:var(--terracotta)}
.field__wrap:focus-within{outline:2px solid transparent}
.field__toggle{
  position:absolute;right:0;bottom:.55rem;
  font-size:var(--t-mark);letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);padding:.4rem .1rem;transition:color .3s var(--ease);
}
.field__toggle:hover{color:var(--terracotta)}
.access__error{
  margin-top:1.15rem;min-height:1.4rem;
  font-size:var(--t-micro);color:var(--terracotta);
  letter-spacing:.05em;display:flex;align-items:center;gap:.55rem;
  opacity:0;transform:translateY(-4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.access__error.is-on{opacity:1;transform:none}
.access__error::before{content:"";width:6px;height:6px;background:var(--terracotta);flex:0 0 auto}
.access__submit{width:100%;justify-content:space-between;margin-top:1.6rem}
.access__foot{
  position:absolute;bottom:clamp(1.25rem,.8rem + 1.6vw,2.5rem);
  left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;gap:1rem;z-index:1;
}
.shake{animation:ra-shake .42s var(--ease)}

/* ==========================================================================
   13. PAGE — HOME
   ========================================================================== */
.hero{
  padding-top:clamp(2.5rem,1.4rem + 4.4vw,5.5rem);
  padding-bottom:clamp(3rem,1.8rem + 4.4vw,6rem);
  position:relative;
}
.hero__grid{
  display:grid;gap:clamp(2rem,1.2rem + 3vw,4rem);
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  align-items:start;
}
.hero__title{
  font-family:var(--serif);font-weight:300;
  font-size:var(--t-mega);line-height:.96;letter-spacing:-.032em;
  margin-top:1.75rem;text-wrap:balance;
}
.hero__title em{font-style:italic;color:var(--terracotta)}
.hero__under{
  margin-top:clamp(2rem,1.4rem + 2vw,3.25rem);
  display:grid;gap:clamp(1.5rem,1rem + 2vw,3rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  padding-top:1.75rem;border-top:1px solid var(--line);
}
.hero__aside{position:sticky;top:calc(var(--nav-h) + 2rem)}
.hero__stamp{
  display:flex;flex-direction:column;gap:.6rem;
  margin-bottom:1.35rem;
}

/* Arc — home journey summary */
.arc{
  display:grid;gap:1px;background:var(--line);
  border-block:1px solid var(--line);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.arc__cell{
  background:var(--paper);
  padding:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);
  display:flex;flex-direction:column;gap:.85rem;
  transition:background .42s var(--ease);
  min-height:100%;
}
.arc__cell:hover{background:var(--butter)}
.arc__n{
  font-family:var(--serif);font-size:clamp(1.6rem,1.25rem + 1.3vw,2.35rem);
  color:var(--terracotta);line-height:1;font-weight:300;
}
.arc__t{font-size:var(--t-small);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.arc__d{font-size:var(--t-micro);line-height:1.62;color:var(--stone)}

/* Contribution strips */
.strip{
  display:grid;gap:var(--gut);align-items:center;
  grid-template-columns:auto minmax(0,3fr) minmax(0,4fr);
  padding-block:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);
  border-top:1px solid var(--line);
  transition:background .4s var(--ease),padding-inline .4s var(--ease);
}
.strip:last-of-type{border-bottom:1px solid var(--line)}
.strip__n{
  font-size:var(--t-mark);letter-spacing:.2em;color:var(--terracotta);font-weight:500;
}
.strip:hover{background:rgba(184,92,69,.045)}

/* Perspectives ticker cards */
.persp{
  display:grid;gap:var(--gut);
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
}
.persp__card{
  border:1px solid var(--line);
  padding:clamp(1.5rem,1.1rem + 1.6vw,2.35rem);
  display:flex;flex-direction:column;gap:1.1rem;
  background:var(--paper);
  transition:transform .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
}
.persp__card:hover{transform:translateY(-5px);background:var(--white);border-color:var(--ink)}
.persp__q{
  font-family:var(--serif);font-size:clamp(1.15rem,1rem + .75vw,1.5rem);
  line-height:1.28;font-weight:400;
}
.persp__card:nth-child(2){background:var(--butter)}
.persp__card:nth-child(3){background:var(--celadon)}

/* Interlude */
.interlude{
  display:grid;gap:clamp(1.5rem,1rem + 2.2vw,3rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;
}

/* Journal preview */
.jprev{display:grid;gap:0}
.jprev__row{
  display:grid;gap:var(--gut);align-items:baseline;
  grid-template-columns:auto minmax(0,1fr) auto;
  padding-block:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);
  border-top:1px solid var(--line);
  transition:padding-left .42s var(--ease),background .42s var(--ease);
}
.jprev__row:last-child{border-bottom:1px solid var(--line)}
.jprev__row:hover{padding-left:.9rem;background:rgba(184,92,69,.045)}
.jprev__t{
  font-family:var(--serif);font-size:clamp(1.25rem,1.05rem + 1vw,1.85rem);
  font-weight:400;line-height:1.2;
}
.jprev__row:hover .jprev__t{color:var(--terracotta)}

/* Final statement */
.final{text-align:center;max-width:24ch;margin-inline:auto}

/* ==========================================================================
   14. PAGE — ABOUT
   ========================================================================== */
.about-open{
  display:grid;gap:clamp(2rem,1.2rem + 3.2vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;
}
.about-sec{
  display:grid;gap:clamp(1.5rem,1rem + 2.4vw,3.5rem);
  grid-template-columns:minmax(0,3fr) minmax(0,8fr);
  padding-block:clamp(2.5rem,1.6rem + 3.2vw,4.75rem);
  border-top:1px solid var(--line);
  align-items:start;
}
.about-sec__side{position:sticky;top:calc(var(--nav-h) + 2.25rem);display:flex;flex-direction:column;gap:1.4rem}
.about-sec__num{
  font-family:var(--serif);font-size:clamp(2.25rem,1.6rem + 2.4vw,3.5rem);
  line-height:.9;color:var(--terracotta);font-weight:300;
}
.about-sec h2{margin-bottom:1.6rem}
.values{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.values__row{
  background:var(--paper);padding:clamp(1.3rem,1rem + 1.2vw,2rem);
  display:grid;gap:.5rem 1.5rem;
  grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);align-items:baseline;
}
.values__row dt{font-size:var(--t-small);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.values__row dd{margin:0;font-size:var(--t-micro);line-height:1.65;color:var(--stone)}

/* ==========================================================================
   15. PAGE — JOURNEY
   ========================================================================== */
.chapnav{
  position:sticky;top:var(--nav-h);z-index:60;
  background:rgba(247,243,234,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.chapnav__scroll{
  display:flex;gap:0;overflow-x:auto;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.chapnav__scroll::-webkit-scrollbar{height:2px}
.chapnav__scroll::-webkit-scrollbar-thumb{background:var(--line)}
.chapnav__link{
  flex:0 0 auto;padding:1.05rem 1.4rem 1.05rem 0;margin-right:1.4rem;
  display:flex;align-items:baseline;gap:.6rem;white-space:nowrap;
  font-size:var(--t-mark);letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);border-bottom:2px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.chapnav__link b{color:var(--terracotta);font-weight:500}
.chapnav__link:hover,.chapnav__link.is-active{color:var(--ink);border-bottom-color:var(--terracotta)}

.chapter{
  position:relative;
  padding-block:clamp(3rem,2rem + 4vw,6.5rem);
  border-top:1px solid var(--line);
}
.chapter__grid{
  display:grid;gap:clamp(1.75rem,1.1rem + 2.8vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  align-items:center;
}
.chapter--flip .chapter__grid{direction:rtl}
.chapter--flip .chapter__grid > *{direction:ltr}
.chapter__ghost{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(4.5rem,2rem + 11vw,13rem);
  line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(23,35,41,.20);
  pointer-events:none;user-select:none;margin-bottom:-.1em;
}
.chapter__label{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-bottom:1.15rem;
}
.chapter__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.85rem,1.35rem + 2.3vw,3.4rem);
  line-height:1.06;letter-spacing:-.018em;margin-bottom:1.35rem;
}
.chapter__title em{font-style:italic;color:var(--terracotta)}
.chapter--dark{background:var(--ink);color:var(--paper);border-top-color:transparent}
.chapter--dark p{color:rgba(247,243,234,.76)}
.chapter--dark .chapter__ghost{-webkit-text-stroke-color:rgba(247,243,234,.24)}
.chapter--dark .chapter__title em{color:var(--rose)}
.chapter--plum{background:var(--plum);color:var(--paper);border-top-color:transparent}
.chapter--plum p{color:rgba(247,243,234,.76)}
.chapter--plum .chapter__ghost{-webkit-text-stroke-color:rgba(247,243,234,.24)}
.chapter--plum .chapter__title em{color:var(--rose)}
.chapter__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;
  margin-top:1.75rem;padding-top:1.15rem;border-top:1px solid var(--line);
}
.chapter--dark .chapter__meta,.chapter--plum .chapter__meta{border-top-color:var(--line-dark)}
.chapter__meta div{display:flex;flex-direction:column;gap:.28rem}
.chapter__meta dt{font-size:var(--t-mark);letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.chapter--dark .chapter__meta dt,.chapter--plum .chapter__meta dt{color:rgba(247,243,234,.64)}
.chapter__meta dd{margin:0;font-size:var(--t-micro);font-weight:400}

/* ==========================================================================
   16. PAGE — WORK
   ========================================================================== */
.feature{
  display:grid;gap:clamp(1.75rem,1.1rem + 2.8vw,4rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;
}
.modules{
  display:grid;gap:var(--gut);
  grid-template-columns:repeat(12,minmax(0,1fr));
}
.mod{
  border:1px solid var(--line);
  padding:clamp(1.5rem,1.05rem + 1.9vw,2.75rem);
  display:flex;flex-direction:column;gap:1.15rem;
  background:var(--paper);
  transition:border-color .42s var(--ease),background .42s var(--ease),transform .42s var(--ease);
}
.mod:hover{border-color:var(--ink);transform:translateY(-4px)}
.mod--w4{grid-column:span 4}
.mod--w5{grid-column:span 5}
.mod--w6{grid-column:span 6}
.mod--w7{grid-column:span 7}
.mod--w8{grid-column:span 8}
.mod--w12{grid-column:span 12}
.mod--ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mod--ink p{color:rgba(247,243,234,.76)}
.mod--ink:hover{border-color:var(--rose)}
.mod--celadon{background:var(--celadon)}
.mod--celadon p{color:rgba(23,35,41,.8)}
.mod--butter{background:var(--butter)}
.mod--butter p{color:rgba(23,35,41,.8)}
.mod--rose{background:var(--rose)}
.mod--rose p{color:rgba(23,35,41,.82)}
.mod--split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:center;
}
.mod__stat{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.5rem,1.6rem + 4vw,5.5rem);
  line-height:.9;letter-spacing:-.03em;color:var(--terracotta);
}
.mod--ink .mod__stat{color:var(--rose)}
.mod__body{display:flex;flex-direction:column;gap:1.05rem}

/* Case study steps */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(3,minmax(0,1fr))}
.steps__s{background:var(--paper);padding:clamp(1.35rem,1rem + 1.3vw,2.1rem);
  display:flex;flex-direction:column;gap:.75rem}
.steps__s .k{font-size:var(--t-mark);letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta);font-weight:500}
.steps__s .h{font-size:var(--t-small);font-weight:500}
.steps__s .p{font-size:var(--t-micro);line-height:1.62;color:var(--stone)}

/* ==========================================================================
   17. PAGE — PERSPECTIVE
   ========================================================================== */
.thesis{
  padding-block:clamp(2.75rem,1.8rem + 3.6vw,5.5rem);
  border-top:1px solid var(--line);
  display:grid;gap:clamp(1.5rem,1rem + 2.4vw,3.5rem);
  grid-template-columns:minmax(0,2.6fr) minmax(0,7fr) minmax(0,2.6fr);
  align-items:start;
}
.thesis__num{
  font-family:var(--serif);font-size:clamp(2.5rem,1.7rem + 3.2vw,4.5rem);
  line-height:.85;color:var(--terracotta);font-weight:300;
  position:sticky;top:calc(var(--nav-h) + 2.25rem);
}
.thesis__body{max-width:38rem}
.thesis__body h2{margin-bottom:1.5rem}
.thesis__body p + p{margin-top:1.35em}
.thesis__side{
  position:sticky;top:calc(var(--nav-h) + 2.25rem);
  display:flex;flex-direction:column;gap:1.5rem;
}
.hilite{
  background:linear-gradient(to bottom,transparent 58%,var(--butter) 58%);
  padding-inline:.1em;
}
.breathe{
  padding-block:clamp(4rem,2.5rem + 6vw,9rem);
  text-align:center;
}
.breathe blockquote{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.75rem,1.05rem + 3.4vw,4.25rem);
  line-height:1.1;letter-spacing:-.02em;max-width:18ch;margin-inline:auto;
  text-wrap:balance;
}
.breathe blockquote em{font-style:italic;color:var(--terracotta)}
.breathe cite{
  display:block;margin-top:2rem;font-style:normal;
  font-size:var(--t-mark);letter-spacing:.22em;text-transform:uppercase;color:var(--stone);
}

/* ==========================================================================
   18. PAGE — JOURNAL
   ========================================================================== */
.entry{
  border-top:1px solid var(--line);
  padding-block:clamp(2.25rem,1.5rem + 2.8vw,4.25rem);
}
.entry__head{
  display:grid;gap:clamp(1.25rem,.9rem + 1.6vw,2.5rem);
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
}
.entry__n{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.25rem,1.5rem + 3vw,4.25rem);
  line-height:.85;color:var(--terracotta);
}
.entry__meta{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;align-items:center;margin-bottom:1.15rem}
.entry__t{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.6rem,1.2rem + 2vw,3rem);
  line-height:1.08;letter-spacing:-.018em;margin-bottom:1.1rem;
}
.entry__t em{font-style:italic;color:var(--terracotta)}
.entry__body{
  display:grid;gap:clamp(1.5rem,1rem + 2.4vw,3.25rem);
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:start;margin-top:1.75rem;
}
.entry--reverse .entry__body{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.entry--reverse .entry__body > .entry__media{order:-1}
.entry__foot{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
  justify-content:space-between;margin-top:1.75rem;
  padding-top:1.15rem;border-top:1px solid var(--line-soft);
}

/* ==========================================================================
   19. PAGE — CONTACT
   ========================================================================== */
.contact-open{
  display:grid;gap:clamp(2rem,1.2rem + 3.2vw,4.5rem);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:start;
}
.contact-card{
  border:1px solid var(--line);background:var(--white);
  padding:clamp(1.6rem,1.1rem + 2.2vw,2.85rem);
}
.contact-card + .contact-card{margin-top:var(--gut)}
.contact-card dl{margin:0}
.contact-card dt{
  font-size:var(--t-mark);letter-spacing:.22em;text-transform:uppercase;
  color:var(--terracotta);margin-bottom:.5rem;font-weight:500;
}
.contact-card dd{margin:0 0 1.5rem}
.contact-card dd:last-child{margin-bottom:0}
.contact-card dd a,.contact-card dd span{
  font-size:clamp(1rem,.94rem + .4vw,1.2rem);font-weight:300;
  border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease),color .3s var(--ease);
  display:inline-block;padding-bottom:.15rem;word-break:break-word;
}
.contact-card dd a:hover{color:var(--terracotta);border-bottom-color:var(--terracotta)}

/* Form */
.form{margin-top:clamp(1.75rem,1.2rem + 2vw,3rem)}
.form__grid{
  display:grid;gap:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.form__row--full{grid-column:1 / -1}
.form__f{display:flex;flex-direction:column}
.form__f label{
  font-size:var(--t-mark);letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);margin-bottom:.7rem;font-weight:500;
}
.form__f label .req{color:var(--terracotta);margin-left:.25em}
.form__f input,.form__f textarea,.form__f select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.85rem 0;font-size:var(--t-body);font-weight:300;
  color:var(--ink);font-family:var(--sans);
  transition:border-color .3s var(--ease);border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.form__f select{
  background-image:linear-gradient(45deg,transparent 50%,var(--stone) 50%),linear-gradient(135deg,var(--stone) 50%,transparent 50%);
  background-position:calc(100% - 12px) center,calc(100% - 7px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:2rem;cursor:pointer;
}
.form__f textarea{resize:vertical;min-height:150px;line-height:1.7}
.form__f input::placeholder,.form__f textarea::placeholder{color:rgba(119,116,109,.5)}
.form__f input:focus,.form__f textarea:focus,.form__f select:focus{
  outline:none;border-bottom-color:var(--terracotta);
}
.form__f .hint{font-size:var(--t-mark);color:var(--stone);margin-top:.6rem;letter-spacing:.04em}
.form__f .err{
  font-size:var(--t-mark);color:var(--terracotta);margin-top:.6rem;
  letter-spacing:.05em;display:none;align-items:center;gap:.45rem;
}
.form__f .err::before{content:"";width:5px;height:5px;background:var(--terracotta);flex:0 0 auto}
.form__f.is-invalid input,.form__f.is-invalid textarea,.form__f.is-invalid select{border-bottom-color:var(--terracotta)}
.form__f.is-invalid .err{display:flex}
.form__actions{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:1.25rem 2rem;
  align-items:center;justify-content:space-between;
  padding-top:.75rem;
}
.form__status{
  font-size:var(--t-micro);color:var(--stone);line-height:1.6;max-width:34rem;
  display:flex;align-items:flex-start;gap:.6rem;
}
.form__status::before{
  content:"";width:6px;height:6px;background:var(--stone);
  flex:0 0 auto;margin-top:.5rem;
}
.form__status.is-error{color:var(--terracotta)}
.form__status.is-error::before{background:var(--terracotta)}
.form__status.is-ok{color:var(--ink)}
.form__status.is-ok::before{background:var(--celadon)}

/* ==========================================================================
   20. SURFACE-AWARE MUTED TEXT
   --stone drives every small/secondary text component. Redefining it per
   surface keeps all metadata, captions and labels above AA contrast without
   having to restate a colour on each component.
   ========================================================================== */
.tone-ink, .tone-plum, .mod--ink, .chapter--dark, .chapter--plum,
.site-footer, .navpanel, .plate--onink{
  --stone: rgba(247,243,234,.68);
  --line-soft: rgba(247,243,234,.14);
}
.tone-celadon, .tone-butter, .tone-deep,
.mod--celadon, .mod--butter, .mod--rose,
.contact-card--celadon, .arc__cell:hover{
  --stone: #46423C;
}
.contact-card--celadon{background:var(--celadon);border-color:rgba(23,35,41,.18)}
.contact-card--ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.contact-card--ink p{color:rgba(247,243,234,.78)}