/* Codex: a page from a Leonardo notebook. The home page is one screen: a
   drawing machine, water-driven, draws the pine and then our work while
   notes in the margins name the principles. The other pages are folios
   of the same book and scroll as usual. */

:root {
  --paper: #faf6ed;
  --paper-hi: #fdfbf6;
  --fill: #fbf8f1;
  --sheet: #fefcf8;
  --ink: #33200f;
  --ink-2: #5b412c;
  --ink-3: rgba(58, 38, 22, .62);
  --rule: rgba(58, 38, 22, .2);
  --sanguine: #a3432a;
  --sanguine-2: #8a3521;
  --water: #3f4c52;
  --lamp: #5c7f45;
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --hand: 'Homemade Apple', 'Segoe Script', cursive;
  --gut: clamp(16px, 3.4vw, 52px);
  --logo-h: clamp(32px, 2.6vw, 38px);
  /* the logo's drawing starts 61.26 units into its 234-unit-high viewBox;
     content that lines up with the logo lines up with that, not the box */
  --logo-ink: calc(var(--logo-h) * 61.26 / 234);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The scrollbar's room is kept on every page, so a page that scrolls and one
   that fits the screen are the same width and nothing moves between them. */
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  /* the paper: ivory, smooth, a breath of shade at its edges */
  background: radial-gradient(130% 100% at 55% 42%, transparent 60%, rgba(112, 72, 28, .05) 100%), var(--paper);
}
a { color: inherit; }
::selection { background: rgba(163, 67, 42, .22); }
:focus-visible { outline: 2px solid var(--sanguine); outline-offset: 3px; border-radius: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--ink); color: var(--paper); font-size: 14px; text-decoration: none; border-radius: 3px; transition: top .2s; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- chrome */
.hdr { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(14px, 2.4vh, 26px) var(--gut); }
.brand { display: inline-flex; color: var(--ink); }
.brand .pinova-logo { height: var(--logo-h); width: auto; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); font-size: 15px; letter-spacing: -.01em; }
.nav > a:not(.btn) { position: relative; text-decoration: none; color: var(--ink-2); padding: 6px 0; transition: color .2s; }
.nav > a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); border-radius: 2px; }
.nav > a:not(.btn):hover { color: var(--ink); }
.nav > a:not(.btn):hover::after, .nav > a:not(.btn)[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav > a:not(.btn)[aria-current] { color: var(--ink); }

.btn { display: inline-flex; border: 0; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 3px; font: 500 15px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s, box-shadow .25s, transform .35s var(--ease); }
.btn .arr { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: var(--paper-hi); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 8px 18px -14px rgba(58, 38, 22, .55); }
.btn-ink:hover { background: var(--sanguine-2); }
.btn-line { color: var(--ink); box-shadow: 0 0 0 1.25px rgba(58, 38, 22, .55) inset; background: color-mix(in srgb, var(--paper-hi) 35%, transparent); }
.btn-line:hover { box-shadow: 0 0 0 1.25px var(--ink) inset; background: color-mix(in srgb, var(--paper-hi) 70%, transparent); }
.hdr-cta { min-height: 40px; padding: 0 16px; font-size: 14px; }
.nav > .nav-contact { display: none; }

/* The lamp's halo breathes out from 3px round the lamp to 5px and fades. It is
   a disc under the lamp that scales and fades, not a box-shadow: transform and
   opacity run on the compositor, where an animated shadow repainted the page
   on every frame for as long as the page was open. */
.lamp { position: relative; display: inline-block; width: 7px; height: 7px; vertical-align: 1px; margin-right: 8px; }
.lamp::before, .lamp::after { content: ''; position: absolute; border-radius: 50%; }
.lamp::before { inset: -3px; background: rgba(92, 127, 69, .16); }
.lamp::after { inset: 0; background: var(--lamp); }
@media (prefers-reduced-motion: no-preference) { .lamp::before { animation: lamp 2.8s ease-in-out infinite; } }
/* 17px across from 13px, and .06 alpha from .16 */
@keyframes lamp { 50% { transform: scale(1.3077); opacity: .375; } }

.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(14px, 2.4vh, 26px); font: 500 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sanguine); }
.eyebrow i { width: 26px; height: 1px; background: currentColor; opacity: .6; }

