/* ============================================================
   SECRET CLUBHOUSE COMPANY
   Noir / newsprint. Everything inline — no network requests,
   no webfonts, no build step.
   ============================================================ */

:root{
  /* ---- Ink & paper ---- */
  --paper:        #E9E1CE;
  --paper-deep:   #DCD1B8;
  --paper-shadow: #C9BC9E;
  --ink:          #17140F;
  --ink-soft:     #4A4239;
  --ink-faint:    #837868;

  /* ---- Night ---- */
  --night:        #12151A;

  /* ---- Accents ---- */
  --stamp:        #A9301F;   /* rubber-stamp oxblood */
  --manila:       #D9C08E;   /* file folder */
  --manila-deep:  #C4A96F;
  --teal:         #28565C;   /* cold link */
  --glow:         #F0B542;   /* the window */

  /* ---- Type ---- */
  --display: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Times New Roman", serif;
  --body:    "Iowan Old Style", "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --type:    "American Typewriter", "Courier New", Courier, monospace;

  --measure: 1180px;

  /* Mark defaults live here, not on .tree — a declaration on the element
     itself would outrank the per-context values set by .brand/.hero__art. */
  --tree-ink:   #17140F;
  --house-wall: #E9E1CE;
  --window:     #F0B542;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw + 13px,18.5px);
  line-height:1.62;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Global grain ---------- */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9999;
  opacity:.4; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Utility ---------- */
.wrap{ width:min(100% - 2.6rem, var(--measure)); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.2rem; font-family:var(--type); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.skip:focus{ left:.6rem; top:.6rem; }
:focus-visible{ outline:2.5px solid var(--stamp); outline-offset:3px; }

.tw{ font-family:var(--type); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; }

/* Printer's registration mark */
.crosshair{ position:absolute; width:26px; height:26px; opacity:.4; pointer-events:none; }
.crosshair::before,.crosshair::after{ content:""; position:absolute; background:var(--ink-faint); }
.crosshair::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.crosshair::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.crosshair span{ position:absolute; inset:6px; border:1px solid var(--ink-faint); border-radius:50%; }

/* ============================================================
   THE MARK — bare tree, clubhouse on a low limb, ladder up
   Inlined rather than <use>d: symbol content lives in a shadow
   tree, which CSS selectors and animations can't reach.
   ============================================================ */
/* The tree carries its own fills and strokes as presentation attributes —
   it has to, because the nav and footer <use> it and author CSS can't reach
   into a use-clone's shadow tree. So there are no style rules for its parts
   here; colour it by setting --tree-ink / --house-wall / --window / --bulk on
   an ancestor. Only the classes the page animates are styled below. */
/* The tree lives in the sprite chunk as a <symbol>; instances are just
   <svg class="tree"><use href="#scc-tree"/></svg>. Its internals are
   in a shadow tree that these selectors cannot reach — drive it with the
   custom properties below. aspect-ratio is set by the sprite itself. */
.tree{ display:block; --flicker:running; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  position:relative; z-index:60;
  background:var(--night); color:var(--paper);
  border-bottom:1px solid rgba(233,225,206,.16);
}
.masthead__strip{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.5rem 0; flex-wrap:wrap;
  font-family:var(--type); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(233,225,206,.55);
}
.masthead__strip b{ color:var(--glow); font-weight:400; }

.nav{
  position:sticky; top:0; z-index:70;
  background:var(--night);
  border-bottom:1px solid rgba(233,225,206,.16);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9);
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.7rem 0; }
/* --bulk carries the twigs at this size; see tools/README.md */
.brand{
  display:flex; align-items:center; gap:.8rem;
  text-decoration:none; color:var(--paper);
  --tree-ink:#E9E1CE; --house-wall:#12151A; --bulk:8;
}
.brand .tree{ width:52px; height:auto; flex:none; }
.brand__name{
  font-family:var(--display); font-size:1.06rem; line-height:1.05;
  letter-spacing:.02em; text-transform:uppercase;
}
.brand__name small{
  display:block; font-family:var(--type); font-size:.52rem;
  letter-spacing:.34em; color:rgba(233,225,206,.5); margin-top:.22em;
}
.nav__links{ display:flex; align-items:center; gap:1.9rem; }
.nav__links a{
  color:rgba(233,225,206,.78); text-decoration:none;
  font-family:var(--type); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.35rem 0; position:relative;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--glow); transition:right .35s cubic-bezier(.2,.7,.3,1);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ right:0; }
