/* =========================================================================
   THE 66TH, CONCEPT 3. ONE SHARED STYLESHEET.

   Every page composes from this file. A page may not carry its own <style>
   block, redefine a colour, or use a size off the scale. Nav and footer
   markup is byte-identical on every page, so changing a nav link here
   changes it everywhere.

   KNOWN GAP (2026-08-23): the homepage, "Concept 3 v2 - Monolith + Verum
   .dc.html", is a design-tool export with every rule written inline, so it
   does NOT read this file yet. Until that page is rebuilt by hand, the nav
   and footer exist in two places and can drift. Token values below were
   lifted from that export so the two agree today.
   ========================================================================= */

/* --- TOKENS -------------------------------------------------------------- */

/* --- BASE ---------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
body{
  background:var(--bg-a);color:var(--ink);
  font-family:var(--font);-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
/* the nav is fixed, so the first block has to clear it: 68px bar + 14px
   band top and bottom. */
body{padding-top:var(--nav-clear)}

/* --- NAV -----------------------------------------------------------------
   Moved to assets/nav.css 2026-08-25, so the homepage (which cannot read
   this file) and every page that can both draw the same bar from the same
   rules. Pages load nav.css alongside this one. Do not re-add nav rules here.
   -------------------------------------------------------------------------- */

/* --- PRIMITIVES ---------------------------------------------------------- */

/* No section labels above headings: see DESIGN.md section 3 (Liam, 2026-09-01). */

/* micro label, e.g. a category */
.kind{
  font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--quiet);
}

/* display date */
.big-d{font-size:var(--t-4);font-weight:700;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}

/* media plate. .photo centres; without it the image anchors top, which is
   how the per-post diagrams get their baked-in title cropped away. */
/* min-width:0 matters: a grid track sized 1fr keeps min-width auto, so an
   image's intrinsic width can force the column open. Safari does exactly
   that and the page drags sideways on a phone. Pair this with minmax(0,1fr)
   on every track that holds a plate. */
.plate{overflow:hidden;min-width:0;background:var(--bg-b);border:1px solid var(--line);border-radius:var(--r);aspect-ratio:12/5}
.plate img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .8s var(--ease)}
.plate.photo img{object-position:center center}
.plate:hover img{transform:scale(1.02)}

/* text link with a travelling arrow */
.go{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:var(--s-1);
  transition:border-color .25s,gap .3s var(--ease);
}

/* --- FOOTER --------------------------------------------------------------
   The column block and the bottom bar are injected from partials/ by
   deploy.sh, so their links are identical on every page. The homepage adds
   one extra element between them, the .mark-band with the material blob,
   which stays homepage-only: it is that page's closing moment and it needs
   support.js plus five preloaded materials.
   -------------------------------------------------------------------------- */
.site-foot{border-top:1px solid var(--line);background:var(--bg-b);margin-top:var(--s-7)}

/* The footer component itself is in assets/footer.css. This page caps it at
   --shell and centres it; the homepage runs it full bleed. See the note at the
   top of footer.css: the difference is real and unsettled, and both overrides
   delete once it is settled. */
.site-foot .foot-cols{max-width:var(--shell);margin:0 auto}
.site-foot .foot-bar{max-width:var(--shell);margin:0 auto;padding:22px clamp(12px,1.6vw,24px) 30px}

/* =========================================================================
   PAGE: NOTES INDEX
   ========================================================================= */
.mast{padding:clamp(22px,3.4vw,50px) 0 clamp(24px,3.4vw,44px)}
.mast h1{margin-top:clamp(18px,2.6vw,34px);font-family:var(--font-display);font-size:var(--t-display);font-weight:400;letter-spacing:-.005em;line-height:.94;text-transform:uppercase}

.lead{display:block;padding-bottom:var(--s-7);border-bottom:1px solid var(--line)}
.lead-cap{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(20px,4vw,64px);padding-top:var(--s-4);flex-wrap:wrap}
.lead-cap h2{font-family:var(--font-display);font-size:var(--t-4);font-weight:400;letter-spacing:-.018em;line-height:1.14;max-width:24ch;transition:color .2s}
.lead:hover .lead-cap h2{color:var(--ink-hi)}
.lead-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}

