/* ===========================================================================
   Ridge Nelson, portfolio v5. See docs/career/PORTFOLIO_DIRECTION_V5.md.
   A monograph, not a magazine: one typeface (Switzer), a neutral field,
   plain facts; each project brings its own material and colour.
   IBM Plex Mono only for literal machine text.
   =========================================================================== */

:root{
  /* the shell palette is defined once, in v3.css, not restated here */

  --sans:"Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display:var(--sans);

  --d-xl:clamp(3.9rem, 1rem + 12.2vw, 13.5rem);   /* name */
  --d-l:clamp(3.2rem, 0.8rem + 8.6vw, 9.5rem);    /* project titles */
  --lead:clamp(1.35rem, 1.05rem + 1vw, 2rem);
  --body:clamp(16px, 15.4px + 0.16vw, 17.5px);
  --small:14px;
  --sec:clamp(96px, 11vw, 200px);
}
body{ font-family:var(--sans); font-feature-settings:normal; letter-spacing:0; background:var(--paper); }
.fx5{ margin:0; font:400 var(--small)/1.45 var(--sans); color:var(--ink-2); max-width:62ch; }

/* nav: plain words, no status dot, no mark */
.nav3{ background:rgba(245, 245, 242, 0.9); }
.nav3 .mark{ font:600 15px/1 var(--sans); letter-spacing:-0.01em; }
.nav3 .mark i{ display:none; }
.nav3 a.l{ font:500 15px/1 var(--sans); }
.nav3 a.l[aria-current="page"]::after{ background:var(--ink); }
.nav3 .avail{ font:400 14px/1 var(--sans); color:var(--ink-2); }
.nav3 .avail::before{ display:none; }
.navm .idx{ font:500 15px/1 var(--sans); text-transform:none; letter-spacing:0; }
.sheet li a span{ font:400 14px/1 var(--sans); }

/* ------------------------------------------------------------ 01 OVREL */

/* ------------------------------------------- 07 Selected visual work */

/* Black Coat: the painting flush left at viewport height; its vermilion
   continues as the field. The caption sits at the foot of the field. */

@media (max-width:760px){
  .proof5{ margin-top:32px; }
  .proof5 li{ grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); }
  .proof5 b{ font-size:clamp(1.2rem, 7vw, 1.7rem); }
  
  
  
  
  
}
.en5 .fx5{ grid-column:9 / -1; margin-top:clamp(24px, 2.8vw, 42px); }
@media (max-width:1023px){ .en5 .ld5,.en5 .fx5{ grid-column:1 / -1; } .en5 .fx5{ margin-top:16px; } }.kick, .fields .note, .atlas-hd, .sx .n, .sx .io, .sx .sk, .sx .st, .chain li, .links .v, .copy4{
  font-family:var(--sans); text-transform:none; letter-spacing:0; }.kick, .fields .note, .atlas-hd{ font-size:var(--small); font-weight:400; }