@media (max-width:640px){
  .nav__links{ gap:1.1rem; }
  .nav__links a{ font-size:.58rem; letter-spacing:.14em; }
  .brand__name small{ display:none; }
}

/* ============================================================
   HERO — night
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--night); color:var(--paper);
  padding:clamp(3.5rem,9vh,7rem) 0 0;
  isolation:isolate;
}
/* moon-haze behind the tree */
.hero::before{
  content:""; position:absolute; z-index:0;
  width:min(120vw,1050px); aspect-ratio:1;
  right:-12%; top:-26%;
  background:radial-gradient(circle at 50% 50%,
    rgba(122,144,160,.26) 0%, rgba(72,90,105,.13) 34%, rgba(18,21,26,0) 68%);
}
/* venetian blind shafts — held to the left so they don't grid with the rain */
.hero::after{
  content:""; position:absolute; inset:-40% -30%; z-index:1;
  background:repeating-linear-gradient(180deg,
    rgba(240,232,214,.08) 0 11px, rgba(240,232,214,0) 11px 46px);
  transform:rotate(-13deg);
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 60%);
  mask-image:linear-gradient(100deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 60%);
  pointer-events:none;
}
/* rain — kept to the right half */
.hero__rain{
  position:absolute; inset:-60% -20%; z-index:2; pointer-events:none;
  opacity:.5;
  background:repeating-linear-gradient(78deg,
    rgba(233,225,206,0) 0 46px,
    rgba(233,225,206,.5) 46px 46.8px,
    rgba(233,225,206,0) 47px 92px);
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.9) 100%);
  mask-image:linear-gradient(100deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.9) 100%);
  animation:rain 1.05s linear infinite;
}
@keyframes rain{ to{ transform:translate3d(-38px,178px,0); } }

.hero__in{
  position:relative; z-index:5;
  display:grid; grid-template-columns:repeat(12,1fr); align-items:end;
}
/* Copy and art share grid-row 1 and overlap on purpose. The art comes later in
   the DOM, so without these it paints over the headline and branches slice
   through the letterforms. Text wins, always. */
.hero__copy{ grid-column:1 / 9; grid-row:1; z-index:2; padding-bottom:clamp(3rem,7vh,5.5rem); }
/* Sized against the tree's viewBox, not a round number — the generated tree is
   wider than it is tall and a chunk of that width is limb reaching left, so a
   box that fits a squarer drawing leaves the trunk and crown looking small.
   The vw term keeps it off the headline at middling widths. */
.hero__art{
  grid-column:6 / 13; grid-row:1; justify-self:end; z-index:1;
  width:min(100%, clamp(360px, 46vw, 660px)); margin-bottom:-12px;
  --tree-ink:#05070A; --house-wall:#2A323C; --lamp:block;
}
.hero__art .tree{ width:100%; height:auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--type); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--glow); margin:0 0 1.6rem;
}
.eyebrow::before{ content:""; width:38px; height:1px; background:var(--glow); opacity:.7; }