.row{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:clamp(26px,5vw,84px);align-items:center;border-bottom:1px solid var(--line);padding:var(--s-5) 0}
.row-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.row h3{font-size:var(--t-5);font-weight:600;letter-spacing:-.025em;line-height:1.2;margin-bottom:14px;max-width:30ch;transition:color .2s}
.row:hover h3{color:var(--ink-hi)}
.row p{font-size:var(--t-7);line-height:1.7;color:var(--quiet);max-width:50ch;margin-bottom:var(--s-4)}
.row:hover .go{border-color:var(--ink);gap:15px}

.arch{padding-top:var(--s-7)}
/* The word FITS the container, edge to edge. Nothing hangs outside it.
   It shipped twice the wrong way: first chopped by the shell with page still
   visible past the cut, then bleeding to the screen edge, which is still text
   outside the container. Liam, 2026-08-26: "the text going out of the
   conatinare seriosuly uncappeabtle".
   assets/fit-text.js measures the text and sets the size so it spans exactly
   the content box at any width. A clamp() cannot do this: the right size
   depends on container width, word, font metrics and letter-spacing together,
   so a hardcoded vw figure is right at one width and wrong everywhere else.
   Never clip display type. Fit it. */
.giant{margin:clamp(16px,2.4vw,30px) 0 clamp(26px,3.4vw,44px)}
.giant span{display:block;font-size:96px;font-weight:700;letter-spacing:-.05em;line-height:.92;white-space:nowrap;text-transform:uppercase}

.ar-head,.ar{display:grid;grid-template-columns:112px minmax(0,1fr) 116px;gap:clamp(16px,2.4vw,34px);align-items:baseline}
.ar-head{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--quiet);padding-bottom:14px;border-bottom:1px solid var(--line)}
.ar{padding:19px 0;border-bottom:1px solid var(--line);transition:background .2s}
.ar:hover{background:var(--wash-row)}
.ar-d{font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.1em;color:var(--quiet);white-space:nowrap;font-variant-numeric:tabular-nums}
.ar-d em{font-style:normal;opacity:.55}
.ar-t{font-size:var(--t-7);font-weight:500;letter-spacing:-.01em;line-height:1.4;transition:color .2s}
.ar:hover .ar-t{color:var(--ink-hi)}
.ar-c{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet);text-align:right}

/* --- MOBILE COLLAPSE ----------------------------------------------------- */
@media(max-width:820px){
  .row{grid-template-columns:minmax(0,1fr)}
  .row .plate{order:-1}
  .ar-head,.ar{grid-template-columns:92px minmax(0,1fr)}
  .ar-c{display:none}
}
/* nav mobile rules live in assets/nav.css */

/* --- THE WORK WALL ------------------------------------------------------- */
/* A full-bleed scene: the sites we built, hung in depth, moved by the pointer.
   Captured from Squarespace's "Made with Squarespace" section on 2026-09-01 and
   rebuilt on these tokens. What we took is the MECHANISM, never the screen:
   panels angled toward the centre so the field reads as a corridor, a damped
   glide that keeps moving for about a second after the pointer stops, and the
   live domain as the only label. What is ours: the cream-on-near-black ground,
   the 2px radius, and the monochrome rule. Colour is the hover reward, which is
   how this section keeps the no-resting-colour rule while still showing the work
   in the colours the clients actually shipped. */
/* The work wall's styles live in wall.css, one home read by the wall pages
   and the homepage alike. */

/* --- WHAT IT DOES FOR YOU: lives in assets/benefits.css (its own
   component file, like the wall), loaded by benefits.html alongside this. */

/* =========================================================================
   PAGE: NOTE (one note, read end to end)

   Layouts .note-head, .note-body and .note-foot, plus the prose table, the
   figure and the byline. All of it is declared in docs/DESIGN.md sections 4
   and 5 before it was written here.

   The reading structure is taken from our own live note page, measured
   2026-09-03: a sticky contents rail on the left, a meta row, a sans H1, a
   standfirst, a hairline, then the byline. The language is this site's: serif
   H2s, the 2px plate, mono labels, and the two grounds.

   Why the H1 is sans and the H2s are serif, which inverts the homepage: a long
   title set in Instrument Serif at reading distance loses its contrast against
   the standfirst directly under it, and the serif then has no job left on the
   page. Sans title, serif section headings, one voice each.
   ========================================================================= */
.note{--rail:210px;--railgap:var(--s-5);--col:720px;display:block}

