/* duc-values.css · /values — "Privacy and data dignity"
   Spec: tasks/design_handoff_web_values/README.md · prototype "WEB values v2.dc.html".
   Tokens come from duc-core.css (§2.3); the chrome (header, footer, ground) is the shared
   partial set. Everything here is this page and nothing else — prefix .duc-val.

   The page is a LONG READ and that is the design: five principles, each a numbered heading,
   an italic statement and body prose, in the same rhythm, never collapsed, truncated,
   carouselled or hidden behind "read more" at any width.

   House rules honoured here: paper is the ground (no cards) · teal marks POSITION only
   (current principle, progress) · mono holds the numbers, the counter and the marginalia,
   never a sentence · no blur anywhere on this page. */

/* This page is blueprint sheet 02 (README §Blueprint ground). The shared ground partial renders its two
   corner marks from these properties; every other page inherits the 01 / DUC-01 defaults in duc-core.css. */
body[data-page="values"]{--ground-n:"02";--ground-id:"DUC-02"}

/* ── the read column ─────────────────────────────────────────────────────── */
/* Identical container to the rest of the WEB set (README §Structure). --rail is the same
   expression; spelled out here because duc-core defines it and this page is the only
   consumer that also needs the max-width and the header offset in one place. */
.duc-val{
  position:relative;z-index:1;
  width:var(--rail);max-width:1180px;margin:0 auto;box-sizing:border-box;
  font-family:var(--font-ui);color:var(--ink);
}

/* ── standfirst · no CTA ─────────────────────────────────────────────────── */
.duc-val__standfirst{padding:clamp(150px,19vh,220px) 0 clamp(44px,6vw,72px);max-width:860px}
.duc-val__kicker{font-size:11px;font-weight:700;letter-spacing:1.6px;color:var(--teal)}
.duc-val__h1{margin:14px 0 0;font-size:clamp(38px,5.2vw,68px);font-weight:800;letter-spacing:-.035em;line-height:1.03;color:var(--ink);text-wrap:pretty}
.duc-val__lede{margin:22px 0 0;max-width:680px;font-size:clamp(18px,1.7vw,21px);line-height:1.6;color:var(--body2);text-wrap:pretty}

/* ── index + principles · ONE flex row that wraps ────────────────────────── */
/* Desktop (≳1100px): the row fits, so the index is a vertical rail beside the read.
   Below that: it wraps, and the index becomes a full-width chip block above the prose.
   Same markup, no breakpoint branch, no JS layout switch. */
.duc-val__row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(28px,4vw,60px);padding-bottom:clamp(56px,8vw,110px)}
.duc-val__prose{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}

/* ── the principle index ─────────────────────────────────────────────────── */
/* The board draws the mono label, the idle numbers and "/ 05" in #9A947F — 2.59:1 on paper, a WCAG
   AA failure axe catches on every one. duc-core's own token note settles it: --mono-1…3 are blueprint
   DECOR (the aria-hidden ground marks keep them), mono TEXT takes --mono-4. The contrast rule wins
   over the board, as it did for the join flow's TODO(LEGAL) badge.
   The paper background is load-bearing: it is what stops the prose scrolling through the
   pinned card once the row has wrapped. */
.duc-val-idx{
  flex:1 1 248px;max-width:100%;min-width:0;box-sizing:border-box;
  position:sticky;top:104px;z-index:2;
  background:var(--paper);border-radius:16px;padding:14px 10px 12px;
  box-shadow:0 0 0 1px rgba(18,22,27,.05);
}
.duc-val-idx__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.duc-val-idx__label{font-size:10px;font-weight:600;letter-spacing:1.4px;color:var(--mono-4)}
.duc-val-idx__count{font-size:11px;font-weight:700;color:var(--teal)}
.duc-val-idx__rail{height:2px;border-radius:999px;background:rgba(18,22,27,.12);margin:10px 0 12px;overflow:hidden}
.duc-val-idx__fill{height:100%;border-radius:999px;background:var(--teal);width:0;transition:width .2s linear}
/* auto-fit does the two shapes on its own: 1 column in the 248px rail, three or four across the
   wrapped block, two on a phone. The board's 168px floor left a phone with ONE chip per line and a
   290px card pinned over the read — 152px is the widest floor that still fits two at 360px. */
