/* Hallmark v2.0.0 · theme: parlor (by request, user named: keep the original style) with spore as the base, kiln for the dial, terminal for the tools session, darkroom for the draft pick · shape: Dial with Two doors · hero: Centred, the gold crest in twelve amber hours and fine rays over a green glow, between two of the portfolio's lamp posts · job: send a brief · nav: edge-aligned crest wordmark, four links, one button · footer: crest, wordmark and one row of links · posture: committed · signature: the four steps on a working dial, after the two halves shown side by side · genre: atmospheric */
/* critique: Parlor's ground, Cormorant heads, amber for Design and brass for Tools all stay; the page now shows the work before the process, and the rings finally do something */
/* Hallmark · waive 37 · the mono appears only inside the Tools session and its comments · Cormorant, Spectral and Karla are the Parlor faces already live across the site and stay */
/* Hallmark · waive 80 · the drawn object is the portfolio's own GasLamp, copied from motifs.jsx at build time, not a new illustration · the lamp post is Carter's mark across both sites and he asked for it here */
/* Hallmark · waive 6b · the stamp declares hero: Centred and the headline, lede and both actions fit at 1280 by 800 · the medallion between two lamp posts is a symmetrical gateway Carter chose from five hero options */

/* cargroff-design.css — The Scaffold, by Carter Groff (scaffold.cargroff.com).
   Self-contained: the Parlor tokens and base rules it needs are copied here
   from parlor.css (shared with the Back Room pages), so this page no longer
   loads parlor.css. Page order: hero on wood with the medallion between two
   lamp posts, the two halves, How it works on a dial, the services shelf,
   who, the brief, FAQ. See DECISIONS.md. */

/* Parlor tokens (parlor.css / themes.jsx); --ink-mute is the portfolio's AA value */
:root {
  --bg: #1a120b; --bg-soft: #221710; --bg-deep: #0f0a06; --bg-warm: #2a1c11; --card: #241810;
  --ink: #ecd9b2; --ink-soft: #c9b48a; --ink-mute: #9a8462; --ink-dim: #5a4a36;
  --amber: #d99a3d; --amber-lit: #f5cd6a;
  --rule: rgba(236,217,178,.16); --rule-strong: rgba(236,217,178,.32);
  --display: "Cormorant Garamond", Georgia, serif; --body: "Spectral", Georgia, serif; --ui: "Karla", "Spectral", system-ui, sans-serif;
  --page-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.85  0 0 0 0 0.55  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

:root {
  --brass: #c2a46a; --brass-lit: #e0c88f;
  --brass-wash: rgba(194,164,106,.12); --brass-edge: rgba(194,164,106,.45);
  --amber-wash: rgba(217,154,61,.12); --amber-tick: rgba(245,205,106,.5);
  --wood-seam: rgba(0,0,0,.35); --wood-hi: rgba(236,217,178,.025);
  --wood-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='12'><filter id='g'><feTurbulence baseFrequency='0.02 0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  --candle-glow: rgba(217,154,61,.32); --candle-edge: rgba(217,154,61,.06);
  --fog-1: rgba(230,222,205,.30); --fog-2: rgba(205,196,176,.15);
  --vignette-1: rgba(8,5,2,.55); --vignette-2: rgba(8,5,2,.85);
  --medal-band: #160f09; --medal-dash: rgba(245,205,106,.28);
  --enamel-hi: #2f5640; --enamel-lo: #12261b; --gold-hi: #f8dc8e; --sheen: #fff6dc;
  --wash-0: rgba(56,104,76,.85); --wash-1: rgba(36,72,52,.34); --wash-2: rgba(18,38,27,0);
  --seal-ink: rgba(236,217,178,.22); --seal-word: rgba(236,217,178,.5);
  --nav-bg: rgba(15,10,6,.92); --well: rgba(15,10,6,.6); --on-ink: #1a120b; --mask: #000; --mask-on: #fff;
  --terracotta: #b8643f;
  --d1-bg: #f3e6c8; --d1-ink: #3a2414; --d1-acc: #8a4b2a;
  --d2-bg: #2f4a3a; --d2-ink: #f5e9cf;
  --d3-bg: #d9773f; --d3-ink: #1b120b;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--amber-lit); }
::selection { background: var(--amber); color: var(--on-ink); }
.p-grain::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; background-image: var(--page-grain); background-size: 220px 220px; mix-blend-mode: overlay; opacity: .1; }
.cgd { overflow-x: clip; }
.cgd :focus-visible { outline: 2px solid var(--amber-lit); outline-offset: 3px; }
.dwrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 56px); }

