@charset "UTF-8";

:root {
  --qq-ground: #fbddf2;
  --qq-ink: #1b262b;
  --qq-accent: #6e6226;
  --qq-support: #dcc8bb;
  --qq-paper: #f8ede7;
  --qq-plaster: #eab49e;
  --qq-inset: #ad806a;
  --qq-display: "Gabriela", Georgia, serif;
  --qq-reading: "Padauk", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--qq-ground); color: var(--qq-ink); }
body { margin: 0; font: 21px/1.6 var(--qq-reading); }
img, svg { max-width: 100%; }
img { display: block; }
a { color: var(--qq-accent); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color 160ms ease, background-color 160ms ease, text-decoration-thickness 160ms ease; }
a:hover { color: var(--qq-ink); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--qq-accent); outline-offset: 5px; border-radius: 2px; }
p { margin: 0 0 1.05em; }
h1, h2, h3 { font-family: var(--qq-display); font-weight: 400; }
h1 { font-size: clamp(40px, 4.25vw, 62px); line-height: 1.16; letter-spacing: -.04em; text-wrap: balance; }
h2 { font-size: 25px; line-height: 1.5; }
::selection { color: var(--qq-ink); background: var(--qq-plaster); }
.qq-skip { position: absolute; z-index: 8; top: 8px; left: 8px; padding: 8px 16px; background: var(--qq-paper); transform: translateY(-160%); }
.qq-skip:focus { transform: translateY(0); }

/* A triangle of real reading routes; the brand sits inside the open centre. */
.qq-masthead { height: 146px; padding: 2px 24px 0; background: var(--qq-ground); }
.qq-triangle-nav { position: relative; width: min(100%, 1020px); height: 140px; margin: 0 auto; }
.qq-triangle-line { position: absolute; width: 100%; height: 118px; top: 0; left: 0; overflow: visible; color: var(--qq-accent); }
.qq-triangle-line path { fill: none; stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.qq-triangle-flat { display: none; }
.qq-name { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); white-space: nowrap; font: 31px/1.25 var(--qq-display); color: var(--qq-ink); text-decoration: none; }
.qq-name:hover { color: var(--qq-accent); }
.qq-edge-label { display: flex; align-items: center; gap: 8px; position: absolute; font-size: 18px; line-height: 25px; text-decoration: none; white-space: nowrap; padding: 0 6px; }
.qq-edge-label i, .qq-edge-label svg { width: 17px; height: 17px; flex: 0 0 17px; }
.qq-edge-label[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.qq-edge-label:hover { background: var(--qq-plaster); }
.qq-side-concern { left: 26.8%; top: 20px; transform: translateX(-50%); }
.qq-side-evidence { left: 73.2%; top: 20px; transform: translateX(-50%); }
.qq-side-conversation { left: 50%; top: 111px; transform: translateX(-50%); }

/* The photograph spans the whole opening. The rose field projects into its left edge. */
.qq-opening { position: relative; isolation: isolate; min-height: 638px; padding: 58px 5vw 100px 37vw; }
.qq-edge-photo { position: absolute; z-index: -2; inset: 0; overflow: hidden; margin: 0; background: var(--qq-support); }
.qq-edge-photo picture { display: block; width: 100%; height: 100%; }
.qq-edge-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.qq-hero-field { position: relative; z-index: 2; width: 100%; max-width: 1000px; margin: 0 auto; }
.qq-opening-copy { position: relative; padding: 35px 44px 27px; text-align: center; background: var(--qq-plaster); border-top: 8px solid var(--qq-accent); }
.qq-opening h1 { max-width: 790px; margin: 0 auto 19px; font-size: clamp(48px, 5.2vw, 75px); }
.qq-welcome { max-width: 650px; margin: 0 auto; font-size: 23px; line-height: 1.4; }
.qq-foreground-fin { position: absolute; z-index: -1; left: calc(37vw - 105px); top: 58px; width: 110px; height: 270px; background: var(--qq-plaster); clip-path: polygon(100% 0, 100% 100%, 0 62%); animation: qq-fin-settles 850ms ease-out; }
@keyframes qq-fin-settles { from { transform: translateX(16px); } to { transform: translateX(0); } }

/* This long paragraph is an editorial mention. It has no interaction styles. */
.qq-private-mention { position: relative; min-width: 320px; width: 100%; margin: 0; padding: 22px 32px 24px 66px; color: var(--qq-ink); background: var(--qq-support); clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%); }
.qq-mention-inset { position: absolute; inset: 0 auto 0 0; width: 36px; background: var(--qq-inset); }
.qq-private-mention p { position: relative; margin: 0; font-size: 18px; line-height: 1.5; }