/* --- the head ----------------------------------------------------------- */
.note-head{padding:var(--s-6) 0 var(--s-5);padding-left:calc(var(--rail) + var(--railgap))}
.note-back{display:inline-block;font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);margin-bottom:var(--s-5);transition:color .2s}
.note-back:hover{color:var(--ink)}
.note-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3);font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);margin-bottom:var(--s-4)}
.note-meta i{display:block;width:1px;height:11px;background:var(--line);font-style:normal}
.note-meta b{font-weight:500;color:var(--ink)}
.note-head h1{font-size:var(--t-3);font-weight:400;letter-spacing:-.035em;line-height:1.06;max-width:880px;margin-bottom:var(--s-4)}
.note-lede{font-size:var(--t-5);line-height:1.5;letter-spacing:-.012em;color:var(--quiet);max-width:820px;margin-bottom:var(--s-5)}
.note-by{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s-3);max-width:880px}
.note-by b{font-size:var(--t-7);font-weight:500;letter-spacing:-.01em}
.note-by span{font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet)}

/* --- the body ------------------------------------------------------------
   Three tracks: the rail, the reading column, and the room a figure or a table
   breaks out into. The prose never uses that third track, because a --t-6 line
   across the full shell runs past a comfortable measure. */
.note-body{display:grid;grid-template-columns:var(--rail) minmax(0,var(--col)) minmax(0,1fr);column-gap:var(--railgap);padding-bottom:var(--s-7)}
.note-body>*{grid-column:2}
.note-body>figure,.note-body>.note-table{grid-column:2/4}
.note-body p{font-size:var(--t-6);line-height:1.65;color:var(--ink-2);margin:0 0 var(--s-4)}
.note-body h2{font-family:var(--font-display);font-size:var(--t-4);font-weight:400;letter-spacing:-.018em;line-height:1.12;margin:var(--s-6) 0 var(--s-4);scroll-margin-top:var(--nav-clear)}
.note-body h2:first-of-type{margin-top:var(--s-5)}
/* Body links differ from body text on colour, weight and underline, never on
   colour alone: an underline is the only one of the three a reader can see at a
   glance on a near-black ground. */
.note-body p a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--quiet);transition:text-decoration-color .2s}
.note-body p a:hover{text-decoration-color:var(--ink)}
.note-fine{font-size:var(--t-7);line-height:1.7;color:var(--quiet);border-top:1px solid var(--line);padding-top:var(--s-4);margin-top:var(--s-5)}

/* --- the contents rail --------------------------------------------------- */
.note-rail{grid-column:1;grid-row:1/-1;position:sticky;top:var(--nav-clear);align-self:start;padding-top:var(--s-5)}
.note-rail p{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--quiet);margin:0 0 var(--s-3)}
.note-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.note-rail a{display:block;font-size:var(--t-7);line-height:1.35;color:var(--quiet);padding:var(--s-1) var(--s-2);margin-left:calc(var(--s-2) * -1);border-radius:var(--r);transition:color .2s,background .2s}
.note-rail a:hover{color:var(--ink)}
.note-rail a[aria-current="true"]{color:var(--ink);background:var(--wash-row)}

/* --- the figure ----------------------------------------------------------
   The plate is the site's image component. The caption sits BELOW it, outside
   the picture, never as a label laid over it. */
.note-body figure{margin:var(--s-5) 0}
.note-body figcaption{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);padding-top:var(--s-3)}

/* --- the prose table -----------------------------------------------------
   One hairline under each row and nothing above it, the same grammar as the
   archive rows. It scrolls inside its own box under 900px rather than dragging
   the page sideways. */