/* Parlor's square button: one primary (ink) and one ghost, sentence case, no glow */
.p-btn { display: inline-flex; align-items: center; font-family: var(--ui); font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; padding: 0 24px; min-height: 48px; text-decoration: none; color: var(--on-ink); background: var(--ink); border: 1px solid var(--ink); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, transform .2s; }
.p-btn:hover { background: var(--amber-lit); border-color: var(--amber-lit); color: var(--on-ink); }
.p-btn:active { transform: translateY(1px); }
.p-btn:disabled, .p-btn:disabled:hover { background: transparent; border-color: var(--rule-strong); color: var(--ink-mute); cursor: not-allowed; }
.p-btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.p-btn.ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

.dk { display: block; font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--amber); }
.dauto .dk { color: var(--brass); }

/* ── nav ── */
.dnav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); border-bottom: 1px solid var(--rule); }
.dnavin { max-width: 1180px; margin: 0 auto; padding: 16px clamp(16px, 5vw, 56px); display: flex; align-items: center; gap: 24px; }
.dbrand { display: flex; align-items: center; gap: 12px; flex: none; }
.dbrand img { width: 28px; height: auto; opacity: .92; }
.dbrand b { font-family: var(--display); font-size: 19px; font-weight: 500; }
.dsub { display: block; font-family: var(--ui); font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.dnavlinks { display: none; gap: 24px; margin-left: auto; }
.dnavlinks a { font-family: var(--ui); font-size: 15px; font-weight: 500; color: var(--ink-soft); padding: 4px 0; background: linear-gradient(var(--amber), var(--amber)) left bottom / 0% 1px no-repeat; transition: background-size .3s cubic-bezier(.16, 1, .3, 1), color .2s; }
.dnavlinks a:hover { background-size: 100% 1px; }
.dnavlinks a:hover { color: var(--ink); }
.dnav .p-btn { margin-left: auto; min-height: 44px; padding: 0 20px; }
@media (min-width: 900px) { .dnavlinks { display: flex; } .dnav .p-btn { margin-left: 0; } }

/* ── wood panels: the portfolio's room, 34px boards and a sawn grain ── */
/* ── wood panels: the portfolio's own .cg-wood (themes.jsx), unchanged ── */
.dpanel { position: relative; isolation: isolate; color: var(--ink); background-color: var(--bg);
  background-image: repeating-linear-gradient(to right, transparent 0, transparent 33px, var(--wood-seam) 33px, var(--wood-seam) 34px, var(--wood-hi) 34px, var(--wood-hi) 35px, transparent 35px, transparent 68px); }
.dpanel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--wood-grain); opacity: .3; mix-blend-mode: multiply; }
.dsection.dwood.dpanel { background-color: var(--bg-warm); }