code,pre,kbd{ font-family:var(--mono); }
.msg .kick{ color:#A9B1BD; }
.fields dt{ font-family:var(--mono); font-size:13.5px; }
.fields dd{ font-size:var(--small); }

/* --------------------------------------------------- 06 Client work */

/* ------------------------------------------ 07 Selected visual work */

/* ------------------------------------------------------- 08 Systems */
.atlas .en5{ padding:0 0 clamp(32px, 4vw, 56px); }
.atlas-hd{ font-size:13px; color:var(--ink-3); }
.sx .n{ font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.sx .nm{ font-weight:600; }
.sx .io{ font-size:14px; }
.sx .sk{ font-size:14px; color:var(--ink-2); }
.sx .st{ font-size:14px; color:var(--ink-2); }
.sx .st::before{ display:none; }
.sx .st.live,.sx .st.use,.sx .st.done{ color:var(--ink); }
.spx text{ font-family:var(--sans); font-weight:500; }
.spx .bt,.spx .stt{ text-transform:none; letter-spacing:0; }
.spx .stt.live{ fill:var(--ink-3); }
.atlas-plate::before{ content:none; }
.chain li{ font-size:15px; }

/* --------------------------------------------------------- 09 Notes */

/* ------------------------------------------------ 10 Profile, contact */

.links .k{ font-weight:600; }
.links .v{ font-size:15px; }
.copy4{ font-size:14px; }

/* ---- review fixes, round 1 */
.msg p.kick{ font:400 var(--small)/1.35 var(--sans); letter-spacing:0; color:#A9B1BD; }
.fields dd{ font-family:var(--sans); }
.map{ padding-bottom:clamp(40px, 5vw, 72px); }

.atlas .en5 .fx5{ grid-column:1 / 8; margin-top:clamp(18px, 2vw, 28px); }

/* The old case-page normalisation layer lived here. It forced sans, no
   tracking and 14px onto figcaption, th, td and `li > span` for any main
   without .hero5, which now means every case page, where it was quietly
   overriding v13's mono labels. Those components are gone; so is the layer.
   Only the two rules still doing work are kept. */
em{ font-style:normal; }

/* ===========================================================================
   v5.1, visual pass. OH Architecture restraint (fewer elements, calmer
   proportions, more air) with MONOLOG's compositional confidence (image/text
   rows, edge-cropped plates, one strong move per section).
   =========================================================================== */
:root{ --d-l:clamp(2.6rem, 0.6rem + 6vw, 6.6rem); --sec:clamp(104px, 12vw, 216px); }

.st::before{ display:none; }
.recs .st.o{ color:var(--ink-3); }
.recs .st.b{ font-weight:600; }
.map{ padding-top:clamp(56px, 6vw, 104px); }

/* Facility: the system carries the section */

/* QuoteWell: the product and the statement as one row; proof with room */

@media (min-width:761px){
  .beats{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px; }
  .beats li{ min-height:clamp(300px, 26vw, 400px); padding:clamp(24px, 2.8vw, 48px); gap:18px; }
  .beats .w{ font-size:clamp(2.8rem, 1rem + 4.2vw, 5.2rem); }
  .beats p{ font-size:16.5px; line-height:1.5; max-width:44ch; }
}

/* Client work: one image per client, calm hierarchy */

/* Selected visual work: three works. Red room (image left, colour field),
   the type detail (full bleed), then a quiet mirrored spread on paper. */

/* Systems: calmer rows */
.sx summary{ padding:clamp(14px, 1.3vw, 18px) 0; }
.sx .sk{ color:var(--ink-3); }
.nx5 .fx5{ max-width:50ch; }
.nx5 .go{ margin-top:10px; align-self:flex-start; }
.endm .links{ margin-top:clamp(28px, 3vw, 44px); border-top-width:1px; }
@media (max-width:1023px){ .endm .note5,.endm .prof5{ grid-column:1 / -1; } .endm .prof5{ margin-top:80px; } }

/* Facility OS: the real product carries the section.
   Dashboard and door code side by side, then four system facts. */

/* case pages: a capture that cannot be re-shot is shown no larger than it
   can render sharply on a 2x screen */

/* stacked external links on document pages: at least 24px targets */
.doc p.spec a{ display:inline-block; padding:3px 0; }

/* visually hidden, still read aloud */
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ------------------------------------------- running head (the nav bar)
   A book's running head: the name, the sections, the CV. Mono, quiet. */
.nav3{ background:rgba(243, 241, 236, 0.92); }
.nav3 .mark{ font:400 11px/1 var(--mono); letter-spacing:0.18em; text-transform:uppercase; }
.nav3 a.l{ font:400 11px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.nav3 a.l:hover,.nav3 a.l[aria-current="page"]{ color:var(--ink); }
.nav3 a.l[aria-current="page"]::after,.nav3 a.l::after{ background:currentColor; height:1px; }
.nav3 .avail{ font:400 11px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.nav3 .avail::before{ background:#1F3AC6; box-shadow:none; width:5px; height:5px; }
.navm .idx{ font:400 11px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; }
.navm a.l{ font:400 11px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; }
.sheet{ background:#F3F1EC; }

/* ------------------------------------------------------- the site window
   Where the artefact is a live website, it is shown as a window onto a real
   capture of that site rather than as a browser mock. Default is the top of
   the page. Pointing at it, or tabbing to it, travels down. Leaving returns.
   No address bar, no bezel: none of the studios worth learning from use one. */
.wv{ margin:0; }
.wv-win{ position:relative; overflow:hidden; aspect-ratio:4 / 3;
  background:var(--paper-2); box-shadow:0 0 0 1px var(--rule); }
.wv-win img,.wv-win video{ position:absolute; inset:0 0 auto 0; display:block;
  width:100%; height:auto; will-change:transform;
  transform:translateY(0); transition:transform var(--wv-t, 9s) linear; }
.wv-win video{ height:100%; object-fit:cover; transform:none; transition:none; }
.wv.is-live .wv-win img{ transform:translateY(var(--wv-y, 0px)); }

/* The control. On a touch screen it is the way in, so it is always visible.
   With a pointer, hovering already does it, so the button waits out of sight
   until somebody tabs to it, still in the tree, still announced. */
.wv-btn{ position:absolute; right:10px; bottom:10px; z-index:2;
  min-height:38px; padding:9px 15px; border:0; border-radius:0;
  background:rgba(17,17,15,0.82); color:#F6F4EF; cursor:pointer;
  font:400 10.5px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; }
.wv-btn:hover{ background:rgba(17,17,15,0.94); }
@media (hover:hover) and (min-width:761px){
  .wv-btn{ opacity:0; pointer-events:none; transition:opacity var(--fast); }
  .wv-btn:focus-visible{ opacity:1; pointer-events:auto; }
}
.wv > figcaption{ margin-top:12px; font:400 13px/1.55 var(--sans); color:var(--ink-3); max-width:52ch; }
.wv > figcaption b{ font-weight:500; color:var(--ink); }
.wv > figcaption .lb{ display:block; margin-bottom:4px; font:400 10.5px/1.6 var(--mono);
  letter-spacing:0.16em; text-transform:uppercase; }

@media (max-width:760px){ .wv-win{ aspect-ratio:3 / 4; } }

/* reduced motion: the poster frame, and nothing moves */
@media (prefers-reduced-motion:reduce){
  .wv-win img{ transition:none; }
  .wv.is-live .wv-win img{ transform:none; }
  .wv-btn{ display:none; }   /* nothing to control */
}