.note-table{overflow-x:auto;margin:var(--s-5) 0}
.note-table table{width:100%;border-collapse:collapse;min-width:680px}
.note-table th{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet);text-align:left;vertical-align:bottom;padding:0 var(--s-4) var(--s-3) 0;border-bottom:1px solid var(--line)}
.note-table td{font-size:var(--t-7);line-height:1.55;color:var(--ink-2);vertical-align:top;padding:var(--s-3) var(--s-4) var(--s-3) 0;border-bottom:1px solid var(--line)}
.note-table tr>*:last-child{padding-right:0}
.note-table td:first-child{font-family:var(--font-mono);font-weight:500;color:var(--quiet);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- the foot ------------------------------------------------------------ */
.note-foot{border-top:1px solid var(--line);padding-top:var(--s-6)}
.note-foot h2{font-family:var(--font-display);font-size:var(--t-4);font-weight:400;letter-spacing:-.018em;margin:0 0 var(--s-4)}
/* The closing panel takes the homepage Book a call panel's ground, height and
   padding, because section 4 names that section as its source. It used to show
   assets/cta-scene.webp directly at half opacity. That file is the homepage's
   REFERENCE FRAME, not artwork: the homepage never displays it, it loads it
   offscreen and samples the two figures' pixels to redraw them as a particle
   field on canvas. Shown flat it carries another company's headline and their
   Schedule a demo button, and at 1232 by 340 against a 898 by 690 picture,
   object-fit cover threw away 64 percent of it and cut the figure off at the
   waist. Liam approved this replacement on 2026-09-04. The particle canvas
   stays homepage-only for now: it is 150 lines of drawing code and it would
   still need that same reference frame shipped to sample from. Debt 6.
   Liam 2026-09-04: "i want the one that i have with the silhouettes". So the
   scene came over too. assets/cta-scene.js is setupCtaScene() lifted out of the
   homepage export unchanged, so this panel draws the SAME dune and the SAME two
   sampled silhouettes rather than an approximation of them, and the height comes
   back with the art. I had shipped a version with no scene in it and it read as
   an empty box; the answer was to port the real thing, not to shrink the box. */
.note-cta{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:radial-gradient(130% 96% at 76% 6%,rgba(237,233,225,0.10) 0%,rgba(237,233,225,0.02) 44%,rgba(237,233,225,0) 68%),var(--bg-a);margin:var(--s-7) 0 var(--s-7);padding:var(--s-5);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;min-height:clamp(360px,52vh,558px)}
/* the scene, drawn by assets/cta-scene.js, exactly as the homepage draws it */
.note-cta canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
/* the grain and the floor shadow the homepage panel carries, as pseudo-elements
   because this panel's markup is generated by _scripts/reskin-blog.mjs */
.note-cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}
.note-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(18,17,16,0) 0%,rgba(18,17,16,.42) 62%,rgba(18,17,16,.66) 100%)}
.note-cta h2,.note-cta a{position:relative;z-index:2}
.note-cta h2{font-family:var(--font-display);font-size:var(--t-3);font-weight:400;letter-spacing:-.02em;line-height:1.06;max-width:24ch;margin:0}

/* --- MOBILE COLLAPSE ----------------------------------------------------- */
@media(max-width:1100px){
  .note-head{padding-left:0;max-width:var(--col)}
  .note-body{grid-template-columns:minmax(0,var(--col))}
  .note-body>*,.note-body>figure,.note-body>.note-table{grid-column:1}
  .note-rail{display:none}
}
@media(max-width:900px){
  /* The table is wider than a phone, so it scrolls inside its own box. Two
     things make that scroll legible rather than looking like a page cut off:
     the Month column stays put on the left, and the right edge fades, which is
     the only cue a reader gets that there is more table to the right. */
  .note-table th:first-child,.note-table td:first-child{position:sticky;left:0;background:var(--bg-a);padding-right:var(--s-3);box-shadow:1px 0 0 var(--line)}
  .note-table{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--s-5)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--s-5)),transparent)}
}
@media(max-width:820px){
  /* The height STAYS on a phone. It used to collapse to min-height:0, which
     squeezed the scene into 185px and put the two lit silhouettes directly
     behind the heading, so the middle of the line went unreadable (caught in a
     375px screenshot, 2026-09-04). The scene needs room above the text, which
     is exactly why the homepage panel keeps its height at every width. */
  .note-cta{padding:var(--s-5)}
  /* A narrow panel is tall for its width, so the scene draws the two figures
     across the middle, right where the heading sits. The floor shadow grows to
     meet the text instead: taller, and dark enough that the line reads over the
     brightest part of the dune. Judged against a 375px screenshot, not the DOM. */
  .note-cta::after{height:74%;background:linear-gradient(180deg,rgba(18,17,16,0) 0%,rgba(18,17,16,.55) 38%,rgba(18,17,16,.86) 72%,rgba(18,17,16,.93) 100%)}
  .note-cta h2{max-width:none}
}
@media(max-width:560px){
  /* The meta row wraps at this width and the hairline separator was stranding
     itself at the end of a line. Space does the separating instead. */
  .note-meta{gap:var(--s-2) var(--s-4)}
  .note-meta i{display:none}
}