/* ── hero: the medallion between two lamp posts, on the wood ── */
.dhero { overflow: hidden; display: flex; align-items: center; min-height: min(calc(100svh - 77px), 820px); padding: clamp(40px, 5vw, 64px) 0; text-align: center; }
/* the portfolio hero's light: candle pools at the lamps, rolling fog, a deep vignette */
.dhero-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 50% 30%, transparent 0%, var(--vignette-1) 70%, var(--vignette-2) 100%); }
.dhero-fog { position: absolute; z-index: 1; left: -30%; right: -30%; height: 460px; pointer-events: none; filter: blur(46px); mix-blend-mode: screen; background: radial-gradient(ellipse 50% 100% at 50% 50%, var(--fog-1) 0%, var(--fog-2) 40%, transparent 70%); animation: dfog-roll 30s linear infinite; }
@keyframes dfog-roll { 0% { transform: translateX(85%); opacity: 0; } 14% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(-95%); opacity: 0; } }
.dhero-candle { position: absolute; z-index: 0; left: 50%; top: 11.3%; width: 720px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--candle-glow) 0%, var(--candle-edge) 40%, transparent 70%); mix-blend-mode: screen; animation: dcandle 7s ease-in-out infinite; transition: opacity .5s ease; }
@keyframes dcandle { 0%, 100% { opacity: 1; } 45% { opacity: .95; } 48% { opacity: .78; } 52% { opacity: .92; } 70% { opacity: .88; } }
.dhero-lamp.out .dhero-candle { opacity: .08; animation: none; }
.dhero-lamp { position: absolute; z-index: 3; bottom: 0; height: min(96%, 860px); aspect-ratio: 200 / 900; pointer-events: none; }
.dhero-lamp.l { left: max(8px, calc(50% - 500px)); }
.dhero-lamp.r { right: max(8px, calc(50% - 500px)); }
.dhero-lamp svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.dhero-in { position: relative; z-index: 4; width: 100%; pointer-events: none; }
.dhero-in > * { pointer-events: auto; }
.dhero-medal { width: min(360px, 70vw, 38svh); margin: 0 auto 20px; }
.dmedal { display: block; width: 100%; height: auto; overflow: visible; }
.dm-band { fill: var(--medal-band); }
.dm-rule { fill: none; stroke: var(--seal-ink); stroke-width: 1.2; }
.dm-rule.gold { stroke: var(--amber); stroke-width: 2; }
.dm-rule.dashed { stroke: var(--medal-dash); stroke-dasharray: 2 7; }
.dm-ticks line { stroke: var(--seal-ink); stroke-width: 1.2; }
.dm-ticks line.major { stroke: var(--amber); stroke-width: 2; }
.dm-enamel { fill: url(#dm-enamel); }
.dm-enamel-hi { stop-color: var(--enamel-hi); }
.dm-enamel-lo { stop-color: var(--enamel-lo); }
.dm-gold-hi { stop-color: var(--gold-hi); }
.dm-gold-lo { stop-color: var(--amber); }
/* medallion motion: spin up on load, then a slow turn; the rim breathes with
   the lamps, a ring ripples out, and light passes over the gold crest */
.dm-spin-in, .dm-spin, .dm-spin-back, .dm-ripple { transform-box: view-box; transform-origin: 50% 50%; }
.dm-spin-in { animation: dm-spinin 2.6s cubic-bezier(.16, 1, .3, 1) both; }
/* the hero mark: twelve amber hours over a soft green glow */
.dm-wash { animation: dm-wash 6s ease-in-out infinite; }
.dm-wash-0 { stop-color: var(--wash-0); } .dm-wash-1 { stop-color: var(--wash-1); } .dm-wash-2 { stop-color: var(--wash-2); }
.dm-hour { stroke: var(--amber); stroke-width: 3; stroke-linecap: round; opacity: .35; animation: dm-hour 6s ease-in-out infinite; }
.dm-hour.big { stroke-width: 4.5; }
@keyframes dm-hour { 0%, 100% { opacity: .35; } 8% { opacity: 1; stroke: var(--amber-lit); } 25% { opacity: .35; } }
@keyframes dm-wash { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
/* the rays: fine light reaching out between the hours, turning very slowly */
.dm-rays { transform-box: view-box; transform-origin: 50% 50%; animation: dm-turn 360s linear infinite; }
.dm-ray { animation: dm-wash 6s ease-in-out infinite; }
.dm-ray-0 { stop-color: var(--amber); stop-opacity: .5; } .dm-ray-1 { stop-color: var(--amber); stop-opacity: 0; }
.dm-fade-0 { stop-color: var(--mask-on); } .dm-fade-1 { stop-color: var(--mask); }
/* when a lamp is snuffed, the shared lamp drawing shows a blurred "relight" oval; hide it here */
.dhero-lamp ellipse[style*="blur"] { display: none; }
.dm-spin { animation: dm-turn 140s linear infinite; }
.dm-spin.slow { animation-duration: 220s; }
.dm-spin-back { animation: dm-turnback 110s linear infinite; }
.dm-rule.gold { animation: dm-breathe 6s ease-in-out infinite; }
.dm-ripple { fill: none; stroke: var(--amber-lit); stroke-width: 3; opacity: 0; animation: dm-ripple 6s cubic-bezier(.16, 1, .3, 1) 2.2s infinite; }
.dm-ripple.two { animation-delay: 5.2s; }
.dm-sheen { animation: dm-sheen 8s cubic-bezier(.45, 0, .25, 1) 2.4s infinite both; }
.dm-sheen-0 { stop-color: var(--sheen); stop-opacity: 0; }
.dm-sheen-1 { stop-color: var(--sheen); stop-opacity: .8; }
@keyframes dm-spinin { from { transform: rotate(-220deg); } to { transform: rotate(0deg); } }
@keyframes dm-turn { to { transform: rotate(360deg); } }
@keyframes dm-turnback { to { transform: rotate(-360deg); } }
@keyframes dm-breathe { 0%, 100% { stroke: var(--amber); } 50% { stroke: var(--amber-lit); } }
@keyframes dm-ripple { 0% { transform: scale(1); opacity: .75; } 80% { opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } }
.dm-ticks line.major { animation: dm-breathe 6s ease-in-out infinite; }
@keyframes dm-sheen { 0% { transform: translateX(-160px); } 30%, 100% { transform: translateX(420px); } }
.js .dlive.idle .dm-hour, .js .dlive.idle .dm-wash, .js .dlive.idle .dm-rays, .js .dlive.idle .dm-ray, .js .dlive.idle .dm-spin, .js .dlive.idle .dm-spin-back, .js .dlive.idle .dm-ripple, .js .dlive.idle .dm-sheen, .js .dlive.idle .dm-rule.gold, .js .dlive.idle .dm-ticks line.major { animation-play-state: paused; }
.dhero h1.ddisplay { font-size: clamp(40px, 5vw, 70px); line-height: 1; max-width: 10em; margin: 0 auto; text-wrap: balance; }
.dhero .ddeck { margin: 20px auto 0; max-width: 28em; }
.dhero .dacts { justify-content: center; margin-top: 32px; }
@media (max-width: 899px) {
  /* on a phone only the top of each lamp shows: globe and upper pole, cut off below */
  .dhero { padding: 44px 0 40px; }
  .dhero-lamp { top: 0; bottom: auto; height: 260px; width: 340px; aspect-ratio: auto; overflow: hidden; -webkit-mask-image: linear-gradient(var(--mask) 0, var(--mask) 190px, transparent 260px); mask-image: linear-gradient(var(--mask) 0, var(--mask) 190px, transparent 260px); }
  .dhero-lamp.l { left: max(-142px, calc(50% - 320px)); } .dhero-lamp.r { right: max(-142px, calc(50% - 320px)); }
  .dhero-lamp svg { width: 112px; height: 504px; margin: 20px auto 0; }
  .dhero-medal { width: 180px; margin-bottom: 24px; }
  .dhero-candle { width: 300px; top: 77px; }
  .dhero-in { padding: 0 24px; }
}
.dcrest { width: 52px; margin: 0 auto 24px; opacity: .85; }
.dcrest img { width: 100%; display: block; }
.ddisplay { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; line-height: 1.02; margin: 0; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.ddeck { max-width: 30em; margin: 24px auto 0; font-family: var(--body); font-style: italic; font-size: 19px; color: var(--ink-soft); line-height: 1.55; }
.dacts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }


/* ── sections ── */
.dsection { position: relative; padding: clamp(72px, 10vw, 120px) 0; color: var(--ink); }
/* each section climbs a different rung: soft ground, wood, plain, wood, deep, soft; the gaps vary too */
.dsection.dsoft { background-color: var(--bg-soft); color: var(--ink); }
.dsection.dplain { background-color: var(--bg); color: var(--ink); }
#doors { padding: clamp(80px, 11vw, 128px) 0 clamp(72px, 9vw, 104px); }
#how { overflow: hidden; padding: clamp(80px, 10vw, 112px) 0 clamp(88px, 11vw, 128px); }
#make { padding: clamp(88px, 12vw, 144px) 0 clamp(72px, 9vw, 112px); }
#why { overflow: hidden; padding: clamp(80px, 10vw, 120px) 0 clamp(96px, 12vw, 144px); }
#brief { padding: clamp(88px, 11vw, 136px) 0 clamp(80px, 10vw, 120px); }
#faq { padding: clamp(72px, 9vw, 104px) 0 clamp(88px, 11vw, 128px); }
/* the hero's lamplight carried down onto the wood */
.dsec-candle { position: absolute; z-index: 0; top: 50%; right: -8%; width: 820px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; transform: translateY(-50%); background: radial-gradient(circle, var(--candle-glow) 0%, var(--candle-edge) 40%, transparent 70%); mix-blend-mode: screen; opacity: .55; }
.dsec-candle.left { right: auto; left: -14%; top: 40%; opacity: .7; }
.dsection > .dwrap { position: relative; z-index: 1; }
.dsection.ddeep { background: var(--bg-deep); color: var(--ink); }
.dshead { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.dsection h2.ddisplay { font-size: clamp(36px, 4.6vw, 56px); text-wrap: balance; }
.dp { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.dduo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
@media (min-width: 900px) { .dduo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }

/* ── the two halves ── */
.ddoor { display: flex; flex-direction: column; gap: 20px; }
.ddoor h3.ddisplay { font-size: clamp(28px, 3.2vw, 38px); }
.dcap { font-size: 15px; font-style: italic; color: var(--ink-mute); line-height: 1.55; }
.ddoor > p:last-child { margin: 4px 0 0; }
.dsheet { background: var(--bg-deep); border: 1px solid var(--rule); padding: clamp(16px, 2.4vw, 24px); }
.dhv-drafts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dprint { appearance: none; padding: 0; margin: 0; border: 1px solid var(--rule); background: var(--bg-soft); cursor: pointer; text-align: left; font: inherit; color: inherit; opacity: .66; transition: opacity .2s, border-color .2s, box-shadow .2s, transform .2s; }
.dprint:hover { opacity: .9; }
.dprint:active { transform: translateY(1px); }
.dprint[aria-pressed="true"] { opacity: 1; border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.dprint-n { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--rule); font-family: var(--display); font-size: 26px; line-height: 1; color: var(--ink-mute); }
.dprint-n small { font-family: var(--ui); font-size: 13px; color: var(--amber); visibility: hidden; }
.dprint[aria-pressed="true"] .dprint-n { color: var(--amber-lit); }
.dprint[aria-pressed="true"] .dprint-n small { visibility: visible; }
.dhv-d { aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; overflow: hidden; }
.dhv-d span { line-height: .95; }
.dhv-d i { font-style: normal; font-family: var(--ui); font-size: 12px; }
.dhv-d.d1 { background: var(--d1-bg); color: var(--d1-ink); font-family: var(--display); font-style: italic; font-size: clamp(18px, 2.2vw, 28px); }
.dhv-d.d1 i { color: var(--d1-acc); }
.dhv-d.d2 { background: var(--d2-bg); color: var(--d2-ink); font-family: var(--ui); font-weight: 600; font-size: clamp(12px, 1.3vw, 16px); justify-content: center; text-align: center; gap: 8px; }
.dhv-d.d3 { background: var(--d3-bg); color: var(--d3-ink); font-family: var(--body); font-size: clamp(18px, 2.2vw, 28px); }
.dhv-d.d3 b { font-weight: 500; }
.dsession { flex: 1; display: flex; align-items: center; background: var(--bg-deep); border: 1px solid var(--brass-edge); padding: clamp(20px, 3vw, 32px); font-family: var(--mono); font-size: 14px; line-height: 2; color: var(--ink-soft); min-height: 240px; }
.dsession ol { list-style: none; margin: 0; padding: 0; }
.dsession li { display: grid; grid-template-columns: 2em minmax(0, 1fr); transition: opacity .35s, transform .35s; }
.js .dsession li { opacity: 0; transform: translateY(4px); }
.js .dsession.on li { opacity: 1; transform: none; }
.dsp { color: var(--brass-lit); }
.dsc { color: var(--ink-mute); }
.dcursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--brass-lit); animation: dblink 1.1s steps(1) infinite; }
@keyframes dblink { 50% { opacity: 0; } }

/* ── How it works: the dial ── */
.ddialwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
@media (min-width: 900px) { .ddialwrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; } }
/* the seal: flat hairlines in Parlor ink, the step names engraved round the
   ring, the crest at the centre, one amber lozenge that travels to the step */
.ddial { width: min(100%, 500px); margin: 0 auto; }
.ddial svg { display: block; width: 100%; height: auto; overflow: visible; }
.dseal-rule { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.dseal-dot { fill: var(--ink-dim); }
.dseal-name { cursor: pointer; }
.dseal-name text { font-family: var(--display); font-size: 21px; font-weight: 500; letter-spacing: 0; fill: var(--ink-mute); transition: fill .3s; }
.dseal-name:hover text { fill: var(--ink); }
.dseal-name.on text { fill: var(--amber-lit); }
.dseal-track { fill: none; stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 6; }
.dseal-done { fill: none; stroke: var(--amber); stroke-width: 2; transition: stroke-dashoffset .8s cubic-bezier(.3,.7,.2,1); }
.dseal-stop { cursor: pointer; }
.dseal-stop rect { fill: var(--bg-warm); stroke: var(--ink-mute); stroke-width: 1; transition: fill .3s, stroke .3s; }
.dseal-stop.done rect { fill: var(--amber); stroke: var(--amber); }
.dseal-stop text { font-family: var(--display); font-size: 22px; font-weight: 500; fill: var(--ink-mute); transition: fill .3s; }
.dseal-stop.done text { fill: var(--ink-soft); }
.dseal-stop:hover text { fill: var(--ink); }
.dseal-mark { transform-origin: 200px 200px; transition: transform .8s cubic-bezier(.3,.7,.2,1); pointer-events: none; }
.dseal-mark rect { fill: none; stroke: var(--amber-lit); stroke-width: 1.5; }
.dseal-mark rect { animation: dseal-pulse 2.8s ease-in-out infinite; }
@keyframes dseal-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }
.dseal-crest { opacity: .55; }
.dsteplist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.dsteplist li { border-bottom: 1px solid var(--rule); }
.dsteplist button { display: flex; align-items: baseline; gap: 20px; width: 100%; padding: 16px 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink-soft); transition: color .2s; }
.dsteplist button:hover { color: var(--ink); }
.dstep-n { font-family: var(--display); font-size: 26px; line-height: 1; color: var(--ink-mute); min-width: 1em; }
.dstep-t { font-family: var(--display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 500; line-height: 1.1; }
.dsteplist li.on button { color: var(--ink); }
.dsteplist li.on .dstep-n { color: var(--amber); }
.dsteplist p { margin: 0; padding: 0 0 20px calc(1em + 20px); font-size: 17px; line-height: 1.65; color: var(--ink-soft); }

/* ── the shelf ── */
.dmake { align-items: start; }
/* on a phone the two lists sit behind a Design | Tools switch */
.dmaketabs { display: none; }
@media (max-width: 899px) {
  .dmaketabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: -12px 0 28px; }
  .dmake.show-design .dhalf-sec.dauto, .dmake.show-automation .dhalf-sec:not(.dauto) { display: none; }
  .dmake .dhalf-sec { animation: dshelf-in .35s cubic-bezier(.16, 1, .3, 1); }
  .dmake .dhalf-sec .dk { display: none; }
  .dmake .dhalf-sec h3.ddisplay { margin-top: 0; }
}
@keyframes dshelf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dhalf-sec h3.ddisplay { font-size: clamp(28px, 3.2vw, 38px); margin: 8px 0 0; }
.dhalf-sec .dp { max-width: 44ch; }
.dhalf-sec.dauto { --amber: var(--brass); --amber-lit: var(--brass-lit); }
.dlist { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.dlist li a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.dlist-main { min-width: 0; }
.dlist b { display: block; font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.dlist-main > span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-soft); }
.dlist li a:hover b { color: var(--amber-lit); }
.dturn { flex: none; display: grid; justify-items: end; gap: 2px; font-style: normal; font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--amber); text-align: right; }
.dprice { color: var(--ink); }
.dworkhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 64px; flex-wrap: wrap; }
.dworkhead h3 { font-family: var(--display); font-size: 24px; font-weight: 500; margin: 0; }
.dsamples { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 20px; }
.dslot { margin: 0; border: 1px solid var(--rule); background: var(--bg-soft); }
.dslot img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.dslot figcaption { padding: 12px; font-size: 14px; color: var(--ink-soft); }