/* Inner page photographs are bands behind a projecting, solid title field. */
.qq-inner-opening { position: relative; isolation: isolate; min-height: 390px; padding: 35px max(48px, calc((100vw - 1160px) / 2)) 46px; margin: 0; text-align: center; background: var(--qq-support); }
.qq-inner-opening:has(.qq-panorama) { min-height: 425px; padding-right: 25vw; }
.qq-breadcrumb { display: flex; justify-content: center; align-items: center; gap: 12px; position: relative; z-index: 1; width: fit-content; max-width: 100%; padding: 5px 16px; margin: 0 auto 28px; font-size: 17px; color: var(--qq-ink); background: var(--qq-support); }
.qq-breadcrumb a { color: var(--qq-ink); }
.qq-breadcrumb i, .qq-breadcrumb svg { width: 16px; height: 16px; flex: 0 0 16px; }
.qq-inner-opening h1 { position: relative; z-index: 1; max-width: 920px; padding: 27px 30px 17px; margin: 0 auto; background: var(--qq-plaster); border-top: 7px solid var(--qq-accent); }
.qq-inner-deck { position: relative; z-index: 1; max-width: 920px; padding: 0 40px 28px; margin: 0 auto; font-size: 22px; line-height: 1.45; background: var(--qq-plaster); }
.qq-panorama { position: absolute; z-index: -1; inset: 0; margin: 0; overflow: hidden; background: var(--qq-support); }
.qq-panorama img { height: 100%; width: 100%; object-fit: cover; }

/* A broad narrative descends through three increasingly open left indents. */
.qq-reading-room { position: relative; max-width: 1180px; margin: 0 auto; padding: 77px 56px 92px; }
.qq-reading-room::before { content: ""; position: absolute; top: 0; left: 56px; width: 72px; height: 17px; background: var(--qq-accent); }
.qq-home-room { margin-top: -30px; background: var(--qq-paper); box-shadow: 20px 20px 0 var(--qq-support); }
.qq-arrival { max-width: 940px; margin-bottom: 52px; }
.qq-arrival p:first-child::first-letter { float: left; font-family: var(--qq-display); font-size: 76px; line-height: .9; padding: 8px 12px 0 0; color: var(--qq-accent); }
.qq-pocket { position: relative; margin-top: 52px; padding: 0; max-width: 1000px; }
.qq-depth-one { margin-left: 60px; }
.qq-depth-two { margin-left: 140px; }
.qq-depth-three { margin-left: 220px; }
.qq-pocket-number { position: absolute; top: -5px; left: -65px; width: 58px; color: var(--qq-accent); font: 37px/1.2 var(--qq-display); }
.qq-pocket-number::before { content: attr(data-qq-step); }
.qq-pocket h2 { display: inline; margin: 0 .3em 0 0; color: var(--qq-accent); }
.qq-pocket .qq-first-answer { display: inline; }
.qq-pocket p:not(.qq-first-answer) { margin: 1em 0 0; }
.qq-full-return { position: relative; margin: 72px -28px 0 -28px; padding: 32px 34px; max-width: 1120px; border-left: 12px solid var(--qq-accent); background: var(--qq-support); font: 24px/1.55 var(--qq-display); }
.qq-full-return::before { content: ""; position: absolute; right: 0; top: -18px; width: 88px; height: 18px; background: var(--qq-plaster); }
.qq-full-return p { margin-bottom: 0; }
.qq-full-return a { color: var(--qq-ink); }
.qq-source-shelf { list-style: none; padding: 0; margin: 42px 0 0; }
.qq-source-shelf li { padding: 23px 0; max-width: 960px; }
.qq-source-shelf li + li { border-top: 2px solid var(--qq-support); }
.qq-source-shelf h2 { font-size: 22px; margin: 0 0 10px; }
.qq-source-shelf p { margin: 0; }
.qq-continue { margin-top: 68px; }
.qq-continue h2 { margin: 0 0 24px; font-size: 28px; }
.qq-continue ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.qq-continue li { flex: 1 1 280px; }
.qq-continue li:nth-child(2) { margin-top: 16px; }
.qq-continue a { display: flex; gap: 16px; align-items: center; height: 100%; min-height: 82px; padding: 16px 23px; border-radius: 8px; background: var(--qq-ground); box-shadow: 5px 5px 0 var(--qq-support); text-decoration: none; font: 21px/1.35 var(--qq-display); }
.qq-continue a:hover { background: var(--qq-plaster); box-shadow: 5px 5px 0 var(--qq-accent); }
.qq-continue svg, .qq-continue i { display: block; width: 24px; height: 24px; flex: 0 0 24px; }

