/* ARCFLOWS launch site: the reading pages (projects, privacy, 404).
   Builds on base.css. No tokens are redefined here; every colour, size and easing comes from there, and so does all
   of the shared chrome (header, menu, marks, dock, footer, closing band), which is not restyled here.
   These pages are for reading: no canvas, no pinned tracks. Structure is hairline rules, a mono label rail and space. */

/* ------------------------------------------------------------------ what a reading page does differently */

/* These pages are continuous text, so the three registration marks that cross the column are off; the two in the margins stay. */
.marks i:nth-child(2), .marks i:nth-child(3), .marks i:nth-child(4) { display: none; }

/* The reading pages have no in-page links to glide to, and a deep link (projects#slug) must land exactly: a smooth
   scroll aims at where the section was before the web fonts arrived and stops short of where it ends up. */
html { scroll-behavior: auto; }

/* ------------------------------------------------------------------ layout pieces the three reading pages have in common */

/* the label rail: a narrow left column for mono labels, content on the right. Stacks on phones. */
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gutter); }
@media (max-width: 720px) { .split { display: block; } }

/* "← Back to home", above the footer */
.back { padding-block: clamp(20px, 2.4vw, 32px); }
.back a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.back a span { display: inline-block; transition: transform .3s var(--ease); }
.back a:hover { color: var(--paper); }
.back a:hover span { transform: translateX(-4px); }

/* ------------------------------------------------------------------ projects: head band */

.page-head { position: relative; display: flex; align-items: flex-end; min-height: 70vh; min-height: 70svh; padding: calc(var(--header-h) + 56px) 0 clamp(44px, 6vw, 92px); overflow: hidden; overflow: clip visible; }
/* the still is decorative. Its own ground is the page ink, and a radial mask takes it to nothing well before its edge,
   so no rectangle can ever show, however dark or bright the render is. */
.page-head__still { position: absolute; z-index: -1; top: 47%; right: -3vw; width: min(60vw, 96vh); width: min(60vw, 96svh); height: auto; transform: translateY(-50%); -webkit-mask-image: radial-gradient(closest-side, #000 28%, transparent 100%); mask-image: radial-gradient(closest-side, #000 28%, transparent 100%); pointer-events: none; -webkit-user-select: none; user-select: none; }
.page-head__inner { position: relative; }
.page-head__label { display: flex; align-items: center; gap: 14px; }
.page-head__label::after { content: ''; width: clamp(40px, 6vw, 96px); height: 1px; background: var(--line-strong); }
.page-head .display { margin-top: clamp(18px, 2vw, 28px); }
.page-head .display em { display: block; }
.page-head .lede { margin-top: clamp(24px, 3vw, 44px); max-width: 50ch; }

/* Phones and tablets: the still has its own space above the words, so no line of text ever sits on a sphere.
   --still is the picture's size (it shrinks with the window's height); everything it draws lies between 28% and 76% of
   that square, so the label starts at 80% of it, whatever the phone's height. */
@media (max-width: 900px) {
  .page-head { --still: min(100vw, 46vh); --still: min(100vw, 46svh); --still-top: calc(var(--header-h) - var(--still) * .18); align-items: flex-start; min-height: 0; padding-top: calc(var(--still-top) + var(--still) * .8); }
  .page-head__still { top: var(--still-top); right: calc(var(--still) * -.1); width: var(--still); transform: none; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 92%); mask-image: radial-gradient(closest-side, #000 30%, transparent 92%); }
}
/* a phone held sideways has no height to spare for a picture */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .page-head { padding-top: calc(var(--header-h) + 28px); }
  .page-head__still { display: none; }
}

/* ------------------------------------------------------------------ projects: how to read these */

.legend { padding-bottom: clamp(72px, 10vw, 150px); }
.legend__row { border-top: 1px solid var(--line); padding-block: clamp(22px, 2.4vw, 32px); }
.legend__row > .label { padding-top: .25em; }
.legend__tags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px var(--gutter); }
.legend__tags p { margin-top: 10px; color: var(--muted); max-width: 30ch; }
.legend__key { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 3.2vw, 52px); color: var(--muted); }
.legend__key li { display: inline-flex; align-items: center; gap: 12px; }
.legend__note { color: var(--paper); font-size: var(--t-lede); line-height: 1.5; max-width: 46ch; }