/* ── who ── */
.dwhyhead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 860px) { .dwhyhead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; } }
.dportrait { display: block; width: 100%; max-width: 460px; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--rule-strong); filter: sepia(.18) contrast(1.03) brightness(.92); }
.dwhyhead .dp { max-width: 42ch; }
.drules-k { margin-top: 36px; }
.drules { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.drules li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.drules b { font-family: var(--display); font-size: 32px; font-weight: 500; line-height: 1; color: var(--amber); }
.drules span { font-family: var(--display); font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; line-height: 1.15; color: var(--ink); }
.dquotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 48px; }
.dquotes blockquote { margin: 0; padding-left: 20px; border-left: 2px solid var(--amber); }
.dquotes p { font-family: var(--body); font-style: italic; font-size: 17px; color: var(--ink); margin: 0; }
.dquotes cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; color: var(--ink-mute); }

/* ── FAQ ── */
.dfaqgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
@media (min-width: 900px) { .dfaqgrid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; } .dfaqgrid .dshead { position: sticky; top: 120px; margin-bottom: 0; } }
.dfaq { border-top: 1px solid var(--rule); }
.dfaq details { border-bottom: 1px solid var(--rule); padding: 20px 0; }
.dfaq summary { cursor: pointer; list-style: none; font-family: var(--display); font-size: 24px; font-weight: 500; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; }
.dfaq summary::-webkit-details-marker { display: none; }
.dfaq summary::after { content: '+'; color: var(--amber); font-family: var(--ui); }
.dfaq details[open] summary::after { content: '–'; }
.dfaq p { margin: 12px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 64ch; }