.qq-footnote { padding: 58px max(30px, calc((100vw - 1068px) / 2)) 34px; margin-top: 48px; background: var(--qq-support); border-top: 14px solid var(--qq-accent); }
.qq-footer-thought { max-width: 870px; font: 25px/1.5 var(--qq-display); margin: 0 0 30px; }
.qq-footer-links { display: flex; gap: 14px 30px; flex-wrap: wrap; margin-bottom: 25px; font-size: 19px; }
.qq-footer-links a { color: var(--qq-ink); }
.qq-copyright { margin: 0; font-size: 17px; }
.qq-missing-room { min-height: 420px; max-width: 900px; margin: 0 auto; padding: 55px 28px 75px; }
.qq-missing-room h1 { margin: 0 0 28px; }

@media (min-width: 1600px) {
  .qq-foreground-fin { left: calc(max(37vw, (132vw - 1000px) / 2) - 105px); }
}

@media (max-width: 1000px) and (min-width: 601px) {
  .qq-name { font-size: 27px; }
  .qq-opening { padding: 42px 4vw 85px 23vw; }
  .qq-opening-copy { padding: 28px 28px 24px; }
  .qq-opening h1 { font-size: 50px; }
  .qq-private-mention { padding-left: 52px; padding-right: 23px; }
  .qq-foreground-fin { left: calc(23vw - 74px); top: 42px; width: 80px; }
  .qq-inner-opening:has(.qq-panorama) { padding-right: 12vw; padding-left: 6vw; }
  .qq-reading-room { padding-left: 38px; padding-right: 38px; }
  .qq-home-room { box-shadow: none; }
  .qq-depth-one { margin-left: 52px; }
  .qq-depth-two { margin-left: 82px; }
  .qq-depth-three { margin-left: 112px; }
  .qq-pocket-number { left: -51px; font-size: 29px; }
  .qq-full-return { margin-left: 0; margin-right: 0; }
}