.hero h1{
  font-family:var(--display); font-weight:400;
  /* Held small enough that each half of the <br> stays on ONE line. The longer
     half, "nobody's paying for.", measures 8.72x the font size, and the copy
     column is 8/12 of the wrap — go bigger and it wraps to three lines, which
     puts "paying" at the start of a line where Didot's italic 'p' descender
     (it hangs left of its origin) runs into the page gutter and gets cut. */
  font-size:clamp(2.6rem,6.6vw,86px);
  line-height:.94; letter-spacing:-.018em; margin:0 0 1.5rem;
  text-wrap:balance; overflow-wrap:break-word;
}
/* the hard break is a composition choice, not a rule — let it go on phones */
@media (max-width:620px){ .hero h1 br{ display:none; } }
.hero h1 em{ font-style:italic; color:var(--glow); }
.hero__lede{
  max-width:34ch; margin:0 0 2.2rem;
  color:rgba(233,225,206,.72); font-size:1.02rem; line-height:1.66;
}
.hero__meta{
  display:flex; gap:1.6rem; flex-wrap:wrap; align-items:center;
  padding-top:1.3rem; border-top:1px solid rgba(233,225,206,.2);
  font-family:var(--type); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(233,225,206,.5);
}
.hero__meta b{ color:var(--paper); font-weight:400; }

.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--type); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; padding:.85rem 1.5rem;
  color:var(--night); background:var(--glow); border:1px solid var(--glow);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
  box-shadow:5px 5px 0 rgba(240,181,66,.22);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(240,181,66,.3); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(240,181,66,.2); }
.btn--ghost{
  background:transparent; color:var(--paper); border-color:rgba(233,225,206,.4);
  box-shadow:5px 5px 0 rgba(233,225,206,.12);
}
.btn--ghost:hover{ border-color:var(--paper); box-shadow:8px 8px 0 rgba(233,225,206,.18); }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem; }

/* torn paper edge — doubles as the ground the tree stands on */
.deckle{ position:relative; z-index:6; display:block; width:100%; height:auto; margin-top:-1px; }
.deckle path{ fill:var(--paper); }

@media (max-width:860px){
  .hero__in{ display:block; }
  .hero__copy{ padding-bottom:1rem; }
  .hero__art{ width:min(94%,430px); margin:0 auto -12px; }
}

/* ============================================================
   SECTION FURNITURE
   ============================================================ */
.section{ position:relative; padding:clamp(3.5rem,7vw,6rem) 0; }
.section--paper{ background:var(--paper); }
.section--deep{ background:var(--paper-deep); }

.sechead{
  display:flex; align-items:baseline; gap:1.2rem;
  border-bottom:3px double var(--ink);
  padding-bottom:.7rem; margin-bottom:2.6rem;
}
.sechead h2{
  font-family:var(--display); font-weight:400; margin:0;
  font-size:clamp(1.9rem,4vw,3.1rem); line-height:1; letter-spacing:-.01em;
}
.sechead .rule{ flex:1; height:1px; background:var(--ink-faint); }
.sechead .tw{ color:var(--ink-soft); white-space:nowrap; }
@media (max-width:640px){ .sechead .rule{ display:none; } .sechead{ flex-wrap:wrap; gap:.5rem; } }

/* ============================================================
   THE BLOG — newspaper columns
   ============================================================ */
.lead{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3.2rem); align-items:start;
  padding-bottom:2.4rem; border-bottom:1px solid var(--ink-faint);
}
@media (max-width:820px){ .lead{ grid-template-columns:1fr; } }

.dateline{
  font-family:var(--type); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--stamp); margin:0 0 .8rem;
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
}
.dateline i{ font-style:normal; color:var(--ink-faint); }

.lead h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.02; letter-spacing:-.015em;
  margin:0 0 1rem;
}
.lead h3 a{
  color:inherit; text-decoration:none;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-size:0 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .4s cubic-bezier(.2,.7,.3,1);
}
.lead h3 a:hover{ background-size:100% 1px; }

.lead__body{ columns:2; column-gap:1.8rem; column-rule:1px solid var(--paper-shadow); }
@media (max-width:1000px){ .lead__body{ columns:1; } }
.lead__body p{ margin:0 0 .9rem; text-align:justify; hyphens:auto; }
.lead__body p:first-of-type::first-letter{
  font-family:var(--display); float:left;
  font-size:3.55em; line-height:.78; padding:.06em .1em 0 0;
  color:var(--stamp);
}