.duc-val-idx__items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,152px),1fr));gap:4px}
/* every target ≥44px, at both shapes */
.duc-val-idx__item{
  display:flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;
  padding:0 13px;border-radius:999px;font-size:14.5px;letter-spacing:-.1px;text-decoration:none;
  background:transparent;font-weight:600;color:var(--body3);
  transition:background .25s ease,color .25s ease;
}
.duc-val-idx__n{font-size:12px;font-weight:600;flex:none;color:var(--mono-4)}
.duc-val-idx__item[aria-current]{background:var(--white);box-shadow:0 8px 20px rgba(24,44,84,.10);font-weight:700;color:var(--ink)}
.duc-val-idx__item[aria-current] .duc-val-idx__n{color:var(--teal)}
@media (hover:hover){.duc-val-idx__item:hover{color:var(--ink)}.duc-val-idx__item[aria-current]:hover{color:var(--ink)}}

/* ── the repeating unit · identical for all five ─────────────────────────── */
/* scroll-margin-top clears the fixed header when an anchor is followed. */
.duc-val-p{
  display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,40px);
  padding:clamp(40px,5vw,64px) 0;
  border-top:1px solid rgba(18,22,27,.14);
  scroll-margin-top:110px;
}
.duc-val-p--last{padding-bottom:0}
.duc-val-p__num{flex:0 0 84px;font-size:clamp(26px,2.8vw,34px);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.duc-val-p__of{display:block;font-size:11px;font-weight:600;letter-spacing:1.2px;color:var(--mono-4);margin-top:8px}
.duc-val-p__body{flex:999 1 420px;min-width:0}
.duc-val-p__h{margin:0;font-size:clamp(25px,2.9vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
/* The statement is the scannable layer, not a caption: full ink, italic, its own step in the
   ramp. Not a blockquote and not a caption style (handoff prompt §3.3). */
.duc-val-p__statement{margin:14px 0 0;max-width:740px;font-size:clamp(18px,2vw,24px);font-style:italic;font-weight:500;line-height:1.4;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.duc-val-p__t{margin:18px 0 0;max-width:min(100%,68ch);font-size:17px;line-height:1.72;color:var(--body2);text-wrap:pretty}
.duc-val-p__statement + .duc-val-p__t{margin-top:22px}

/* the marked legal placeholder (README §Legal 1) — mono takes --mono-4 on paper for AA, so the
   warn ink is darkened from the board's #8A6510 only where contrast demands it: it already passes. */
.duc-val-p__flag{
  display:flex;flex-direction:column;gap:3px;margin-top:22px;max-width:560px;
  border:1px dashed rgba(18,22,27,.34);border-radius:8px;padding:11px 13px;
  font-size:10.5px;font-weight:600;letter-spacing:.4px;line-height:1.5;
  color:#8A6510;background:rgba(251,239,211,.42);
}
.duc-val-p__flag-sub{color:var(--mono-4)}

/* the page's ONE CTA, at the end of principle 5 */
.duc-val-p__cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(28px,4vw,40px)}
.duc-val-p__cta{
  min-height:48px;display:inline-flex;align-items:center;gap:9px;padding:0 24px;border-radius:999px;
  background:var(--ink);color:#FFFFFF;font-size:15px;font-weight:600;letter-spacing:-.2px;text-decoration:none;
  transition:background .15s ease;
}
@media (hover:hover){.duc-val-p__cta:hover{background:var(--ink-hover);color:#FFFFFF}}

/* ── blueprint decor · one porthole, the blob, one bird ──────────────────── */
/* Sized and positioned to stay INSIDE the page gutter at every width: the disc is capped by
   7vw and 16vh as well as 128px, and it is pinned to the viewport edge, outside the 1180px
   read column. If it ever lands behind prose, shrink it — never move the prose. */
.duc-val-decor{position:fixed;inset:0;pointer-events:none;z-index:0}
.duc-val-decor *{box-sizing:border-box}
.duc-val-win{
  position:absolute;right:14px;top:16%;
  width:min(128px,7vw,16vh);height:min(128px,7vw,16vh);
  animation:duc-val-winA 34s ease-in-out infinite alternate;
}
.duc-val-win__ring{position:absolute;inset:-18px;border:1px solid rgba(18,22,27,.13);border-radius:50%}
.duc-val-win__tick{position:absolute;background:rgba(18,22,27,.20)}
.duc-val-win__tick--n{left:50%;top:-24px;width:1px;height:11px}
.duc-val-win__tick--w{left:-24px;top:50%;width:11px;height:1px}
.duc-val-win__star{position:absolute;left:-40px;top:-8px;font-size:19px;line-height:normal;color:var(--ink);animation:duc-val-pulse 5s ease-in-out infinite}
/* background-attachment:fixed makes the disc a window onto the viewport sky. The drift animates
   MARGIN, not transform, on purpose: under a transformed ancestor Chromium re-anchors a fixed
   background to the element and `cover` re-scales the whole photo into the disc (the same
   measurement that shaped .duc-story__win — duc-story.css). */
.duc-val-win__disc{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  box-shadow:0 18px 44px rgba(24,44,84,.16);
  background-image:url("/assets/site/sky-clouds.jpg");
  background-image:image-set(url("/assets/site/sky-clouds-600.webp") type("image/webp"),url("/assets/site/sky-clouds.jpg") type("image/jpeg"));
  background-size:cover;background-position:center;background-attachment:fixed;
}
/* Both sit in the page gutter, not over the read column: the board's left:min(6.5%,…) and right:16%
   put the blob under the index card's left edge and the bird on top of principle-1's body text at
   1440. Same intent, moved outward — decor never lands behind prose (handoff prompt §3.7). */
.duc-val-blob{position:absolute;left:min(4%,max(1.5%,50% - 640px));top:62%;width:min(72px,4.6vw);height:auto;transform:scaleX(-1) rotate(-4deg);opacity:.9}
.duc-val-bird{position:absolute;right:min(5.5%,max(1.5%,50% - 640px));top:80%;opacity:.7}

@keyframes duc-val-winA{0%{margin:0}45%{margin:24px 20px 0 0}100%{margin:-8px -10px 0 0}}
@keyframes duc-val-pulse{0%,100%{opacity:.35}50%{opacity:.9}}

/* Nothing else on this page animates on scroll, so reduced motion has only these two to kill. */
@media (prefers-reduced-motion:reduce){
  .duc-val-win,.duc-val-win__star{animation:none}
  .duc-val-idx__fill{transition:none}
  .duc-val-idx__item{transition:none}
}

/* Paint-only, at the width the flex row wraps (248 + 560 + the ~44px gap, plus the container's
   gutters). The index is still ONE component with no layout branch — this closes the 16px slot
   between the fixed header (88px) and the pinned card (top:104px) that the prose would otherwise
   be seen sliding through. Not applied wider, where the card sits beside the prose and the bleed
   would clip the start of the SECTION marginalia instead. */
@media (max-width:1085px){
  .duc-val-idx::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;background:var(--paper)}
}

/* ── narrow ──────────────────────────────────────────────────────────────── */
/* The porthole leaves at 700px: below that the gutter is 24px and there is no room outside the
   read column for it. The grid and the marks (duc-core) carry the blueprint on a phone. */
/* 860px is where the gutter stops being wide enough to hold the furniture: between 700 and ~723 the
   container's clamp collapses the margin to 24px, and the blob would cross back over the column. */
@media (max-width:860px){
  .duc-val-win,.duc-val-blob,.duc-val-bird{display:none}
  /* The axis marks sit 24px from each edge, which IS the prose inset once the container's gutter
     collapses — they land on the body text. Hidden the way home and join hide theirs (duc-core §6);
     the pinned chip block is the position indicator on a phone, so nothing is lost. */
  body[data-page="values"] .duc-ground__mark{display:none}
  .duc-val-p__num{flex:0 0 100%}
  .duc-val-p__of{display:inline;margin:0 0 0 8px}
}