/* ---------------------------------------------------------------- home */
/* the header, the hero and the strip fill the first screen; if they ever
   need more, it grows. The footer follows below it, as on every page. */
.screen { height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.home { display: grid; grid-template-columns: minmax(340px, 33fr) 67fr; align-items: center; gap: clamp(8px, 1.6vw, 28px); min-height: 0; padding-left: var(--gut); outline: none; }
/* the hero starts under the logo's drawing, as the folios do */
.intro { position: relative; z-index: 2; max-width: 540px; margin-left: var(--logo-ink); padding-bottom: 2vh; }
.hero-h { margin: 0; font: 400 clamp(42px, min(4.9vw, 8.4vh), 88px)/.94 var(--serif); letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
.hero-h .ln { display: block; overflow: hidden; padding: .02em 0 .1em; margin-bottom: -.1em; }
.hero-h .ln > span { display: inline-block; }
.hero-h em { font-style: italic; color: var(--sanguine); letter-spacing: -.03em; }
.lede { margin: clamp(14px, 2.4vh, 26px) 0 0; max-width: 34ch; font: 500 clamp(18px, 1.45vw, 21.5px)/1.42 var(--serif); color: var(--ink-2); text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: clamp(18px, 3.2vh, 34px); }

/* the stage: the machine is fitted to whatever room is left, never scrolls */
.stage { position: relative; margin: 0; height: 100%; min-height: 0; container-type: size; display: grid; place-items: center end; overflow: hidden; }
.mc { position: relative; width: min(100cqw, 100cqh * 1.3333); aspect-ratio: 1200 / 900; container-type: inline-size; user-select: none; -webkit-user-select: none; }
.mc > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mc-live { will-change: transform; }

:is(.mc, .cx-art, .cx-plate-draw) .k { stroke: var(--ink); stroke-width: 2.05; }
:is(.mc, .cx-art, .cx-plate-draw) .m { stroke: var(--ink); stroke-width: 1.35; opacity: .92; }
:is(.mc, .cx-art, .cx-plate-draw) .t { stroke: var(--ink); stroke-width: .95; opacity: .66; }
:is(.mc, .cx-art, .cx-plate-draw) .g { opacity: .4; }
:is(.mc, .cx-art, .cx-plate-draw) .h { stroke: var(--ink); stroke-width: .85; opacity: .72; }
:is(.mc, .cx-art, .cx-plate-draw) .hd { stroke-width: 1; opacity: .8; }
:is(.mc, .cx-art, .cx-plate-draw) .c { stroke: var(--sanguine); stroke-width: 1; opacity: .34; }
:is(.mc, .cx-art, .cx-plate-draw) .cq { opacity: .2; }
:is(.mc, .cx-art, .cx-plate-draw) .fl { fill: var(--fill); stroke: none; }
:is(.mc, .cx-art, .cx-plate-draw) .ink { fill: var(--ink); stroke: none; }
.mc .sheet { fill: var(--sheet); stroke: none; }
.mc .pen { stroke: var(--ink); stroke-width: 1.6; }
.mc .pen.hatch { stroke-width: 1.05; opacity: .85; }
.mc .pen.dot { stroke-width: 1.3; }
.mc .rope { stroke: var(--ink); stroke-width: 3.8; }
.mc .rope-lay { stroke: var(--fill); stroke-width: 1.5; stroke-dasharray: 2.4 3.6; }
.mc .water { stroke: var(--water); stroke-width: 1.2; }
.mc .water.wv { stroke-dasharray: 26 9 7 11; opacity: .75; }
.mc .water.wf { stroke-dasharray: 22 6 5 8; stroke-width: 1.3; opacity: .9; }
.mc .water.ws { stroke-dasharray: 34 10 10 14; stroke-width: .95; opacity: .6; }
.mc .water.ed { stroke-dasharray: 16 4 5 5; stroke-width: 1; opacity: .7; }
.mc .water.wl { stroke-width: 1.1; opacity: .8; }
.mc .bucket-water { stroke: var(--water); stroke-width: 1; opacity: .7; }
.js .mc:not(.is-live) .fig { visibility: hidden; }
html:not(.js) .fig + .fig { display: none; }

/* The page draws itself on arrival: lines, then hatching, then the fills
   that give the parts their bodies. Every inked part is drawn; only the
   fills and the water fade in. A stroke waits with its start inside the
   dash pattern's gap, not at its edge, where a round cap would show as a
   dot before the stroke is drawn. */
.js .is-drawing .dw { stroke-dasharray: 1 1.02; stroke-dashoffset: 1.01; animation: cx-draw 1.25s var(--d, 0s) cubic-bezier(.5, .05, .3, 1) forwards; }
.js .is-drawing .hw { stroke-dasharray: calc(var(--hl) * 1px) calc(var(--hl) * 1px + 2px); stroke-dashoffset: calc(var(--hl) * 1px + 1px); animation: cx-draw .9s calc(var(--d, 0s) + .6s) cubic-bezier(.3, .2, .3, 1) forwards; }
.js .is-drawing .fl, .js .is-drawing .ink, .js .mc.is-drawing .sheet { animation: cx-in 1s 1.35s ease-out backwards; }
.js .mc.is-drawing .water { animation: cx-in .9s 1.8s ease-out backwards; }
/* the rope's lay once the rope is drawn under it: before, its light dashes
   would cut the lines the rope crosses */
.js .mc.is-drawing .rope-lay { animation: cx-in .6s 1.9s ease-out backwards; }
@keyframes cx-draw { to { stroke-dashoffset: 0; } }
/* A fade of the paint, not of the element: an opacity animation lets
   Chrome lift the parts onto layers of their own, and when it ends the
   drawing goes back onto one and shifts by a fraction of a pixel, a
   visible jump. It ends at the part's own paint opacity, and leaves its
   opacity alone, so nothing jumps when the arrival's rules come off. */
@keyframes cx-in { from { fill-opacity: 0; stroke-opacity: 0; } }
/* A drawing further down a page waits until it is on screen to draw. */
.js .art.is-drawing:not(.is-inview) * { animation-play-state: paused !important; }
@keyframes cx-fade { to { opacity: 1; } }
.js .pg-home .intro > * { opacity: 0; transform: translateY(10px); animation: cx-rise .9s var(--ease) forwards; }
.js .pg-home .intro > .hero-h { opacity: 1; transform: none; animation: none; }
.js .pg-home .hero-h .ln > span { transform: translateY(105%); animation: cx-line 1.1s var(--ease) forwards; }
.js .pg-home .hero-h .ln + .ln > span { animation-delay: .12s; }
.js .pg-home .intro > .eyebrow { animation-delay: .05s; }
.js .pg-home .intro > .lede { animation-delay: .3s; }
.js .pg-home .intro > .cta { animation-delay: .42s; }
@keyframes cx-rise { to { opacity: 1; transform: none; } }
@keyframes cx-line { to { transform: none; } }

/* Notes in the margins, in a hand like Leonardo's, each by the part of the
   drawing it names. */
.note { position: absolute; z-index: 3; display: block; margin: 0; color: var(--ink); text-align: left; font: 400 clamp(10.5px, 1.42cqw, 18px)/1.62 var(--hand); letter-spacing: .01em; }
.js .mc .note { opacity: 0; transition: opacity .9s; }
.js .mc.is-ready .note { opacity: 1; }
.note > span { display: block; }
.note-k { font-size: 1.22em; color: var(--sanguine); margin-bottom: .1em; }
.note-t { color: var(--ink); }
.mc .leader { opacity: .75; }
/* each leader is drawn from its note as the note appears, its arrowhead last */
.js .mc .leader path { stroke-dasharray: 1 1.02; stroke-dashoffset: 1.01; }
.js .mc.is-ready .leader path { animation: cx-draw .6s calc(var(--d, 0s) + .25s) cubic-bezier(.5, .05, .3, 1) forwards; }
/* A drawing too narrow for four notes side by side shows the one in turn,
   in the open sky over the gears. */
@container (max-width: 700px) {
  .mc .leader { display: none; }
  .mc .note { left: 71% !important; top: 1.5% !important; width: 44% !important; transform: translateX(-50%); text-align: center; font-size: clamp(12.5px, 2.2cqw, 16px); opacity: 0 !important; transition: opacity .6s; pointer-events: none; }
  .mc.is-ready[data-cur="flexible"] .note[data-note="flexible"], .mc.is-ready[data-cur="durable"] .note[data-note="durable"], .mc.is-ready[data-cur="evergreen"] .note[data-note="evergreen"], .mc.is-ready[data-cur="rooted"] .note[data-note="rooted"] { opacity: 1 !important; pointer-events: auto; }
}

/* the label on the board, under the sheet */
.figcap { position: absolute; z-index: 3; left: 5%; width: 30.4%; top: 81.6%; margin: 0; text-align: center; font: italic 500 clamp(11px, 1.55cqw, 19px)/1.2 var(--serif); color: var(--ink-2); }
.figcap > * { display: inline-flex; align-items: center; gap: .4em; text-decoration: none; animation: cx-fade .6s ease-out; }
.figcap a { color: var(--sanguine-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.figcap .arr { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* the strip along the foot of the first screen. No safe-area inset: iOS
   changes it as its toolbar shows and hides, and the strip's height comes
   out of the machine's room, so the machine would resize while the page
   scrolls. The footer below it clears the home indicator. */
.strip { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px var(--gut) 12px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.strip p { margin: 0; }
.strip-l span { opacity: .5; padding: 0 .3em; }
.strip-r { display: flex; align-items: center; gap: 22px; }
.strip-status { display: inline-flex; align-items: center; text-decoration: none; transition: color .2s; }
.strip-status:hover { color: var(--ink); }
.pause { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color .2s; }
.pause:hover { color: var(--ink); }
.pause-i { width: 9px; height: 10px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; }
.pause[aria-pressed="true"] .pause-i { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }

/* ---- the home page on narrower screens */
@media (max-width: 1100px) {
  .home { grid-template-columns: minmax(300px, 36fr) 64fr; }
}
@media (max-width: 860px) {
  .screen { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .home { display: contents; }
  .nav { gap: 22px; }
  :root { --logo-h: 32px; }
  /* the same room under the header as the folios' .page gives */
  .intro { padding: clamp(24px, 6vh, 72px) var(--gut) 0; max-width: 640px; }
  .hero-h { font-size: clamp(36px, min(9.6vw, 6.4vh), 64px); }
  .hero-h .ln { display: inline; }
  .hero-h .ln > span { display: inline; }
  .lede { font-size: 18px; margin-top: 10px; max-width: 40ch; }
  .cta { margin-top: 14px; }
  /* one call to action; the work is a tap away in the header */
  .cta .btn-line { display: none; }
  .btn { min-height: 44px; padding: 0 18px; }
  .stage { place-items: end start; overflow: hidden; }
  /* against the right edge when it fits, as on a desk; wider than the
     screen, it keeps its left edge so what gets cropped is the far bank,
     and the machine can be larger */
  .mc { --mc-w: min(128cqw, 100cqh * 1.3333 * .86); width: var(--mc-w); margin-left: max(-1cqw, 100cqw - var(--mc-w)); }
  /* Under the text, the drawing has no margin of its own for the notes: they
     would lie over the buttons above it. */
  .mc .note, .mc .leader { display: none; }
  .figcap { font-size: clamp(11px, 2.3cqw, 15px); }
  .strip-l, .strip-status { display: none; }
  .strip { justify-content: center; gap: 26px; }
  .hdr-cta { display: none; }
  .nav > .nav-contact { display: block; }
}
/* a phone: the heading, the button and the machine, nothing more; the
   caption on the board is too small there to read without running into it */
@media (max-width: 599px) {
  .pg-home .eyebrow, .figcap { display: none; }
  /* "Ingenious software," fills the measure, one line each as on a desk */
  .hero-h { font-size: clamp(36px, min(12vw, 7.2vh), 64px); }
  .hero-h .ln { display: block; }
  .hero-h .ln > span { display: inline-block; }
  .lede { max-width: none; margin-top: 12px; text-wrap: balance; }
  .cta { margin-top: 18px; }
  .cta .btn { flex: 1; justify-content: space-between; min-height: 50px; padding: 0 18px 0 20px; font-size: 16px; }
  .cta .btn .arr { width: 18px; height: 18px; }
  /* the larger heading takes its room from the air over the drawing, not
     from the machine */
  .mc { --mc-w: min(128cqw, 100cqh * 1.3333 * .95); }
}
@media (min-width: 600px) and (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .js .pg-home .hero-h .ln > span { transform: none; animation: cx-rise .9s var(--ease) both; }
}
/* too short for one screen: let it scroll rather than crush the machine */
@media (max-height: 560px) and (min-width: 600px), (max-height: 600px) and (max-width: 599px) {
  .screen { height: auto; min-height: 100svh; }
  .stage { height: 86svh; }
}

/* ---------------------------------------------------------------- folios */
/* The header and the folio fill at least the first screen, as the home
   page's .screen does, so on every page the footer starts below the fold. */
.fold { min-height: 100svh; display: flex; flex-direction: column; }
.fold > .page { flex: 1 0 auto; width: 100%; }
.page { max-width: 1180px; margin: 0 auto; padding: clamp(24px, 6vh, 72px) var(--gut) clamp(64px, 12vh, 140px); }
/* Contact, Portfolio and its projects start on the logo's line: the column
   keeps its cap but sits under the logo's drawing instead of in the middle. */
:is(.pg-contact, .pg-portfolio, .pg-project) .page { margin-left: 0; padding-left: calc(var(--gut) + var(--logo-ink)); }
.pg-head { max-width: 760px; margin-bottom: clamp(32px, 6vh, 64px); }
.pg-title { margin: 0; font: 400 clamp(52px, 8vw, 112px)/.9 var(--serif); letter-spacing: -.03em; }
.pg-title em { font-style: italic; color: var(--sanguine); }
.pg-claim { font-size: clamp(42px, 6.2vw, 88px); line-height: .96; text-wrap: balance; }
.pg-head-wide { max-width: 980px; }
.plate-wide { margin-top: clamp(8px, 2vh, 20px); }
.pg-lede { margin: clamp(16px, 3vh, 26px) 0 0; max-width: 40ch; font: 500 clamp(19px, 1.7vw, 23px)/1.42 var(--serif); color: var(--ink-2); text-wrap: pretty; }
.crumbs { display: flex; gap: 10px; margin-bottom: 22px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.crumbs a { text-decoration: none; color: var(--sanguine); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* a plate: a photograph mounted on the page */
.plate { position: relative; display: block; margin: 0; padding: clamp(10px, 1.4vw, 16px); background: var(--paper-hi); box-shadow: 0 0 0 1px var(--rule), 0 0 0 6px color-mix(in srgb, var(--paper-hi) 50%, transparent), 0 0 0 7px var(--rule), 0 24px 50px -30px rgba(58, 38, 22, .55); }
.plate img { display: block; width: 100%; height: auto; }
.plate-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font: italic 500 15px/1.3 var(--serif); color: var(--ink-3); }

.works { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 7vh, 80px); }
.work { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(22px, 4vw, 60px); align-items: center; text-decoration: none; }
.work-k { display: block; font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sanguine); }
.work-n { display: block; margin-top: 10px; font: italic 400 clamp(40px, 4.6vw, 64px)/1 var(--serif); letter-spacing: -.02em; }
.work-d { display: block; margin-top: 14px; font: 500 20px/1.45 var(--serif); color: var(--ink-2); max-width: 34ch; }
.work-f { display: flex; gap: 26px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }
.work-f .k { display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.work-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-weight: 500; font-size: 15px; }
.work-go .arr { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; transition: transform .35s var(--ease); }
.work:hover .work-go .arr { transform: translateX(4px); }
@media (max-width: 820px) { .work { grid-template-columns: 1fr; } }

.strip-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: clamp(28px, 5vh, 48px) 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.strip-dl > div { padding: 16px 0; }
.strip-dl dt { font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.strip-dl dd { margin: 6px 0 0; font: 500 20px/1.3 var(--serif); }
.strip-dl dd a { display: inline-flex; align-items: center; gap: 6px; color: var(--sanguine-2); text-underline-offset: 3px; }
.strip-dl .arr { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.about { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr; gap: 24px clamp(24px, 5vw, 72px); margin-top: clamp(36px, 7vh, 72px); }
.about-h { margin: 0; font: italic 500 30px/1.1 var(--serif); color: var(--sanguine); }
.about-body p { margin: 0 0 1em; max-width: 60ch; font: 500 clamp(19px, 1.5vw, 21px)/1.55 var(--serif); color: var(--ink-2); }
.about-body p:first-child::first-letter { float: left; font: 400 3.4em/.82 var(--serif); padding: .06em .08em 0 0; color: var(--sanguine); }
@media (max-width: 700px) { .about { grid-template-columns: 1fr; } }
/* A project folio on a wide screen: the heading, About and the facts down
   the left; the plate on the right, its top level with the heading's. The
   heading's rows are a subgrid of the article's, so the plate starts on the
   title's row, not the breadcrumb's. The page drops the folios' cap and the
   plate takes the larger share, so it grows with the screen (the plate keeps
   its own aspect ratio). The last row is flexible: the plate's extra height
   goes there, and the left column's rows keep their own heights. */
@media (min-width: 1400px) {
  .pg-project .page { max-width: none; }
  .proj { display: grid; grid-template-columns: minmax(520px, 1fr) minmax(0, 1.75fr); grid-template-rows: repeat(5, auto) 1fr; column-gap: clamp(48px, 4.4vw, 96px); align-items: start; }
  .proj > .pg-head { grid-column: 1; grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; }
  .proj > figure { grid-column: 2; grid-row: 2 / -1; margin: 0; }
  .proj > .about { grid-column: 1; grid-row: 4; grid-template-columns: 1fr; gap: 16px; margin-top: 0; }
  .proj > .strip-dl { grid-column: 1; grid-row: 5; }
}

/* contact: a letter */
/* The letter spans both rows on the right; the second row is flexible so it,
   not the first, takes the letter's extra height, and the details stay right
   under the lede. Stacked, the source order is the reading order: what to do,
   the letter to do it with, then the other ways to reach us. */
.ct { display: grid; grid-template-columns: 1fr 1.25fr; grid-template-rows: auto 1fr; column-gap: clamp(28px, 6vw, 88px); align-items: start; }
.ct > .pg-head { margin-bottom: 0; }
.ct > .letter { grid-column: 2; grid-row: 1 / span 2; }
.ct-side { grid-column: 1; grid-row: 2; }
.ct-meta { display: grid; gap: 16px; margin: clamp(26px, 5vh, 44px) 0 0; }
.ct-meta dt { font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ct-meta dd { margin: 4px 0 0; font: 500 20px/1.3 var(--serif); }
.ct-meta a { text-underline-offset: 3px; }
.letter { position: relative; padding: clamp(22px, 3.6vw, 44px); background: var(--paper-hi); box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -36px rgba(58, 38, 22, .6); overflow: hidden; }
.letter::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(163, 67, 42, .09) 35px 36px); opacity: .6; }
.fields { position: relative; display: grid; gap: 18px; }
.fld { display: grid; gap: 6px; }
.fld label { display: flex; justify-content: space-between; gap: 10px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fld input, .fld textarea { width: 100%; border: 0; border-bottom: 1.25px solid rgba(58, 38, 22, .4); border-radius: 0; background: transparent; padding: 6px 0 8px; font: 500 21px/1.35 var(--serif); color: var(--ink); resize: vertical; transition: border-color .2s; }
.fld textarea { min-height: 110px; }
.fld input:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--sanguine); box-shadow: 0 1px 0 var(--sanguine); }
.fld [aria-invalid="true"] { border-bottom-color: var(--sanguine); }
.form-foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.form-status { margin: 0; font: italic 500 18px/1.35 var(--serif); color: var(--ink-2); }
/* the seal is pressed into the corner the thanks would run into */
.letter[data-state="sent"] .form-status { padding-right: 96px; }
[data-state="invalid"] .form-status, [data-state="error"] .form-status { color: var(--sanguine-2); }
.letter .again { display: none; }
.letter[data-state="sent"] .again { display: inline-flex; }
.letter[data-state="sent"] [type="submit"] { display: none; }
.seal { position: absolute; right: clamp(18px, 3vw, 34px); bottom: clamp(18px, 3vw, 30px); width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #b95437, var(--sanguine-2) 70%); color: rgba(255, 235, 215, .8); box-shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 10px 20px -10px rgba(90, 30, 15, .8); transform: scale(.2) rotate(-40deg); opacity: 0; pointer-events: none; }
.seal .pine-mark { width: 34px; height: 40px; }
.letter[data-state="sent"] .seal { animation: cx-seal .7s var(--ease) forwards; }
@keyframes cx-seal { 60% { transform: scale(1.08) rotate(-8deg); opacity: 1; } to { transform: scale(1) rotate(-12deg); opacity: 1; } }

/* status: the logbook */
.log { padding: clamp(20px, 3vw, 36px); background: var(--paper-hi); box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -36px rgba(58, 38, 22, .55); }
.log-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 18px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.vitals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; margin: 0; }
@media (min-width: 600px) { .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vitals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px dotted rgba(58, 38, 22, .3); }
.vitals dt { font: italic 500 19px/1.3 var(--serif); color: var(--ink-2); }
.vitals dd { margin: 0; font: 500 14px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.trace { margin-top: 26px; }
.trace-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.log-h > *, .trace-h > * { text-wrap: balance; }
.trace svg { display: block; width: 100%; height: 120px; margin-top: 10px; overflow: visible; }
.trace .tg { stroke: rgba(58, 38, 22, .14); stroke-width: 1; fill: none; }
.trace .tl { stroke: var(--sanguine); stroke-width: 1.6; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.op { display: inline-flex; align-items: center; margin: 18px 0 0; font: italic 500 22px/1.3 var(--serif); }

/* the folios' drawings */
.cx-art { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cx-art .cr { opacity: .6; stroke-width: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .cx-art .rocks { transform-box: fill-box; transform-origin: 50% 50%; animation: cx-rock 3.4s ease-in-out infinite; }
}
@keyframes cx-rock { 0%, 100% { transform: rotate(-1.6deg); } 45% { transform: rotate(1.2deg); } 55% { transform: rotate(1.4deg); } }

/* the annotated plate: the photograph, a ruled border, and notes in the
   margins with leaders to what they name (positions: cx-plate-style) */
.plate-fig { margin: clamp(4px, 1.5vh, 16px) 0 0; }
.annot { position: relative; container-type: inline-size; }
.annot > .annot-img { position: absolute; display: block; height: auto; }
/* the border and leaders lie over the photograph; the pointer goes through
   them to it */
.annot > .cx-plate-draw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; pointer-events: none; }
.annot > .cx-plate-draw .m, .annot > .cx-plate-draw .t { vector-effect: non-scaling-stroke; }
.annot > .note { font-size: clamp(12px, 1.5cqw, 18px); }
.annot .leader { opacity: .8; }
.plate-fig .plate-cap { margin-top: 4px; }
@media (max-width: 700px) {
  .annot { aspect-ratio: auto !important; display: grid; gap: 14px; }
  .annot > .annot-img { position: static; width: 100% !important; }
  .annot > .cx-plate-draw { display: none; }
  .annot > .note { position: static; width: auto !important; font-size: 15px; text-align: left; }
}

/* contact, stacked: the heading, the letter, then the details */
@media (max-width: 820px) {
  .ct { grid-template-columns: 1fr; grid-template-rows: none; row-gap: clamp(32px, 6vh, 56px); }
  .ct > .letter, .ct-side { grid-column: auto; grid-row: auto; }
  .ct-meta { margin: 0; }
}
/* a phone: Send fills the letter's width, as Contact does on the home page */
@media (max-width: 599px) {
  /* no gap after Send: the status beside it is empty until it wraps below */
  .form-foot { column-gap: 0; }
  .form-foot [type="submit"] { flex: 1; justify-content: space-between; min-height: 50px; padding: 0 18px 0 20px; font-size: 16px; }
  .form-foot [type="submit"] .arr { width: 18px; height: 18px; }
}

/* status: the heading and the logbook fit one screen; what gives way to the
   height is the size of the title and the trace, and the lede moves up
   beside the title */
@media (min-width: 821px) {
  .pg-status .page { padding-top: clamp(8px, 3vh, 72px); padding-bottom: clamp(24px, 6vh, 140px); }
  .pg-status .pg-head { display: grid; grid-template-columns: auto minmax(0, 40ch); column-gap: clamp(32px, 6vw, 96px); align-items: end; max-width: none; margin-bottom: clamp(16px, 4vh, 64px); }
  .pg-status .pg-head > .eyebrow { grid-column: 1 / -1; }
  .pg-status .pg-title { font-size: clamp(48px, min(8vw, 12vh), 112px); }
  .pg-status .pg-lede { grid-column: 2; grid-row: 2 / span 2; margin: 0; font-size: clamp(17px, min(1.7vw, 2.9vh), 23px); }
  .pg-status .op { margin-top: clamp(8px, 2vh, 18px); }
  .pg-status .log { padding-block: clamp(14px, 3vh, 36px); }
  .pg-status .log-h { margin-bottom: clamp(6px, 2vh, 18px); }
  .pg-status .vitals > div { padding-block: clamp(6px, 1.5vh, 13px); }
  .pg-status .trace { margin-top: clamp(10px, 2.6vh, 26px); }
  .pg-status .trace svg { height: clamp(40px, 11vh, 120px); }
}

/* 404: the broken wheel */
.nf { display: grid; align-content: center; }
.nf-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.nf-copy .cta { margin-top: clamp(20px, 3vh, 32px); }
@media (max-width: 820px) { .nf-grid { grid-template-columns: 1fr; } .nf-art { max-width: 420px; } }

/* the footer the folios share */
.ftr { border-top: 1px solid var(--rule); }
.ftr-in { padding: 36px var(--gut) 90px; display: grid; grid-template-columns: auto 1fr; gap: 18px 40px; align-items: center; }
.ftr-nav { justify-self: end; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.ftr-nav a { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink-2); }
.ftr-nav a:hover, .ftr-nav a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.ftr-small { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 8px 0 0; font: 500 11px/1.5 var(--mono); letter-spacing: .06em; color: var(--ink-3); }
@media (max-width: 760px) { .ftr-in { grid-template-columns: 1fr; } .ftr-nav { justify-self: start; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .js .is-drawing .dw, .js .is-drawing .hw { stroke-dasharray: none; }
}