/* ── the brief ── */
#brief { position: relative; overflow: hidden; text-align: center; }
#brief.dauto { --amber: var(--brass); --amber-lit: var(--brass-lit); }
/* the original brief's composition: centred, with the engraved ring turning behind the heading */
.dbrief-ring { position: absolute; z-index: 0; left: 50%; top: clamp(8px, 3vw, 40px); width: min(720px, 150vw); height: auto; transform: translateX(-50%); pointer-events: none; opacity: .6; overflow: visible; -webkit-mask-image: linear-gradient(var(--mask) 45%, transparent 70%); mask-image: linear-gradient(var(--mask) 45%, transparent 70%); }
.dbrief-glow { position: absolute; z-index: 0; left: 50%; top: clamp(-120px, -8vw, -40px); width: 900px; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(circle, var(--candle-glow) 0%, var(--candle-edge) 40%, transparent 70%); mix-blend-mode: screen; opacity: .55; }
.dbriefwrap { position: relative; z-index: 1; }
.dbriefhead { max-width: 34em; margin: 0 auto; padding-top: clamp(64px, 9vw, 120px); }
.dbrief-crest { display: block; width: 48px; height: auto; margin: 0 auto 20px; opacity: .85; }
#brief h2.ddisplay { font-size: clamp(44px, 6vw, 80px); }
#brief .ddeck { margin: 16px auto 0; }
.dbriefmeta { margin: 16px auto 0; max-width: 34em; font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--ink-mute); }
#brief .dlanes, #brief .dprog, #brief .dform { margin-left: auto; margin-right: auto; text-align: left; }
.dlanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 32px 0 0; max-width: 640px; }
.dlane { background: none; border: 1px solid var(--rule-strong); color: var(--ink-soft); font-family: var(--ui); font-size: 16px; font-weight: 500; padding: 12px; cursor: pointer; min-height: 48px; transition: background-color .2s, border-color .2s, color .2s; }
.dlane:hover { color: var(--ink); }
.dlane + .dlane { border-left: none; }
.dlane.on { background: var(--amber-wash); border-color: var(--amber); color: var(--amber-lit); }
.dlane.auto.on { background: var(--brass-wash); border-color: var(--brass); color: var(--brass-lit); }
.dhp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.dfile { border-bottom: none !important; font-family: var(--ui) !important; font-size: 15px !important; color: var(--ink-soft) !important; }
.dref { margin-top: 12px; font-family: var(--ui); font-size: 15px; color: var(--amber-lit); }
.dprog { max-width: 640px; margin: 32px 0 0; }
.dprogrow { display: flex; justify-content: space-between; gap: 12px; font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--ink-mute); flex-wrap: wrap; }
.dprogrow span:first-child { color: var(--amber); }
.dprogbars { display: flex; gap: 8px; margin-top: 12px; }
.dprogbars i { flex: 1; height: 2px; background: var(--rule); }
.dprogbars i.done { background: var(--amber); }
.dform { max-width: 640px; margin: 28px 0 0; }
.dmv { animation: dmvin .5s ease both; }
@keyframes dmvin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dfields { display: grid; gap: 24px; margin-top: 24px; }
.dfields.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dfl { display: block; min-width: 0; }
.dlb { display: block; font-family: var(--ui); font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.dlb i { font-style: normal; font-size: 13px; color: var(--amber); margin-left: 8px; }
.dhint { display: block; font-size: 14px; color: var(--ink-mute); margin-top: 4px; }
.dfl input, .dfl textarea { width: 100%; min-width: 0; background: none; border: none; border-bottom: 1px solid var(--rule-strong); border-radius: 0; font-family: var(--body); font-size: 18px; color: var(--ink); padding: 8px 0; resize: none; margin-top: 4px; caret-color: var(--amber); transition: border-color .2s; }
.dfl input:hover, .dfl textarea:hover { border-bottom-color: var(--ink-soft); }
.dfl input:focus-visible, .dfl textarea:focus-visible { outline: none; border-bottom-color: var(--amber-lit); box-shadow: 0 1px 0 var(--amber-lit); }
.dfl input::placeholder, .dfl textarea::placeholder { color: var(--ink-mute); font-style: italic; opacity: 1; }
.dqlb { display: block; font-family: var(--ui); font-size: 15px; font-weight: 500; color: var(--ink-soft); margin-bottom: 12px; }
.dchips { display: flex; flex-wrap: wrap; gap: 8px; }
.dchip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--rule-strong); cursor: pointer; font-family: var(--ui); font-size: 15px; font-weight: 500; color: var(--ink-soft); transition: border-color .2s, color .2s, background-color .2s; }
.dchip:hover { color: var(--ink); border-color: var(--ink-soft); }
.dchip:has(input:focus-visible) { outline: 2px solid var(--amber-lit); outline-offset: 2px; }
.dchip input { position: absolute; opacity: 0; pointer-events: none; }
.dchip.on { color: var(--amber-lit); border-color: var(--amber); background: var(--amber-wash); }
.dchoices { display: flex; flex-direction: column; gap: 12px; }
.dchoice { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-family: var(--ui); font-size: 15px; color: var(--ink-soft); }
.dchoice:has(input:focus-visible) { outline: 2px solid var(--amber-lit); outline-offset: 4px; }
.dchoice input { position: absolute; opacity: 0; pointer-events: none; }
.dchoice.on { color: var(--amber-lit); }
.dchoice::before { content: ''; width: 8px; height: 8px; background: var(--ink-dim); transform: rotate(45deg); flex: none; }
.dchoice.on::before { background: var(--amber-lit); }
.ddatewrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.ddatewrap input[type=date] { max-width: 220px; width: auto; color-scheme: dark; }
.dflex { position: relative; display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui); font-size: 15px; color: var(--ink-mute); cursor: pointer; }
.derr { margin-top: 20px; font-family: var(--ui); font-size: 15px; color: var(--terracotta); }
.dwalk { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 36px; }
.dback { background: none; border: none; cursor: pointer; font-family: var(--ui); font-size: 15px; font-weight: 500; color: var(--ink-mute); padding: 12px 0; min-height: 44px; transition: color .2s; }
.dback:hover { color: var(--ink); }
.dfine { flex: 1; min-width: 180px; font-size: 15px; color: var(--ink-mute); margin: 0; }
.dsent { max-width: 46ch; margin: 0 auto; padding: 40px 0; text-align: center; }
.dsent .ddisplay { font-size: 40px; }
.dsent .dp { margin-top: 16px; }