/* halftone plate */
.plate figure{ margin:0; border:1px solid var(--ink); padding:.55rem; background:var(--paper); }
.plate .halftone{ position:relative; overflow:hidden; display:block; }
.plate .halftone svg{ display:block; width:100%; height:auto; }
.plate .halftone::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(var(--paper) 30%, transparent 33%);
  background-size:5px 5px; opacity:.32; mix-blend-mode:screen;
}
.plate figcaption{
  font-family:var(--type); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:.6rem; line-height:1.6;
  border-top:1px solid var(--paper-shadow); padding-top:.5rem;
}
.plate figcaption b{ color:var(--stamp); font-weight:400; }

.briefs{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:2.4rem; }
@media (max-width:820px){ .briefs{ grid-template-columns:1fr; } }
.brief{ padding:0 1.8rem; border-left:1px solid var(--paper-shadow); }
.brief:first-child{ padding-left:0; border-left:0; }
.brief:last-child{ padding-right:0; }
@media (max-width:820px){
  .brief{ padding:1.5rem 0; border-left:0; border-top:1px solid var(--paper-shadow); }
  .brief:first-child{ padding-top:0; border-top:0; }
}
.brief h4{
  font-family:var(--display); font-weight:400; font-size:1.42rem; line-height:1.12;
  margin:0 0 .55rem; letter-spacing:-.005em;
}
.brief h4 a{ color:inherit; text-decoration:none; }
.brief h4 a:hover{ color:var(--stamp); }
.brief p{ margin:0 0 .9rem; font-size:.94rem; color:var(--ink-soft); }

.more{
  font-family:var(--type); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;
}
.more:hover{ color:var(--stamp); }

.jump{
  margin-top:2.6rem; padding-top:1.1rem; border-top:3px double var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
}
.jump .tw{ color:var(--ink-faint); }

/* ============================================================
   PROJECTS — file cards
   ============================================================ */
.files{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.6rem,3vw,2.6rem); }
@media (max-width:760px){ .files{ grid-template-columns:1fr; } }

.file{
  position:relative; margin-top:26px;
  background:var(--manila); border:1px solid var(--ink);
  padding:1.7rem 1.7rem 1.5rem;
  box-shadow:6px 7px 0 var(--paper-shadow);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.file::before{ /* folder tab */
  content:attr(data-tab);
  position:absolute; left:-1px; top:-25px; height:26px;
  display:flex; align-items:center; padding:0 1.7rem 0 1.1rem;
  background:var(--manila-deep); border:1px solid var(--ink); border-bottom:none;
  font-family:var(--type); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,0 100%);
}
.file::after{ /* punch hole */
  content:""; position:absolute; right:1.4rem; top:1.4rem;
  width:13px; height:13px; border-radius:50%;
  background:var(--paper); box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.file:nth-child(1){ transform:rotate(-.45deg); }
.file:nth-child(2){ transform:rotate(.35deg); }
.file:nth-child(3){ transform:rotate(.3deg); }
.file:nth-child(4){ transform:rotate(-.3deg); }
.file:hover{ transform:rotate(0) translate(-3px,-4px); box-shadow:11px 13px 0 var(--paper-shadow); }

.file h3{
  font-family:var(--display); font-weight:400; font-size:1.85rem; line-height:1.05;
  margin:0 0 .2rem; letter-spacing:-.01em; padding-right:2.6rem;
}
.file h3 a{ color:inherit; text-decoration:none; }
.file h3 a::after{ content:""; position:absolute; inset:0; }
.file .no{
  font-family:var(--type); font-size:.56rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); display:block; margin-bottom:.9rem;
}
.file p{ margin:0 0 1.2rem; font-size:.95rem; color:#3B342A; }

.tags{ display:flex; gap:.4rem; flex-wrap:wrap; }
.tags span{
  font-family:var(--type); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--ink-soft); color:var(--ink-soft);
  padding:.24rem .5rem; opacity:.85;
}

