/* Candidate 10 — one publication voice for the chrome; composed reading at laptop and desktop widths.
   Loaded last on all 13 pages, after qd-fonts-09.css and qd-finish-07.css. Replaces qd-desktop-08.css and qd-review-09.css.
   No story prose, order, artwork files or identity geometry are changed here. The <=600px consent bar is retained. */

/* ---------- chrome faces (same local files as the stories) ---------- */
@font-face{font-family:QD Interface;src:url('reading/shared/fonts/inter-latin-400-normal.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:QD Interface;src:url('reading/shared/fonts/inter-latin-500-normal.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:QD Editorial;src:url('reading/shared/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:QD Editorial;src:url('reading/shared/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:QD Label;src:url('reading/shared/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}

:root{--qd10-ui:'QD Interface',"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--qd10-ed:'QD Editorial',"EB Garamond",Georgia,serif;--qd10-label:'QD Label',"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}

/* ---------- publication navigation: one quiet line on every page ---------- */
.qd-edition-nav,.qd-home-nav a,.qd-home-foot a,body.qd-reading .qd-edition-nav,#qd-about .qd-about-utility{font-family:var(--qd10-ui)}
.qd-edition-nav a,.qd-home-nav a,.qd-home-foot a,body.qd-reading .qd-edition-nav a{font:400 13px/1.4 var(--qd10-ui);letter-spacing:.01em;text-decoration-thickness:1px;text-underline-offset:.32em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.qd-edition-nav a:hover,.qd-home-nav a:hover,.qd-home-foot a:hover{text-decoration-color:currentColor}

/* ---------- chapter numerals (CSS only; no text is added to the document) ---------- */
[data-qd-index]::before{content:attr(data-qd-index) "\2002\00B7\2002";font:inherit;letter-spacing:inherit;opacity:.72}

/* ---------- consent: a single line under the site header (>600px), in document flow ---------- */
@media screen and (min-width:601px){
 html:has(#pa-privacy-panel:not([hidden])) body{padding-bottom:0}
 #pa-privacy{position:relative;z-index:3;padding:0 var(--qd-gut,max(24px,5vw));color:inherit;font:14px/1.5 var(--qd10-ui)}
 body:has(#qd-human) #pa-privacy,body:has(#return) #pa-privacy,body.qd-reading--black #pa-privacy,body.qd-home-body #pa-privacy{color:#fff}
 body:has(#qd-team) #pa-privacy,body:has(#qd-coast) #pa-privacy,body.qd-reading--white #pa-privacy,body[data-pa-presentation="about"] #pa-privacy,body[data-pa-presentation="privacy"] #pa-privacy{color:#000}
 #pa-privacy .pa-privacy-open{position:static;display:inline-flex;align-items:center;margin:20px 0 0;min-height:44px;padding:8px 0;background:none;color:inherit;border:0;box-shadow:none;font:400 13px/1.5 var(--qd10-ui);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.32em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
 #pa-privacy .pa-privacy-open:hover{text-decoration-color:currentColor}
 #pa-privacy .pa-privacy-open[aria-expanded="true"]{display:none}
 #pa-privacy-panel:not([hidden]){position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 20px;align-items:center;width:100%;max-width:none;max-height:none;overflow:visible;margin:0;padding:10px 0;background:none;color:inherit;border:0;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);box-shadow:none;border-radius:0}
 #pa-privacy[data-pa-entry="true"] #pa-privacy-panel{border-top:0}
 #pa-privacy h2{margin:0;max-width:none;color:inherit;font:italic 400 17px/1.35 var(--qd10-ed);letter-spacing:0}
 #pa-privacy .pa-choice-buttons{border:0;gap:4px;flex-wrap:wrap;justify-content:flex-end}
 #pa-privacy .pa-choice-buttons button{font:400 13px/1.4 var(--qd10-ui);color:inherit;min-width:0;min-height:36px;flex:0 1 auto;padding:6px 12px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:0;background:transparent;transition:none}
 #pa-privacy .pa-choice-buttons button:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
 #pa-privacy .pa-choice-buttons [data-pa-accept]{border-color:currentColor}
 #pa-privacy :focus-visible{outline:2px solid currentColor;outline-offset:3px}
 #pa-privacy-panel #pa-details:not([hidden]){grid-column:1/-1;max-width:52em;padding:14px 0 8px;overflow:visible;overscroll-behavior:auto;scrollbar-gutter:auto;font:15px/1.6 var(--qd10-ui)}
 #pa-details a{color:inherit}
 /* the choice line sits under the site header; the Privacy link after a choice is a footer control */
 body > #pa-privacy[data-pa-entry="true"]{order:0}
 .qd-home-body > #pa-privacy[data-pa-entry="true"]{background:#000}
}
@media screen and (min-width:601px) and (max-width:900px){
 #pa-privacy-panel:not([hidden]){grid-template-columns:1fr;gap:8px}
 #pa-privacy .pa-choice-buttons{justify-content:flex-start}
}

/* ---------- Privacy page ---------- */
body[data-pa-presentation="privacy"]{font-family:var(--qd10-ui)}
body[data-pa-presentation="privacy"] h1,body[data-pa-presentation="privacy"] h2{font-family:var(--qd10-ui);letter-spacing:-.03em;font-weight:500}
body[data-pa-presentation="privacy"] h1{font-size:clamp(2rem,1.4rem+2vw,3.25rem);line-height:1.02}
body[data-pa-presentation="privacy"] a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
body[data-pa-presentation="privacy"] button{background:transparent;color:inherit;border:1px solid currentColor;border-radius:0;font:inherit;padding:.55em 1em;cursor:pointer}
body[data-pa-presentation="privacy"] .qd-edition-nav{display:flex;justify-content:space-between;gap:24px;padding:18px var(--qd-gut,max(24px,5vw));background:#fff;color:#000}
body[data-pa-presentation="privacy"] .qd-edition-nav a{color:inherit;min-height:44px;display:inline-flex;align-items:center}

/* ---------- end of chapter: one frame for all ten ---------- */
@media screen and (min-width:981px){
 /* one navigation origin for all ten: the 1200px frame used by the composed chapters and the six */
 body[data-pa-presentation="standalone"] .qd-next-in{box-sizing:border-box;width:100%;max-width:calc(1200px + 2 * clamp(3rem,5vw,5.5rem));margin-inline:auto;padding-inline:clamp(3rem,5vw,5.5rem)}
 body[data-pa-presentation="standalone"] .qd-next-link{max-width:594px}
}
.qd-next-again{margin-top:2.25rem}
.qd-next-again .qd-next-t{font-size:clamp(1.5rem,1rem + 1.6vw,2.25rem)}
.qd-next-end-label{margin:0 0 1.1rem;font:500 .75rem/1.5 var(--qd10-label);letter-spacing:.14em;text-transform:uppercase}

/* ---------- Home ---------- */
.qd-hero-body p{color:rgba(255,255,255,.9)}
.qd-works{counter-reset:qd-work}
.qd-work{counter-increment:qd-work}
.qd-work-k::before{content:counter(qd-work,decimal-leading-zero) "\2002\00B7\2002";opacity:.72}
@media (min-width:900px){
 /* the whole lit window and the first action share the first screen; the open consent line is counted in */
 .qd-hero{--qd-hero-h:min(calc(100svh - 11.5rem),1536px)}
 html:has(#pa-privacy[data-pa-entry="true"] #pa-privacy-panel:not([hidden])) .qd-hero{--qd-hero-h:min(calc(100svh - 17rem),1536px)}
 .qd-hero-in{align-items:end;column-gap:clamp(3rem,6vw,8rem)}
 .qd-hero-copy{padding-bottom:calc(var(--qd-hero-h) * .16)}
}
@media (min-width:1100px){
 .qd-home-body{--qd-gut:clamp(3rem,5vw,6rem)}
 .qd-work-in{box-sizing:border-box;max-width:98rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,6vw,7rem)}
 .qd-work-art{justify-content:flex-start}
 .qd-work-art img{max-height:32rem;max-width:100%}
 .qd-work-t{font-size:clamp(3rem,3.5vw,4.5rem);max-width:15ch}
 .qd-work-d{max-width:25em}
 .qd-work{padding-block:clamp(4rem,9vh,7rem)}
}

/* ---------- six newer stories: prose track + margin rail (>=1100px) ---------- */
@media screen and (min-width:1100px){
 .qd-six{--gutter:clamp(3rem,5vw,5.5rem);--gap:clamp(2.5rem,4vw,5rem);--prose:27em;--rail:minmax(0,1fr);--section:clamp(3.5rem,7vh,5.5rem);--measure:27em}
 html.qd-six main{container-type:inline-size}
 .six{display:grid;grid-template-columns:minmax(0,var(--prose)) var(--rail);column-gap:var(--gap);row-gap:var(--section);max-width:calc(1200px + 2 * var(--gutter));padding-top:clamp(2rem,4vh,3rem);padding-bottom:var(--section)}
 .six > *{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,var(--prose)) var(--rail);column-gap:var(--gap);row-gap:0;align-items:start;margin:0;width:100%;max-width:100%;min-width:0}
 .six > * > *{grid-column:1;min-width:0;max-width:100%}
 /* running heads live in the rail, level with their passage, and stay with it */
 .six > section > .s-head{grid-column:2;grid-row:1 / span 60;align-self:start;position:sticky;top:clamp(1rem,4vh,2.5rem);margin:.45em 0 0;padding-bottom:1rem}
 .six > .plate > .s-head{grid-column:1;grid-row:auto;position:static;margin:0 0 1.1rem}
 /* opening: kicker and title in the track, the question beside them, the lead starts the track */
 .six .opening{padding-bottom:clamp(1rem,3vh,2rem);max-width:none}
 .six .opening > .label{grid-column:1;grid-row:1}
 .six .opening > h1{grid-column:1;grid-row:2;margin-bottom:0;max-width:13ch}
 .six .opening > .question{grid-column:2;grid-row:2;align-self:start;margin:.22em 0 0;max-width:24em}
 .six .opening > .lead{grid-column:1;grid-row:3;margin-top:1.4em;max-width:var(--prose)}
 /* passages with artwork: prose keeps the track; the plate sits in the rail and holds while a long passage passes */
 .six .with-art,.six .with-art.art-first{grid-template-columns:minmax(0,var(--prose)) var(--rail)}
 .qd-six .six .with-art > .s-head,.qd-six .six .with-art.art-first > .s-head{grid-column:2;grid-row:1;position:static;margin:.45em 0 1.2rem;padding:0}
 .qd-six .six .with-art > .copy,.qd-six .six .with-art.art-first > .copy{grid-column:1;grid-row:1 / span 2;min-width:0;max-width:var(--prose)}
 .qd-six .six .with-art > .art,.qd-six .six .with-art.art-first > .art{grid-column:2;grid-row:2;align-self:start;position:sticky;top:clamp(1rem,6vh,3rem);width:100%;margin:0;min-width:0}
 .qd-six .six .with-art:not(:has(> .s-head)) > .copy{grid-row:1 / span 2}
 .qd-six .six .with-art:not(:has(> .s-head)) > .art{grid-row:1 / span 2}
 .qd-six .six .with-art .art img{position:static;width:auto;max-width:100%;max-height:min(84svh,var(--w,100%));margin-inline:0}
 .qd-six .six .with-art .art.wide img{width:100%}
 /* standalone plates take their own width from the track edge; the wide house plate keeps its full span */
 .six .plate:not(.n-return){display:block;grid-column:1 / -1}
 .six .plate:not(.n-return) figure{width:fit-content;max-width:100%}
 .six .plate:not(.n-return) .art img{max-width:min(100%,var(--w,54rem),54rem);margin-inline:0}
 .six .n-return{display:block;grid-column:1 / -1;width:100%;max-width:100%;margin:0}
 .six .n-return figcaption{max-width:none;margin-inline:0}
 /* the three spread openings: title, deck and the first plate make one frame */
 :is(#the-container,#the-constellation,#showing-up) > .opening{grid-column:1;grid-row:1;display:block;align-self:center;padding:0}
 :is(#the-container,#the-constellation,#showing-up) > .opening h1{margin-bottom:.45em}
 :is(#the-container,#the-constellation,#showing-up) > .opening > .question,:is(#the-container,#the-constellation,#showing-up) > .opening > .lead{max-width:var(--prose);margin-top:0}
 #the-container > .plate:nth-child(5),#the-constellation > .plate:nth-child(2),#showing-up > .plate:nth-child(3){grid-column:2;grid-row:1;align-self:center;display:block}
 :is(#the-container,#the-constellation,#showing-up) > .plate .art img{max-height:36rem;width:auto;max-width:100%;margin-inline:0}
 /* beats, measures, hits */
 .six .s-beat{margin:clamp(1rem,3vh,2.5rem) 0}
 .six .n-hitblock{grid-column:1 / -1;display:block}
 .six .n-hitblock .n-hit{width:100%;max-width:100%;margin-inline:0;min-height:clamp(24rem,68svh,48rem);font-size:clamp(5rem,10vw,10rem)}
 .six .n-measure{margin-block:1rem}
 .six .n-measure .n-vessel{width:100%;max-width:100%}
 .six .n-measure .n-over{max-width:calc(100% + 8rem)}
 .six .n-counterpoint .voice-2{margin-top:2.5rem;padding-top:1.5rem;padding-left:1.75rem}
 .six .n-counterpoint .voice-2::before{left:1.75rem}
 #showing-up > .with-art + .with-art{margin-top:clamp(2rem,5vh,4rem)}
 .six > .passage + .passage:not(.with-art):not(.s-beat){margin-top:calc(-1 * var(--section) + clamp(2rem,4vh,3rem))}
 .six > .s-beat + .passage,.six > .passage + .s-beat{margin-top:0}
}
/* enlarged type: when two tracks cannot both be useful, keep source order in one column */
@media screen and (min-width:1100px){
 @container (max-width:48em){
  .six,.six > *,.six .opening,.six .with-art,.six .art-first{display:block}
  .six > section + section{margin-top:var(--section)}
  .six > section > .s-head{position:static;margin:0 0 1.1rem}
  .six .opening > p{margin-top:1.5em}
  .six .with-art .art{margin-top:2.5rem}
  .six .with-art .art{position:static}
  .six .with-art .art img{max-height:none}
  .six .with-art .copy{max-width:100%}
  .six img{max-width:100%}
  :is(#the-container,#the-constellation,#showing-up) > .plate .art img{max-height:none}
 }
}

/* ---------- Return: the closing piece shares the frame ---------- */
@media screen and (min-width:1100px){
 /* Return shares the frame: same outer margin and 1200px width as the rest of the collection */
 #return{--gutter:clamp(3rem,5vw,5.5rem);--text-w:min(100%,1200px);--art-w:min(100%,1200px)}
 #return > *{width:min(100%,1200px)}
 #return .opening{width:min(100%,1200px)}
}