/* the four small marks of the diagram key: they repeat the diagram's own drawing language */
.key { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 18px; padding: 0 6px; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: .08em; line-height: 1; text-transform: uppercase; color: var(--muted); }
.key--start::before, .key--out::before { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; }
.key--start::before { left: -4px; background: var(--paper); }
.key--out::before { right: -4px; background: var(--accent); }
.key--person { border-color: var(--accent); color: var(--accent); }

@media (max-width: 720px) {
  .legend__row > .label { padding-top: 0; margin-bottom: 16px; }
  .legend__tags { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .legend__tags p { max-width: none; margin-top: 6px; }
  .legend__key { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ------------------------------------------------------------------ projects: one case */

.case { padding-bottom: clamp(88px, 11vw, 170px); }
.case__head { padding-top: clamp(26px, 3vw, 40px); }
.case__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* the counter opens the rail: a large outlined numeral, then "/ 04" in mono */
.case__count { order: -1; display: inline-flex; align-items: baseline; gap: 12px; margin-bottom: clamp(10px, 1.4vw, 20px); color: var(--faint); }
.case__count b { font-family: var(--font-display); font-weight: 300; font-size: clamp(4.4rem, 7.2vw, 7.4rem); line-height: .78; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(236, 238, 241, .5); }
.case__head .h2 { max-width: 19em; }
.case__head .lede { margin-top: clamp(20px, 2.2vw, 30px); max-width: 48ch; color: var(--muted); }

@media (max-width: 720px) {
  .case__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 0; margin-bottom: 22px; }
  .case__count { margin: 0 0 0 auto; order: 3; display: inline; }
  .case__count b { font: inherit; letter-spacing: inherit; color: var(--paper); -webkit-text-stroke: 0; }
  .case__note { order: 4; flex-basis: 100%; }
}

/* the five facts, on hairlines. The measure is set on the text itself (46ch of Inter is about 62 characters),
   so the step numbers and the "+" bullets keep their own column outside it. */
.facts__row { border-top: 1px solid var(--line); padding-block: clamp(22px, 2.4vw, 32px); }
.facts dt { padding-top: .32em; }
.facts dd { color: var(--muted); font-size: 1.0625rem; line-height: 1.62; }
.facts dd p, .steps li > span, .tools li > span { max-width: 46ch; }
.facts dd p + p { margin-top: 14px; }
.facts__row--person dt { color: var(--accent); }
.facts__row--outcome dd { color: var(--paper); }

.steps { counter-reset: step; display: grid; gap: 14px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.9em minmax(0, 1fr); }
.steps li::before { content: counter(step, decimal-leading-zero); padding-top: .46em; font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .12em; color: var(--faint); }

.tools { display: grid; gap: 8px; }
.tools li { display: grid; grid-template-columns: 2.9em minmax(0, 1fr); }
.tools li::before { content: '+'; font-family: var(--font-mono); font-size: .8125rem; line-height: 2.1; color: var(--faint); }
.tools + p { margin-top: 18px; }

@media (max-width: 720px) {
  .facts dt { padding-top: 0; margin-bottom: 12px; }
  .facts dd { font-size: 1rem; }
  .steps li, .tools li { grid-template-columns: 2.5em minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ projects: the workflow diagram */

/* Two drawings per project: left to right for wide screens, top to bottom for everything narrower.
   Only one is ever displayed, so only one is in the accessibility tree. Each is role="img" with the steps read out in order. */
.flow { margin: clamp(52px, 6.4vw, 96px) 0 clamp(52px, 6.4vw, 96px); }
.flow figcaption { margin-bottom: 22px; }
.flow__svg { width: 100%; height: auto; overflow: visible; }
.flow__svg--h { display: none; }
.flow__svg--v { max-width: 400px; }
@media (min-width: 721px) and (max-width: 1239.98px) {
  .flow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gutter); }
  .flow figcaption { margin: 0; padding-top: .5em; }
}
@media (min-width: 1240px) {
  .flow__svg--h { display: block; }
  .flow__svg--v { display: none; }
}

/* drawing language: 1px outlines on ink, mono labels, the accent kept for the person, the output and the pulse.
   The wires carry the order of the steps and the branching, so they and the box outlines are at least 3:1 on the ink
   (paper at .42 is 3.7:1, at .45 is 4:1); the arrowheads are brighter still.
   Type sizes are in drawing units. The wide drawing is never shown below scale 1; the narrow one is at scale 1 on a
   360px phone and at .875 on a 320px one, so its sizes keep step labels at 12px and tags at 11.5px even there. */
.flow__box { fill: var(--ink); stroke: var(--paper); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.flow__box--person { stroke: var(--accent); stroke-opacity: 1; }
.flow__tint { fill: var(--accent-soft); }
.flow__wire { fill: none; stroke: var(--paper); stroke-opacity: .42; stroke-width: 1; vector-effect: non-scaling-stroke; }
.flow__wire--s { shape-rendering: crispEdges; }
.flow__wire--dash { stroke-dasharray: 3 3; }
.flow__head { fill: none; stroke: var(--paper); stroke-opacity: .62; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.flow__dot { fill: var(--paper); }
.flow__dot--out { fill: var(--accent); }
.flow__t { fill: var(--paper); font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.flow__svg--v .flow__t { font-size: 14px; }
.flow__tagbg { fill: var(--ink); }
.flow__tag { fill: var(--muted); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.flow__tag--person { fill: var(--accent); }
.flow__note { fill: var(--faint); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; }
@media (max-width: 359.98px) { .flow__svg--v .flow__tag, .flow__svg--v .flow__note { font-size: 13.2px; } }

/* one small pulse travels the path: a short bright stretch of the wire itself, so it reads as movement and can never
   be taken for one of the round markers. It runs under the boxes, so it is seen between steps only. */
.flow__pulse { display: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 16 984; }
.flow__svg--v .flow__pulse { stroke-dasharray: 30 970; }
@media (prefers-reduced-motion: no-preference) {
  .flow__pulse { display: block; animation: flow-run var(--t, 8s) linear infinite; }
  .flow__pulse[data-of="2"] { opacity: 0; animation: flow-run-2 calc(var(--t, 6s) * 2) linear infinite; animation-delay: calc(var(--t, 6s) * var(--i, 0)); }
  .flow__pulse[data-of="3"] { opacity: 0; animation: flow-run-3 calc(var(--t, 6s) * 3) linear infinite; animation-delay: calc(var(--t, 6s) * var(--i, 0)); }
}
@keyframes flow-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
@keyframes flow-run-2 { 0% { stroke-dashoffset: 0; opacity: 1; } 50% { stroke-dashoffset: -1000; opacity: 1; } 50.01%, 100% { stroke-dashoffset: -1000; opacity: 0; } }
@keyframes flow-run-3 { 0% { stroke-dashoffset: 0; opacity: 1; } 33.33% { stroke-dashoffset: -1000; opacity: 1; } 33.34%, 100% { stroke-dashoffset: -1000; opacity: 0; } }

/* ------------------------------------------------------------------ after the closing booking band (the band itself is in base.css) */

.closing + .back { border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ privacy: a plain reading page */

.doc-head { padding-top: calc(var(--header-h) + clamp(72px, 11vw, 170px)); padding-bottom: clamp(44px, 6vw, 92px); }
.doc-head .display { margin-top: clamp(18px, 2vw, 28px); }
.doc-head__date { margin-top: clamp(22px, 2.6vw, 36px); }
.doc { padding-bottom: clamp(56px, 8vw, 120px); }
.doc__row { border-top: 1px solid var(--line); padding-block: clamp(28px, 3.4vw, 48px); }
.doc__row .h3 { max-width: 12em; }
.doc__row p { color: var(--muted); font-size: 1.0625rem; line-height: 1.65; max-width: 46ch; padding-top: .2em; }
/* an email address inside a sentence: the line keeps its height, the tap area is 44px tall */
.doc__row p a { position: relative; white-space: nowrap; }
.doc__row p a::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
@media (max-width: 720px) {
  .doc__row .h3 { margin-bottom: 12px; max-width: none; }
  .doc__row p { font-size: 1rem; padding-top: 0; }
}

/* ------------------------------------------------------------------ 404: one screen
   The vertical spacing and the headline follow the window's height, so the two ways back are on the first screen
   of a short laptop and of a small phone too. */

.lost { display: flex; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + clamp(20px, 6vh, 110px)) 0 clamp(32px, 8vh, 120px); }
.lost__inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.lost__inner > .label { margin-top: clamp(20px, 5vh, 56px); }
.lost .display { margin-top: clamp(18px, 2vw, 28px); font-size: clamp(2.4rem, min(6vw, 11vh), 6.4rem); }
.lost .display em { display: block; }
.lost .lede { margin-top: clamp(22px, 2.6vw, 36px); color: var(--muted); }
.lost__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3.2vw, 44px); }
/* a wire that leaves one step and never reaches the next, drawn like the project diagrams */
.lost__glyph { width: 100%; height: auto; margin-bottom: auto; overflow: visible; }
.lost__glyph--v { display: none; max-width: 480px; }
.lost__glyph .flow__box--gone { stroke-dasharray: 4 4; stroke-opacity: .3; shape-rendering: auto; }
.lost__glyph .flow__pulse { stroke-dasharray: 28 1972; }
@media (prefers-reduced-motion: no-preference) {
  .lost__glyph .flow__pulse { animation: lost-run 4.5s var(--ease-in-out) infinite; }
}
@keyframes lost-run { 0% { stroke-dashoffset: 0; opacity: 0; } 8% { opacity: 1; } 62% { stroke-dashoffset: -1000; opacity: 1; } 74%, 100% { stroke-dashoffset: -1000; opacity: 0; } }
@media (max-width: 900px) {
  .lost { padding-top: calc(var(--header-h) + clamp(16px, 5vh, 110px)); padding-bottom: clamp(24px, 6vh, 120px); }
  .lost__glyph--h { display: none; }
  .lost__glyph--v { display: block; }
}
@media (max-width: 720px) {
  .lost__actions { align-self: stretch; }
  .lost__actions .btn { flex: 1 1 100%; }
}
/* no room for the drawing on a very short window (a phone held sideways): the words and both buttons come first */
@media (max-height: 480px) {
  .lost__glyph { display: none; }
  .lost__inner > .label { margin-top: 0; }
}

/* ------------------------------------------------------------------ forced colours (Windows High Contrast)
   The system paints text solid, so the outlined counter is plain text; the diagrams are drawn in the system's own
   text colour, with the person and the output marked by the highlight colour. */
@media (forced-colors: active) {
  .case__count b { -webkit-text-stroke: 0; }
  .flow__svg, .lost__glyph { forced-color-adjust: none; }
  .flow__box, .flow__tagbg { fill: Canvas; }
  .flow__box, .flow__wire, .flow__head { stroke: CanvasText; stroke-opacity: 1; }
  .flow__box--person, .flow__pulse { stroke: Highlight; }
  .flow__tint { fill: none; }
  .flow__t, .flow__tag, .flow__note, .flow__dot { fill: CanvasText; }
  .flow__tag--person, .flow__dot--out { fill: Highlight; }
  .key { border-color: CanvasText; }
  .key--start::before, .key--out::before { forced-color-adjust: none; background: CanvasText; }
  .key--out::before { background: Highlight; }
}

/* claimed figure at the head of a project's Outcome, and its footnote in the legend */
.facts dd .fig { color: var(--paper); font-weight: 500; }
.facts dd .fig-est { color: var(--paper); }
.legend__figs { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* legend four tags: two by two between phone and desktop widths */
@media (max-width: 1180px) and (min-width: 901px) { .legend__tags { grid-template-columns: repeat(2, minmax(0, 1fr)); } }