.status{
  position:absolute; right:1.1rem; bottom:1.1rem;
  font-family:var(--type); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--stamp); border:2px solid var(--stamp); padding:.3rem .6rem;
  box-shadow:0 0 0 2px var(--manila), 0 0 0 3px var(--stamp);
  transform:rotate(-7deg); opacity:.82; white-space:nowrap;
}
.status--cold{
  color:var(--ink-faint); border-color:var(--ink-faint);
  box-shadow:0 0 0 2px var(--manila),0 0 0 3px var(--ink-faint); opacity:.6;
}
@media (max-width:460px){
  .status{ position:static; display:inline-block; transform:rotate(-2deg); margin-top:1rem; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative; overflow:hidden;
  background:var(--night); color:var(--paper);
  padding:clamp(3rem,6vw,4.6rem) 0 2rem;
}
.foot::before{
  content:""; position:absolute; inset:-40% -30%;
  background:repeating-linear-gradient(180deg,rgba(240,232,214,.05) 0 11px,transparent 11px 46px);
  transform:rotate(-13deg);
  -webkit-mask-image:linear-gradient(255deg,rgba(0,0,0,.8),rgba(0,0,0,0) 62%);
  mask-image:linear-gradient(255deg,rgba(0,0,0,.8),rgba(0,0,0,0) 62%);
}
.foot__in{
  position:relative; display:flex; gap:2.6rem;
  align-items:center; flex-wrap:wrap; justify-content:space-between;
}

/* --bulk thickens the generated twigs so they survive at this size */
.seal{
  width:172px; height:172px; flex:none; position:relative;
  --tree-ink:#E9E1CE; --house-wall:#12151A; --bulk:2.5;
}
.seal > svg:not(.tree){ width:100%; height:100%; display:block; }
.seal__ring{ animation:turn 100s linear infinite; transform-origin:100px 100px; }
@keyframes turn{ to{ transform:rotate(360deg); } }
.seal text{
  font-family:var(--type); font-size:9px; letter-spacing:2.4px;
  fill:rgba(233,225,206,.75); text-transform:uppercase;
}
.seal .ring{ fill:none; stroke:rgba(233,225,206,.4); }
.seal .tree{ width:58%; height:auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); }

.foot__cols{ display:flex; gap:clamp(2rem,5vw,4.5rem); flex-wrap:wrap; }
.foot__cols h5{
  font-family:var(--type); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--glow); margin:0 0 .9rem; font-weight:400;
}
.foot__cols ul{ list-style:none; margin:0; padding:0; }
.foot__cols li{ margin-bottom:.45rem; }
.foot__cols a{ color:rgba(233,225,206,.72); text-decoration:none; font-size:.92rem; }
.foot__cols a:hover{ color:var(--glow); }