@media (max-width: 600px) {
  body { font-size: 18px; line-height: 1.6; }
  h1 { font-size: 33px; line-height: 1.2; letter-spacing: -.035em; }
  .qq-masthead { height: 72px; padding: 1px 10px 0; }
  .qq-triangle-nav { height: 69px; }
  .qq-triangle-line { height: 52px; }
  .qq-triangle-wide { display: none; }
  .qq-triangle-flat { display: block; }
  .qq-name { top: 28px; font-size: 18px; line-height: 23px; }
  .qq-edge-label { padding: 0 3px; font-size: 16px; line-height: 19px; }
  .qq-edge-label i, .qq-edge-label svg { display: none; }
  .qq-side-concern { left: 26.8%; top: 0; }
  .qq-side-evidence { left: 73.2%; top: 0; }
  .qq-side-conversation { top: 51px; }
  .qq-opening { display: flex; flex-direction: column; min-height: 0; padding: 19px 0 0; background: var(--qq-plaster); }
  .qq-hero-field { max-width: none; margin: 0; }
  .qq-opening-copy { padding: 15px 23px 23px; margin: 0 17px; border-top-width: 5px; }
  .qq-opening h1 { max-width: 355px; font-size: 34px; margin-bottom: 16px; }
  .qq-welcome { max-width: 330px; font-size: 18px; line-height: 1.4; }
  .qq-private-mention { width: calc(100% - 16px); min-width: 320px; margin-left: 16px; padding: 21px 22px 23px 42px; clip-path: polygon(17px 0, 100% 0, 100% 100%, 0 100%); }
  .qq-mention-inset { width: 24px; }
  .qq-private-mention p { font-size: 16px; line-height: 1.375; }
  .qq-edge-photo { position: relative; z-index: 0; order: 3; inset: auto; width: 100%; height: 90px; margin: 0; border-radius: 0; }
  .qq-edge-photo img { object-position: 50% 49%; }
  .qq-foreground-fin { left: 0; top: auto; bottom: 0; z-index: 1; width: 37px; height: 90px; clip-path: polygon(0 0, 100% 43%, 0 100%); }
  .qq-inner-opening, .qq-inner-opening:has(.qq-panorama) { min-height: 0; padding: 25px 0 0; }
  .qq-inner-opening:not(:has(.qq-panorama)) { padding-bottom: 25px; }
  .qq-breadcrumb { font-size: 16px; gap: 8px; margin-bottom: 20px; padding: 3px 12px; }
  .qq-breadcrumb span { max-width: 230px; }
  .qq-inner-opening h1 { padding: 20px 23px 16px; margin: 0 16px; border-top-width: 5px; }
  .qq-inner-deck { font-size: 19px; line-height: 1.45; padding: 0 26px 24px; margin: 0 16px; }
  .qq-panorama { position: relative; inset: auto; height: 138px; margin: -12px 0 0; border-radius: 0; }
  .qq-reading-room { padding: 43px 23px 53px; }
  .qq-reading-room::before { left: 23px; width: 53px; height: 9px; }
  .qq-home-room { margin-top: 0; background: var(--qq-paper); box-shadow: none; }
  .qq-arrival { margin-bottom: 34px; }
  .qq-arrival p:first-child::first-letter { font-size: 60px; padding-right: 8px; }
  .qq-pocket { margin-top: 35px; }
  .qq-pocket h2 { font-size: 22px; line-height: 1.5; }
  .qq-depth-one { margin-left: 8px; }
  .qq-depth-two { margin-left: 21px; }
  .qq-depth-three { margin-left: 34px; }
  .qq-pocket-number { position: relative; display: block; top: auto; left: auto; margin-bottom: 7px; font-size: 24px; line-height: 1.2; }
  .qq-full-return { margin: 40px -9px 0; padding: 22px 19px; border-left-width: 7px; font-size: 20px; line-height: 1.55; }
  .qq-full-return::before { height: 10px; top: -10px; width: 58px; }
  .qq-source-shelf { margin-top: 24px; }
  .qq-source-shelf h2 { font-size: 20px; }
  .qq-continue { margin-top: 39px; }
  .qq-continue h2 { font-size: 24px; margin-bottom: 20px; }
  .qq-continue ul { display: block; }
  .qq-continue li + li { margin-top: 17px; }
  .qq-continue a { min-height: 76px; padding: 15px 18px; font-size: 19px; }
  .qq-footnote { padding: 33px 23px 28px; margin-top: 20px; border-top-width: 9px; }
  .qq-footer-thought { font-size: 21px; }
  .qq-footer-links { gap: 12px 25px; font-size: 17px; }
  .qq-copyright { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}