/* ── footer ── */
.dfooter { padding: 56px 0; border-top: 1px solid var(--rule); }
.dfootin { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.dfootin .dcrest { margin: 0; }
.dfootlinks { display: flex; gap: 12px 24px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.dfootlinks a, .dfootlinks span { font-family: var(--ui); font-size: 15px; font-weight: 500; color: var(--ink-mute); }
.dfootlinks a:hover { color: var(--ink); }
.dfootsub { color: var(--ink-mute); font-size: 16px; margin: 8px 0 0; font-style: italic; }

/* ── scroll reveal: hidden only once the page's script has set html.js ── */
/* the drafts are dealt onto the sheet the first time it comes into view */
.js .dsheet.up .dprint { transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .5s ease, border-color .2s, box-shadow .2s; }
.js .dsheet.up:not(.shown) .dprint { opacity: 0; transform: translateY(32px) rotate(var(--deal-r, 0deg)); }
.dsheet .dprint:nth-child(1) { --deal-r: -7deg; }
.dsheet .dprint:nth-child(3) { --deal-r: 7deg; }
.js .dsheet.up.shown .dprint:nth-child(2) { transition-delay: .1s, .1s, 0s, 0s; }
.js .dsheet.up.shown .dprint:nth-child(3) { transition-delay: .2s, .2s, 0s, 0s; }

@media (max-width: 760px) {
  .dfields.two { grid-template-columns: minmax(0, 1fr); }
  .dnavin { gap: 16px; }
  .dprint-n small { display: none; }
}
@media (max-width: 899px) { .ddial { order: 2; width: min(100%, 360px); } }

@media (prefers-reduced-motion: reduce) {
  .dcursor, .dmv, .dhero-fog, .dhero-candle { animation: none; }
  .dsession li, .js .dsession li, .js .dsheet.up .dprint { opacity: 1; transform: none; transition: none; }
  .js .dsheet.up .dprint:not([aria-pressed="true"]) { opacity: .66; }
  .dm-spin-in, .dm-spin, .dm-spin-back, .dm-ripple, .dm-sheen, .dm-rule.gold, .dm-ticks line.major, .dseal-mark rect, .dhalf-sec { animation: none; }
  .dm-ripple { opacity: 0; }
  .dm-hour, .dm-wash, .dm-rays, .dm-ray { animation: none; }
  .dm-hour { opacity: .7; }
  .dseal-done, .dseal-mark, .dprint, .dlane, .dchip { transition: none; }
}