.colophon{
  position:relative; margin-top:2.8rem; padding-top:1.1rem;
  border-top:1px solid rgba(233,225,206,.18);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--type); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(233,225,206,.4);
}

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .rise{ opacity:0; transform:translateY(18px); animation:rise .9s cubic-bezier(.2,.7,.3,1) forwards; }
  .d1{ animation-delay:.10s; } .d2{ animation-delay:.20s; } .d3{ animation-delay:.30s; }
  .d4{ animation-delay:.40s; } .d5{ animation-delay:.50s; } .d6{ animation-delay:.62s; }
  @keyframes rise{ to{ opacity:1; transform:none; } }

}
@media (prefers-reduced-motion:reduce){
  .tree{ --flicker:paused; }   /* reaches into the shadow tree; a selector would not */
  .hero__rain{ animation:none; }
  .seal__ring{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   INNER PAGES — Post and Project
   ============================================================ */

/* A compact night band standing in for the hero: same identity, same torn
   edge down into the newsprint, no tree. */
.pagehead{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--night); color:var(--paper);
  padding:clamp(2.5rem,7vh,4.5rem) 0 0;
}
.pagehead::after{                       /* the hero's blind shafts, softer */
  content:""; position:absolute; inset:-40% -30%; z-index:1;
  background:repeating-linear-gradient(180deg,
    rgba(240,232,214,.06) 0 11px, rgba(240,232,214,0) 11px 46px);
  transform:rotate(-13deg);
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 65%);
  mask-image:linear-gradient(100deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 65%);
  pointer-events:none;
}
.pagehead__in{ position:relative; z-index:2; padding-bottom:clamp(2.2rem,6vh,3.5rem); }
.pagehead .eyebrow{ margin-bottom:1.1rem; }
.pagehead .eyebrow a{ color:inherit; text-decoration:none; }
.pagehead .eyebrow a:hover{ color:var(--paper); }
.pagehead h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3.9rem);
  line-height:1.02; letter-spacing:-.015em; margin:0; max-width:22ch;
  text-wrap:balance;
}
.pagehead__meta{
  display:flex; gap:.7rem; align-items:center; flex-wrap:wrap;
  margin:1.1rem 0 0;
  font-family:var(--type); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(233,225,206,.55);
}
.pagehead__meta i{ font-style:normal; color:rgba(233,225,206,.3); }
/* the stamp sits on night here, so its knock-out ring has to match */
.pagehead .status{
  position:static; display:inline-block; margin-top:1.4rem;
  box-shadow:0 0 0 2px var(--night), 0 0 0 3px currentColor;
}
/* the paper-context 'cold' grey is near-invisible on the night band, so the
   variant needs its own colour here — hits Cold project pages and the 404 */
.pagehead .status--cold{
  color:rgba(233,225,206,.55); border-color:rgba(233,225,206,.55); opacity:.9;
  box-shadow:0 0 0 2px var(--night), 0 0 0 3px rgba(233,225,206,.55);
}

/* ---------- article body ---------- */
/* Single column on purpose: the two-column justified setting works for the
   homepage teaser but is punishing to read at full article length. */
.prose{ max-width:66ch; font-size:1.06rem; }
.prose > :first-child{ margin-top:0; }
.prose p{ margin:0 0 1.15rem; }
.prose p:first-of-type::first-letter{
  font-family:var(--display); float:left;
  font-size:3.4em; line-height:.78; padding:.06em .1em 0 0;
  color:var(--stamp);
}
.prose h2, .prose h3{
  font-family:var(--display); font-weight:400; letter-spacing:-.01em;
  line-height:1.1; margin:2.2rem 0 .8rem;
}
.prose h2{ font-size:1.9rem; }
.prose h3{ font-size:1.4rem; }
.prose a{ color:var(--teal); text-decoration:none; border-bottom:1px solid currentColor; }
.prose a:hover{ color:var(--stamp); }
.prose ul, .prose ol{ margin:0 0 1.15rem; padding-left:1.3rem; }
.prose li{ margin-bottom:.4rem; }
.prose blockquote{
  margin:1.6rem 0; padding:.2rem 0 .2rem 1.4rem;
  border-left:3px double var(--ink-faint);
  font-style:italic; color:var(--ink-soft);
}
.prose code{
  font-family:var(--type); font-size:.86em;
  background:var(--paper-deep); padding:.12em .35em; border:1px solid var(--paper-shadow);
}
.prose pre{
  font-family:var(--type); font-size:.82rem; line-height:1.55;
  background:var(--ink); color:var(--paper);
  padding:1rem 1.2rem; overflow-x:auto; margin:0 0 1.3rem;
}
.prose pre code{ background:none; border:0; padding:0; color:inherit; }
.prose hr{ border:0; border-top:3px double var(--ink); margin:2.2rem 0; }
.prose img{ max-width:100%; height:auto; border:1px solid var(--ink); }
.prose figcaption{
  font-family:var(--type); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:.5rem;
}

/* the project detail reuses the file-card stamps above its body copy */
.section--paper > .wrap > .tags{ margin-bottom:2rem; }