/* Haddon Row: The Cloth Issue. Calico and black spreads with a hard cut at every turn, Caslon at
   extreme sizes, one lining violet, and the tailor's chalk line as the only rule. */
@font-face { font-family: "Libre Caslon Display"; src: url(/assets/fonts/specimen/libre-caslon-display-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(/assets/fonts/specimen/libre-caslon-text-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(/assets/fonts/specimen/libre-caslon-text-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hr Display Fallback"; src: local("Georgia"); size-adjust: 75%; }

body.spec-haddon-row { background: #E5DFC6; margin: 0; }
.hr-issue {
  --hr-calico: #E5DFC6; --hr-ink: #0E0D0C; --hr-violet: #5A2D82; --hr-support: #B5AD92;
  --hr-m: clamp(1rem, 3.33vw, 3rem); --hr-g: clamp(.75rem, 1.67vw, 1.5rem);
  --hr-d: "Libre Caslon Display", "Hr Display Fallback", Georgia, serif;
  --hr-t: "Libre Caslon Text", Georgia, serif;
  --hr-c: calc((100vw - 2 * var(--hr-m) - 11 * var(--hr-g)) / 12);
  --hr-pad: clamp(4.5rem, 9vw, 11rem);
  /* the cover's cloth box, shared with the colophon's empty rod: masthead size, cloth width and
     height, the cloth box's offset in the grid, and the hang's left edge within it */
  --mf: clamp(4.5rem, 20.5vw, 22rem); --cw: min(28vw, 30rem); --ch: calc(var(--cw) / .786);
  --hx0: calc(4 * (var(--hr-c) + var(--hr-g)));
  --hl: calc(var(--hr-hx, 2.8355 * var(--mf) - var(--hx0)) - var(--cw) / 2);
  --bg: var(--hr-calico); --fg: var(--hr-ink);
  /* the hanging cloth's flat colour and a thread to draw over it (No. 04 until JS says otherwise) */
  --hr-sw-c: #1A2234; --hr-sw-t: #E5DFC6;
  position: relative; background: var(--bg); color: var(--fg);
  font: 400 clamp(1.0625rem, 1rem + .2vw, 1.1875rem)/1.62 var(--hr-t); letter-spacing: .003em;
  font-synthesis: none; font-kerning: normal; font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
}
.hr-issue *, .hr-issue *::before, .hr-issue *::after { box-sizing: border-box; }
.hr-issue :where(h1, h2, h3, p, ol, ul, dl, dd, dt, figure, fieldset, legend, blockquote) { margin: 0; padding: 0; font-weight: 400; }
.hr-issue :where(ol, ul) { list-style: none; }
.hr-issue :where(i, em) { font-style: italic; }
.hr-issue :where(img, canvas, svg) { display: block; max-width: 100%; }
.hr-issue ::selection { background: var(--hr-violet); color: var(--hr-calico); }
.hr-issue a { color: inherit; text-decoration: none; }
/* focus is a printer's crop mark at each corner, 6px out: violet on calico, calico on black */
.hr-issue { --hr-crop: var(--hr-violet); }
.hr-b, .hr-strip.hr-inv { --hr-crop: var(--hr-calico); }
.hr-issue :focus-visible { outline: none; }
:where(.hr-issue :is(a, button, [tabindex]):focus-visible) { position: relative; }
.hr-issue :is(a, button, [tabindex]):focus-visible::after, .hr-issue .hr-btnw:has(> :focus-visible)::after, .hr-issue :is(.hr-kinds, .hr-days) label:has(input:focus-visible)::after {
  content: ""; position: absolute; inset: -6px; z-index: 5; pointer-events: none; --a: 14px;
  background:
    linear-gradient(var(--hr-crop) 0 0) 0 0 / var(--a) 2px, linear-gradient(var(--hr-crop) 0 0) 0 0 / 2px var(--a),
    linear-gradient(var(--hr-crop) 0 0) 100% 0 / var(--a) 2px, linear-gradient(var(--hr-crop) 0 0) 100% 0 / 2px var(--a),
    linear-gradient(var(--hr-crop) 0 0) 0 100% / var(--a) 2px, linear-gradient(var(--hr-crop) 0 0) 0 100% / 2px var(--a),
    linear-gradient(var(--hr-crop) 0 0) 100% 100% / var(--a) 2px, linear-gradient(var(--hr-crop) 0 0) 100% 100% / 2px var(--a);
  background-repeat: no-repeat;
}
.hr-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hr-i { width: 1rem; height: 1rem; flex: none; }
.hr-i-r { rotate: 90deg; }
.hr-i-d { rotate: 180deg; }
@media (scripting: none) { .hr-jsonly { display: none !important; } }

/* ── spreads: ten of them, calico and black, cut hard ─────────────────────────────────────────── */
.hr-sp {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hr-g);
  align-items: start; padding: var(--hr-pad) var(--hr-m); background: var(--bg); color: var(--fg);
  overflow-x: clip; scroll-margin-top: calc(var(--bar-h, 42px) + 44px);
}
.hr-c { --bg: var(--hr-calico); --fg: var(--hr-ink); --hr-chalk: rgba(14, 13, 12, .7); --hr-soft: rgba(14, 13, 12, .74); --hr-link: var(--hr-violet); }
.hr-b { --bg: var(--hr-ink); --fg: var(--hr-calico); --hr-chalk: rgba(229, 223, 198, .85); --hr-soft: var(--hr-support); --hr-link: var(--hr-calico); }
.hr-rh {
  position: absolute; top: 1.125rem; left: var(--hr-m); right: var(--hr-m); display: flex; justify-content: space-between; gap: 1rem;
  font-size: clamp(.625rem, .55rem + .3vw, .75rem); line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--hr-soft);
}
.hr-folio {
  position: absolute; bottom: 1.25rem; display: flex; align-items: center; gap: .35rem;
  font: italic .8125rem/1 var(--hr-t); font-variant-numeric: lining-nums; color: var(--hr-soft);
}
.hr-fl { left: var(--hr-m); }
.hr-fr { right: var(--hr-m); }

/* ── the type system ───────────────────────────────────────────────────────────────────────────── */
.hr-word {
  grid-column: 1 / -1; font: 400 clamp(6.5rem, 28vw, 30rem)/.78 var(--hr-d); letter-spacing: -.04em;
  white-space: nowrap; font-variant-numeric: lining-nums; margin-bottom: clamp(2.5rem, 5vw, 5.5rem);
}
.hr-wr { justify-self: end; margin-right: calc(-1 * var(--hr-m)); }
.hr-wl { justify-self: start; margin-left: calc(-1 * var(--hr-m)); }
.hr-h3 { font: 400 clamp(1.75rem, 1.4rem + 1vw, 2.25rem)/1.1 var(--hr-d); letter-spacing: -.01em; }
.hr-h3i { font: italic 400 clamp(1.75rem, 1.4rem + 1vw, 2.25rem)/1.1 var(--hr-t); }
.hr-stand, .hr-note, .hr-h2i, .hr-intro { font: italic 400 clamp(1.25rem, 1.05rem + .8vw, 1.625rem)/1.38 var(--hr-t); max-width: 34ch; }
.hr-capn { font: italic 400 clamp(.9375rem, .9rem + .12vw, 1.0625rem)/1.5 var(--hr-t); max-width: 38ch; }
.hr-label { font-size: .75rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; }
.hr-body { max-width: 62ch; }
.hr-body p + p { margin-top: .9em; }
.hr-chalk { display: block; width: 100%; height: 8px; color: var(--hr-chalk); overflow: visible; }
.hr-pull { grid-column: 2 / 11; display: grid; gap: clamp(1.25rem, 2.2vw, 2rem); margin-block: clamp(4rem, 8vw, 8rem) 0; }
.hr-pull p { font: 400 clamp(2rem, 1rem + 4vw, 5rem)/1 var(--hr-d); letter-spacing: -.02em; max-width: 18ch; text-wrap: balance; }
.hr-c .hr-body a, .hr-c .hr-capn a { color: var(--hr-violet); text-decoration: underline; text-decoration-color: var(--hr-violet); text-underline-offset: .2em; }
.hr-hangit, .hr-presets button, .hr-choose, #hr-again, .hr-open, .hr-strip a {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.hr-hangit { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hr-violet); }
.hr-b .hr-hangit { color: var(--hr-calico); text-decoration: underline 2px var(--hr-violet); text-underline-offset: .4em; }
/* the cloth line: what a picture wears, by number, and a button that hangs it on the cover */
.hr-clothline { display: grid; gap: .15rem; margin-top: 1rem; max-width: 40ch; font: 400 .9375rem/1.5 var(--hr-t); }
.hr-clothline i { font-style: italic; }
.hr-cl-l { margin-right: .4rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.hr-b .hr-cl-l { color: var(--hr-support); }
.hr-cl-n { font-variant-numeric: lining-nums; }
.hr-clothline-now { margin-top: .3rem; font-style: italic; color: var(--hr-soft); }
.hr-cl-worn { grid-template-columns: 1fr 1fr; column-gap: var(--hr-g); max-width: none; margin-top: 1.5rem; }
.hr-cl-worn .hr-clothline-now { grid-column: 1 / -1; }
.hr-hangit .hr-i, .hr-choose .hr-i, #hr-again .hr-i, .hr-open .hr-i { transition: translate .25s var(--hr-e, ease); }
.hr-hangit:hover .hr-i, .hr-choose:hover .hr-i, #hr-again:hover .hr-i { translate: 0 -3px; }
.hr-open:hover .hr-i { translate: 0 3px; }
.hr-issue { --hr-e: cubic-bezier(.2, .8, .2, 1); }

/* ── the running-head strip ────────────────────────────────────────────────────────────────────── */
.hr-strip {
  position: sticky; top: var(--bar-h, 42px); z-index: 800; height: 44px; display: flex; align-items: center; gap: 1.5rem;
  padding: 0 var(--hr-m); background: var(--hr-calico); color: var(--hr-ink);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; transition: background-color .18s, color .18s;
}
.hr-strip.hr-inv { background: var(--hr-ink); color: var(--hr-calico); }
.hr-strip-now {
  flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: italic .875rem/1 var(--hr-t); letter-spacing: 0; text-transform: none;
}
.hr-strip-win { display: inline-block; position: relative; }
.hr-strip-old { position: absolute; left: 0; top: 0; white-space: nowrap; }
#hr-strip-cloth { display: inline-block; }
.hr-strip-in { margin-left: auto; }
.hr-strip a:hover { color: var(--hr-violet); }
.hr-strip.hr-inv a:hover { color: var(--hr-calico); text-decoration: underline; text-decoration-color: var(--hr-violet); text-underline-offset: .3em; }

/* ── 01 the cover ──────────────────────────────────────────────────────────────────────────────── */
.hr-cover {
  --mt: 2.5rem;
  padding-top: 1rem; padding-bottom: 4.5rem; grid-template-rows: 1rem auto auto auto auto;
}
.hr-cover .hr-rh { position: static; grid-column: 1 / -1; grid-row: 1; height: 1rem; }
.hr-mast {
  grid-column: 1 / -1; grid-row: 2; margin-top: .5rem; margin-left: -.037em; position: relative; z-index: 1;
  font: 400 var(--mf)/.8 var(--hr-d); letter-spacing: -.035em; white-space: nowrap;
}
.hr-cloth {
  position: absolute; z-index: 3; top: calc(var(--mt) + .32 * var(--mf) - 20px);
  left: calc(var(--hr-m) + 4 * (var(--hr-c) + var(--hr-g))); width: calc(7 * var(--hr-c) + 6 * var(--hr-g));
  height: calc(var(--ch) + 80px); touch-action: pan-y; outline: none; cursor: grab;
}
/* around the cloth itself, not its (wider) box: 24px arms */
.hr-issue .hr-cloth:focus-visible::after { inset: auto; left: calc(var(--hl) - 6px); top: 14px; width: calc(var(--cw) + 12px); height: calc(var(--ch) + 26px); --a: 24px; }
.hr-cloth:active { cursor: grabbing; }
.hr-issue .hr-cloth:focus-visible { outline: none; box-shadow: none; }
/* the short rod: the gathered heading (0.86 of the cloth) plus 18px each side, ball finials on its ends */
.hr-cloth > .hr-rod { position: absolute; left: calc(var(--hl) + .07 * var(--cw) - 18px); top: 13px; width: calc(.86 * var(--cw) + 36px); height: 14px; fill: var(--hr-ink); overflow: visible; }
.hr-pinhead { position: absolute; left: 0; top: 0; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; visibility: hidden; overflow: visible; will-change: transform; }
.hr-cloth:not(.is-live) .hr-pinhead { display: none; }
.hr-hang { position: absolute; left: var(--hl); top: 20px; width: var(--cw); height: var(--ch); view-transition-class: hr-sw; }
.hr-canvas {
  position: absolute; left: calc(-1 * var(--hl) - var(--hr-c) - var(--hr-g)); top: -20px;
  width: calc(9 * var(--hr-c) + 8 * var(--hr-g)); height: calc(var(--ch) + 170px); max-width: none; pointer-events: none;
}
/* the photograph hangs on the SVG rod: scaled so its cloth's top edge (61.3% of the frame) is the
   gathered heading (0.86 of the cloth), centred on the hang, its rod's centre (20.41% down) on the SVG
   rod's. The photographed rod is masked away beside the cloth, so the short rod shows 18px each side */
.hr-poster {
  position: absolute; left: calc(var(--hl) - .2057 * var(--cw)); top: calc(20px - .4295 * var(--cw)); width: calc(1.403 * var(--cw));
  pointer-events: none; transition: opacity .3s;
  /* layers, bottom up: down to the hem (69.5%), the photograph cut at the rod's span; below the hem, a
     radial feather carries its shadow into the page's calico with no side edges; over all, nothing
     above the rod */
  -webkit-mask-image: linear-gradient(transparent 18.8%, #000 19.1%), radial-gradient(ellipse 33% 7.5% at 52% 69.6%, #000, rgba(0, 0, 0, .55) 45%, transparent), linear-gradient(90deg, transparent 19%, #000 19.6%, #000 80.6%, transparent 81.2%), linear-gradient(#000 69.2%, transparent 71%);
  -webkit-mask-composite: source-in, source-over, source-in, source-over;
  mask-image: linear-gradient(transparent 18.8%, #000 19.1%), radial-gradient(ellipse 33% 7.5% at 52% 69.6%, #000, rgba(0, 0, 0, .55) 45%, transparent), linear-gradient(90deg, transparent 19%, #000 19.6%, #000 80.6%, transparent 81.2%), linear-gradient(#000 69.2%, transparent 71%);
  mask-composite: intersect, add, intersect, add;
}
.hr-poster img { width: 100%; height: auto; }
.hr-cloth.is-live .hr-poster { opacity: 0; visibility: hidden; }
.hr-lede { grid-column: 1 / 5; grid-row: 3; padding-top: 1.75rem; min-height: calc(var(--ch) + 60px - .48 * var(--mf)); position: relative; z-index: 2; }
#hr-h1 { font: 400 clamp(2.25rem, 1.3rem + 3.2vw, 4.25rem)/1.02 var(--hr-d); letter-spacing: -.015em; max-width: 16ch; text-wrap: balance; }
.hr-sub { margin-top: 1.5rem; max-width: 30ch; font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem); line-height: 1.56; }
.hr-bookwrap { grid-column: 12; grid-row: 3 / span 2; padding-top: 1.75rem; position: relative; z-index: 4; }
.hr-bookwrap .hr-label { margin-bottom: .75rem; }
.hr-bookwrap .hr-label, .hr-seasonkey { white-space: nowrap; }
/* 34px chips on a 3px gap: the whole book, twelfth chip included, inside a 1440 × 900 first screen */
.hr-book { display: grid; gap: 3px; }
.hr-chip {
  position: relative; display: grid; grid-template-columns: 1.25rem 1fr; align-items: center; gap: 0; width: 100%; max-width: 5.5rem; height: 34px;
  padding: 0; border: 0; background: none; color: var(--hr-ink); font: italic .8125rem/1 var(--hr-t); font-variant-numeric: lining-nums; cursor: pointer;
  transition: translate .18s ease-out;
}
.hr-chip-f {
  display: block; height: 100%; background: var(--sw); overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 95% 100%, 90% 82%, 85% 100%, 80% 82%, 75% 100%, 70% 82%, 65% 100%, 60% 82%, 55% 100%, 50% 82%, 45% 100%, 40% 82%, 35% 100%, 30% 82%, 25% 100%, 20% 82%, 15% 100%, 10% 82%, 5% 100%, 0 82%);
}
.hr-chip-f canvas { width: 100%; height: 100%; }
.hr-chip-n { position: relative; justify-self: start; }
.hr-chip-n::after {
  content: ""; position: absolute; left: -1px; right: -2px; bottom: -5px; height: 2px; background: var(--hr-violet);
  transform: scaleX(0) rotate(-2deg); transform-origin: left; transition: transform .18s ease-out;
}
.hr-chip[aria-pressed="true"] { translate: -16px 0; }
.hr-chip[aria-pressed="true"] .hr-chip-n { color: var(--hr-violet); }
.hr-chip[aria-pressed="true"] .hr-chip-n::after { transform: scaleX(1) rotate(-2deg); }
.hr-chip:hover .hr-chip-f { filter: brightness(1.08); }
.hr-tick { position: absolute; left: -1.1rem; top: 50%; translate: 0 -50%; width: .875rem; height: .875rem; color: var(--hr-ink); opacity: 0; }
.hr-chip.is-season .hr-tick { opacity: .75; }
.hr-seasonkey { display: flex; align-items: center; gap: .3rem; margin: -.35rem 0 .7rem; font: italic .8125rem/1.2 var(--hr-t); color: var(--hr-soft); }
.hr-seasonkey .hr-i { width: .875rem; height: .875rem; }
.hr-cap-acts { display: grid; justify-items: start; gap: .25rem; }
.hr-pinbtn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: .75rem/1 var(--hr-t); letter-spacing: .14em; text-transform: uppercase; color: var(--hr-violet);
}
.hr-pinbtn .hr-i { width: 1.25rem; height: 1.25rem; color: var(--hr-ink); }
.hr-pinbtn:hover span { text-decoration: underline 2px var(--hr-violet); text-underline-offset: .35em; }
/* a canvas that failed: the poster hangs, No. 04 stays on the rail, nothing offers to hang another */
.hr-issue.hr-static :is(#hr-hint, #hr-pin, .hr-hangit, .hr-cl-b) { display: none !important; }
.hr-capwrap { grid-column: 6 / 11; grid-row: 4; padding-top: 1.25rem; position: relative; z-index: 2; }
.hr-cap { font-size: 1rem; line-height: 1.5; max-width: 52ch; }
.hr-cap i { font-size: 1.0625rem; }
.hr-cap-no { font-variant-numeric: lining-nums; letter-spacing: .02em; }
.hr-cap-foot { display: flex; align-items: flex-start; gap: 1rem; margin-top: 1rem; }
.hr-chart { width: 48px; height: 48px; flex: none; }
.hr-hint { font: italic .9375rem/1.45 var(--hr-t); color: var(--hr-soft); max-width: 44ch; }
.hr-hint-t { display: none; }
@media (hover: none) { .hr-hint-f { display: none; } .hr-hint-t { display: inline; } }
.hr-lines { grid-column: 1 / 6; grid-row: 4; padding-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem var(--hr-g); }
.hr-lines a { display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; align-items: baseline; }
.hr-ln-n { font: 400 1.75rem/1 var(--hr-d); font-variant-numeric: lining-nums; }
.hr-ln-t { font-size: .9375rem; line-height: 1.45; }
.hr-ln-t i { font-size: 1.0625rem; margin-right: .2rem; }
.hr-lines a:hover i, .hr-toc a:hover .hr-toc-w { text-decoration: underline; text-decoration-color: var(--hr-violet); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.hr-open { grid-column: 9 / -1; grid-row: 5; justify-self: end; margin-top: 2.5rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.hr-cover .hr-folio { left: var(--hr-m); bottom: 1.75rem; }

/* ── 02 contents ───────────────────────────────────────────────────────────────────────────────── */
.hr-contents .hr-h2i { grid-column: 1 / 6; }
.hr-toc { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hr-g); row-gap: clamp(3rem, 6vw, 6rem); margin-top: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.hr-toc a { display: block; }
.hr-toc-n { display: block; font: 400 clamp(5rem, 18vw, 19rem)/.8 var(--hr-d); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.hr-toc-w { display: inline-block; margin-top: 1rem; font: italic 1.625rem/1.2 var(--hr-t); }
.hr-toc-d { display: block; margin-top: .35rem; max-width: 26ch; font-size: 1rem; line-height: 1.5; color: var(--hr-soft); }
.hr-toc-1 { grid-column: 1 / 4; }
.hr-toc-2 { grid-column: 5 / 8; margin-top: 11vw; }
.hr-toc-3 { grid-column: 9 / 12; margin-top: 2.8vw; }
.hr-toc-4 { grid-column: 2 / 5; }
.hr-toc-5 { grid-column: 7 / 10; margin-top: 8.3vw; }
.hr-note { grid-column: 9 / -1; margin-top: clamp(3rem, 6vw, 6rem); }

/* ── 03 cloth ──────────────────────────────────────────────────────────────────────────────────── */
.hr-clothsp .hr-stand { grid-column: 1 / 6; }
.hr-plates { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hr-g); row-gap: clamp(3.5rem, 6vw, 6rem); margin-top: clamp(3.5rem, 7vw, 7rem); }
.hr-plate { grid-column: 1 / 6; display: grid; grid-template-columns: 15rem 1fr; column-gap: 3.75rem; align-items: start; }
.hr-plate:nth-child(even) { grid-column: 7 / 12; margin-top: 7.5rem; }
.hr-plate-fig { position: relative; grid-row: 1 / span 3; width: 15rem; margin-bottom: 3rem; }
.hr-plate-sw { width: 15rem; height: 15rem; background: var(--hr-support); }
.hr-plate-ch { position: absolute; right: -2.25rem; bottom: -2.25rem; width: 6rem; height: 6rem; padding: 0; background: var(--bg); outline: .375rem solid var(--bg); }
.hr-plate .hr-h3 { padding-top: .25rem; }
.hr-plate .hr-capn { margin-top: .6rem; max-width: 36ch; }
.hr-plate .hr-hangit { margin-top: .4rem; justify-self: start; }
.hr-macro { grid-column: 1 / -1; margin: clamp(5rem, 9vw, 9rem) calc(-1 * var(--hr-m)) 0; }
.hr-macro img { width: 100%; height: min(78vh, 60vw); object-fit: cover; object-position: 52% 50%; }
.hr-macro figcaption { margin: 1.5rem var(--hr-m) 0 calc(var(--hr-m) + 8 * (var(--hr-c) + var(--hr-g))); }
.hr-draft { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hr-g); margin-top: clamp(5rem, 9vw, 9rem); align-items: start; }
.hr-draft-intro { grid-column: 1 / 6; }
.hr-draft-lead { margin-top: 1rem; font: italic clamp(1.25rem, 1.05rem + .8vw, 1.5rem)/1.38 var(--hr-t); max-width: 30ch; }
.hr-draft-how { margin-top: 1rem; max-width: 40ch; font-size: 1rem; line-height: 1.55; }
.hr-presets { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 1.25rem; }
.hr-presets button { font: italic 1.0625rem/1 var(--hr-t); background: linear-gradient(var(--hr-chalk), var(--hr-chalk)) 0 72% / 100% 1px no-repeat; }
.hr-presets button:hover { color: var(--hr-violet); background-image: linear-gradient(var(--hr-violet), var(--hr-violet)); }
.hr-draft-grid { grid-column: 6 / 10; display: grid; grid-template-columns: repeat(8, 2.75rem); gap: 2px; justify-content: center; }
.hr-cell { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: var(--hr-support); cursor: pointer; transition: background-color .12s; }
.hr-cell[aria-pressed="true"] { background: var(--hr-ink); }
.hr-cell:hover { background: #9C9478; }
.hr-cell[aria-pressed="true"]:hover { background: #2A2825; }
.hr-cell:focus-visible { outline-offset: 1px; position: relative; z-index: 1; }
.hr-draft-out { grid-column: 10 / -1; }
.hr-draft-sw { width: 12.5rem; height: 12.5rem; background: var(--hr-support); }
.hr-verdict { margin-top: 1rem; font: italic 1.0625rem/1.45 var(--hr-t); max-width: 26ch; min-height: 4.4em; }
.hr-draft-out .hr-hangit { margin-top: .5rem; }
/* without JS the noscript itself is the spread's grid item, so it takes the full row */
.hr-clothsp > noscript { display: block; grid-column: 1 / -1; }
.hr-nobook { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hr-g); margin-top: clamp(3rem, 6vw, 6rem); align-items: start; }
.hr-nobook picture { grid-column: 1 / 8; }
.hr-nobook img { width: 100%; height: auto; }
.hr-nobook figcaption { grid-column: 8 / -1; }
.hr-nobook-l li { font-size: 1rem; line-height: 1.45; padding-block: .3rem; }
.hr-nobook-l span { font-variant-numeric: lining-nums; margin-right: .35rem; }

/* ── 04 cut: the photograph opens along its own chalk line, and the page carries the line on ───── */
.hr-cutfig { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hr-g); align-items: end; }
.hr-cutpic { grid-column: 3 / -1; grid-row: 1; position: relative; margin-right: calc(-1 * var(--hr-m)); }
/* height: auto, or the img's height attribute (1024) wins over the ratio */
.hr-cutpic img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hr-cutpic { --hr-o0: polygon(113.93% -49.89%, -33.3% 150.11%, -33.43% 149.89%, 113.8% -50.11%); --hr-o1: polygon(158.61% 24.12%, 11.38% 224.12%, -78.11% 75.88%, 69.12% -124.12%); }
/* measured on cut.webp: the chalk line leaves the lower edge 3.5% in, at 42.2° (x = 1185 − 1.105y);
   the page's line starts there, at 42.9°, and runs down into cols 1–2 */
.hr-cutline { position: absolute; top: 100%; left: 3.5%; width: calc(var(--hr-c) + var(--hr-g) + 3.5% - 1.25rem); height: auto; aspect-ratio: 100 / 92.93; translate: -100% 0; color: var(--hr-chalk); overflow: visible; }
.hr-cutfig figcaption { grid-column: 1 / 3; grid-row: 1; padding-bottom: .25rem; }
.hr-cutsp .hr-stand { grid-column: 2 / 7; margin-top: clamp(6.5rem, 10vw, 9.5rem); }
.hr-cut-body { grid-column: 2 / 8; margin-top: 2rem; }
.hr-standing { grid-column: 9 / -1; grid-row: 4 / span 2; margin-top: clamp(6.5rem, 10vw, 9.5rem); }
.hr-measures { counter-reset: hr-m; margin-top: 1.25rem; }
.hr-measures li { display: grid; grid-template-columns: 2rem 1fr; padding-block: .45rem; font-size: 1rem; line-height: 1.45; }
.hr-measures li::before { counter-increment: hr-m; content: counter(hr-m, decimal-leading-zero); font: italic .8125rem/1.75 var(--hr-t); font-variant-numeric: lining-nums; color: var(--hr-soft); }
.hr-measures i { display: block; grid-column: 2; color: var(--hr-soft); font-size: .9375rem; }
.hr-pull-asked { grid-column: 2 / 12; }

/* ── 05 canvas: the plate ──────────────────────────────────────────────────────────────────────── */
.hr-platex { grid-column: 1 / 8; }
.hr-px { width: 100%; height: auto; color: var(--fg); overflow: visible; }
.hr-ly-f { fill: var(--bg); stroke: var(--hr-chalk); stroke-width: 1.5; stroke-linejoin: round; }
.hr-ly-v { fill: var(--hr-violet); stroke: var(--hr-chalk); stroke-width: 1.5; stroke-linejoin: round; }
/* the cloth layer is the cloth on the rail: its flat colour, with the twill drawn in a thread that shows on it */
.hr-ly-c { fill: var(--hr-sw-c); transition: fill .4s; }
.hr-pt.hr-pt-c { stroke: var(--hr-sw-t); opacity: .24; }
.hr-pt { fill: none; stroke: currentColor; stroke-width: .7; opacity: .3; }
.hr-pd { fill: currentColor; opacity: .38; }
.hr-roll { fill: none; stroke: var(--hr-chalk); stroke-width: 1.6; stroke-dasharray: 7 5; stroke-linecap: round; }
.hr-pad polyline { fill: none; stroke: var(--hr-chalk); stroke-width: 1; stroke-linejoin: round; }
.hr-st { fill: none; stroke: var(--hr-chalk); stroke-width: 1.6; stroke-linecap: round; }
.hr-sheen { fill: none; stroke: rgba(229, 223, 198, .3); stroke-width: 4; stroke-linecap: round; }
.hr-lab path { fill: none; stroke: var(--hr-chalk); stroke-width: .8; }
.hr-lab text { font: italic 15px var(--hr-t); fill: currentColor; }
.hr-key { grid-column: 9 / -1; align-self: center; display: grid; gap: 1.1rem; }
.hr-key ol { display: grid; gap: 1.1rem; }
.hr-key-last { padding-left: 2.25rem; font-size: 1rem; line-height: 1.5; }
.hr-key li { display: grid; grid-template-columns: 2.25rem 1fr; font-size: 1rem; line-height: 1.5; }
.hr-key-n { font: italic .8125rem/1.85 var(--hr-t); font-variant-numeric: lining-nums; color: var(--hr-soft); }
.hr-cols { grid-column: 2 / 12; columns: 2; column-gap: calc(2 * var(--hr-g) + var(--hr-c)); margin-top: clamp(4rem, 7vw, 7rem); max-width: none; }
.hr-cols p { break-inside: avoid-column; }
.hr-dc::first-letter { float: left; font: 400 4.6em/.8 var(--hr-d); margin: .06em .08em 0 0; }
@supports (initial-letter: 4) { .hr-dc::first-letter { float: none; font-size: 1em; line-height: 1; initial-letter: 4; margin: 0 .12em 0 0; } }

/* ── 06 fitting ────────────────────────────────────────────────────────────────────────────────── */
.hr-fitfig { grid-column: 1 / 6; grid-row: 2 / span 2; }
.hr-fitfig img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.hr-fitfig figcaption { margin-top: 1rem; }
.hr-stages { grid-column: 7 / -1; grid-row: 2; align-self: center; display: grid; gap: clamp(2.5rem, 4.5vw, 4.5rem); }
.hr-stages li { display: grid; grid-template-columns: 2.5rem 1fr; }
.hr-stk { width: 1.5rem; height: 1.5rem; color: var(--hr-chalk); margin-top: .2rem; }
.hr-stages p { grid-column: 2; margin-top: .6rem; max-width: 44ch; }
.hr-timing { grid-column: 7 / -1; grid-row: 3; align-self: end; padding-left: 2.5rem; font: italic clamp(1.25rem, 1.05rem + .8vw, 1.5rem)/1.38 var(--hr-t); max-width: 34ch; }

/* ── 07 worn ───────────────────────────────────────────────────────────────────────────────────── */
.hr-wornsp .hr-word { margin-bottom: -.04em; position: relative; z-index: 1; }
.hr-wornfig { grid-column: 1 / -1; margin: 0 calc(-1 * var(--hr-m)); }
.hr-wornfig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* Worn is the hold: it arrives on a hard cut and never moves */
.hr-wornfig figcaption { max-width: calc(8 * var(--hr-c) + 7 * var(--hr-g)); margin: 1.75rem var(--hr-m) 0 calc(var(--hr-m) + var(--hr-c) + var(--hr-g)); }
.hr-cap2 { columns: 2; column-gap: var(--hr-g); max-width: none; }
.hr-make { grid-column: 1 / -1; margin-top: clamp(4.5rem, 8vw, 8rem); }
.hr-make .hr-label { margin-bottom: 1.75rem; color: var(--hr-soft); }
.hr-make dl { display: grid; row-gap: clamp(1.25rem, 2.2vw, 2rem); }
.hr-make dl > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hr-g); align-items: baseline; }
.hr-make dt { grid-column: 1 / 7; font: 400 clamp(1.75rem, 1.4rem + 1vw, 2.25rem)/1.1 var(--hr-d); letter-spacing: -.01em; }
.hr-make dd { grid-column: 8 / -1; font: italic 1.0625rem/1.5 var(--hr-t); max-width: 44ch; }

/* ── 08 asked ──────────────────────────────────────────────────────────────────────────────────── */
.hr-qa { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); column-gap: var(--hr-g); row-gap: clamp(2.75rem, 4.5vw, 4.5rem); }
.hr-qa > div { grid-column: span 5; }
.hr-qa > div:nth-child(even) { grid-column: 7 / span 5; }
.hr-qa p { margin-top: .75rem; max-width: 40ch; }

/* ── 09 come in: the letter, set in prose; every blank is a chalk underline ───────────────────── */
.hr-comesp .hr-intro { grid-column: 1 / 3; font-size: clamp(1.0625rem, .95rem + .35vw, 1.25rem); }
.hr-letter { grid-column: 3 / 11; font: 400 clamp(1.25rem, 1.05rem + .8vw, 1.625rem)/1.6 var(--hr-t); }
.hr-l-to { margin-bottom: .35em; }
.hr-letter label { font: inherit; }
.hr-blank {
  display: inline-block; vertical-align: baseline; min-height: 44px; margin: 0 .1em; padding: 0 .15em; border: 0; border-radius: 0;
  color: var(--fg); font: inherit; background: var(--hr-ul) 0 100% / 100% 6px no-repeat;
}
.hr-blank-name { width: 14ch; }
.hr-blank-reply { width: 22ch; }
.hr-blank:focus-visible { outline: none; background-image: var(--hr-ulv); }
.hr-l-p { margin-left: -.1em; }
.hr-l-dot { color: var(--hr-soft); }
.hr-kinds { font-style: italic; }
.hr-kinds label, .hr-days label { position: relative; display: inline-block; min-height: 44px; line-height: 44px; cursor: pointer; }
.hr-days label { margin-right: .5em; font-variant-numeric: lining-nums; }
.hr-days label:last-child { margin-right: 0; }
.hr-kinds input, .hr-days input { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; width: 1px; height: 1px; }
.hr-kinds label:hover span, .hr-days label:hover span { color: var(--hr-violet); }
.hr-kinds label:has(input:checked) span, .hr-days label:has(input:checked) span { color: var(--hr-violet); background: var(--hr-ulv) 0 100% / 100% 5px no-repeat; padding-bottom: .12em; }
.hr-l-note { margin-top: .6em; }
.hr-l-note label { display: block; }
/* three ruled lines, so the note has somewhere to go and no empty box above its underline */
.hr-l-note textarea {
  display: block; width: 100%; height: 4.8em; margin: 0; padding: 0; line-height: 1.6; resize: vertical;
  background: linear-gradient(transparent calc(100% - 2px), var(--hr-chalk) 0) 0 0 / 100% 1.6em local;
}
.hr-l-note .hr-fhint { display: block; margin-top: .45rem; font-size: .9375rem; }
.hr-issue { --hr-ul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.3C80 2.5 170 3.9 250 3.1S350 2.6 399 3.4' fill='none' stroke='%230E0D0C' stroke-opacity='.7' stroke-width='2' stroke-dasharray='60 1.5 90 1 40 2 120 1'/%3E%3C/svg%3E"); --hr-ulv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.3C80 2.5 170 3.9 250 3.1S350 2.6 399 3.4' fill='none' stroke='%235A2D82' stroke-width='2.5'/%3E%3C/svg%3E"); }
.hr-fhint { font: italic .72em/1.45 var(--hr-t); color: var(--hr-soft); }
.hr-fchip { display: inline-block; vertical-align: -.12em; width: 2.2rem; height: 1.25rem; background: var(--sw, #161C2C); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 80%, 87.5% 100%, 75% 80%, 62.5% 100%, 50% 80%, 37.5% 100%, 25% 80%, 12.5% 100%, 0 80%); }
.hr-fchip canvas { width: 100%; height: 100%; }
#hr-f-cloth { color: var(--hr-violet); font-style: italic; }
.hr-choose { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hr-violet); vertical-align: .1em; }
.hr-send { margin-top: 2rem; }
.hr-btnw { position: relative; display: inline-block; }
.hr-btn {
  min-height: 3rem; padding: 0 2.75rem 0 1.5rem; border: 0; background: var(--hr-ink); color: var(--hr-calico); cursor: pointer;
  font: .8125rem/1 var(--hr-t); letter-spacing: .16em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 6%, calc(100% - 8px) 12%, 100% 18%, calc(100% - 8px) 24%, 100% 30%, calc(100% - 8px) 36%, 100% 42%, calc(100% - 8px) 48%, 100% 54%, calc(100% - 8px) 60%, 100% 66%, calc(100% - 8px) 72%, 100% 78%, calc(100% - 8px) 84%, 100% 90%, calc(100% - 8px) 96%, calc(100% - 4px) 100%, 0 100%);
  transition: background-color .2s;
}
.hr-btn:hover { background: var(--hr-violet); }
.hr-status { min-height: 1.5em; font: italic 1.0625rem/1.4 var(--hr-t); color: var(--hr-violet); }

/* ── 10 colophon, and the end frame ────────────────────────────────────────────────────────────── */
.hr-colo { padding-bottom: 0; }
.hr-colo .hr-h2i { grid-column: 1 / 6; }
.hr-chalk-s { grid-column: 1 / 3; margin-top: 1.5rem; }
.hr-depts { grid-column: 2 / 7; margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; gap: .6rem; }
.hr-depts > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; }
.hr-depts dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hr-soft); }
.hr-depts dd { font: italic 1.0625rem/1.45 var(--hr-t); }
.hr-adl { grid-column: 8 / -1; align-self: end; font: 400 clamp(2rem, 1rem + 4vw, 5rem)/1 var(--hr-d); letter-spacing: -.02em; }
.hr-end { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hr-g); margin-top: clamp(5rem, 10vw, 10rem); align-items: end; }
/* the end frame: the cover's short rod, empty, at the cover cloth's span and x; the pin under its
   right end; the note beneath, in its own row, clear of every line */
.hr-endframe {
  --eo: calc(var(--hx0) + var(--hl) + .07 * var(--cw) - 18px);
  grid-column: 1 / -1; grid-row: 1; position: relative; width: calc(.86 * var(--cw) + 36px); margin-left: var(--eo);
}
.hr-rod-end { display: block; width: 100%; height: 14px; fill: var(--hr-calico); overflow: visible; }
.hr-endpin { position: absolute; right: -2px; top: 22px; width: 26px; height: 26px; color: var(--hr-calico); rotate: 38deg; }
.hr-end-note { width: max-content; max-width: calc(100vw - 2 * var(--hr-m) - var(--eo)); margin-top: 3.5rem; font-size: 1.0625rem; }
#hr-again { margin-left: .75rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(var(--hr-violet), var(--hr-violet)) 0 78% / 100% 2px no-repeat; }
.hr-end .hr-folio { position: static; grid-column: 1 / 5; grid-row: 2; margin: 2.5rem 0 1.5rem; }
.hr-end-name { grid-column: 1 / -1; grid-row: 3; height: calc(.43 * 30vw); overflow: hidden; font: 400 30vw/.8 var(--hr-d); letter-spacing: -.035em; white-space: nowrap; }

/* ── motion: gravity and chalk. Reduced motion shows every element finished and still ──────────── */
@media (prefers-reduced-motion: no-preference) {
  .hr-js .hr-rv { transition: opacity .7s cubic-bezier(.3, 1.25, .5, 1) calc(var(--i, 0) * 70ms), translate .7s cubic-bezier(.3, 1.25, .5, 1) calc(var(--i, 0) * 70ms); }
  .hr-js .hr-rv:not(.hr-in) { opacity: 0; translate: 0 -10px; }
  .hr-js .hr-rv-f:not(.hr-in) { translate: none; }
  .hr-js .hr-capwrap { animation: hr-fade .6s .7s both; }
  @supports (animation-timeline: view()) {
    .hr-wr { animation: hr-dr linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .hr-wl { animation: hr-dl linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .hr-chalk { animation: hr-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
    .hr-cutpic img { animation: hr-open linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .hr-cutline { animation: hr-draw2 linear both; animation-timeline: view(); animation-range: cover 30% cover 45%; }
    .hr-platex { view-timeline: --hr-plate block; }
    .hr-ly { animation: hr-explode linear both; animation-timeline: --hr-plate; animation-range: entry 30% cover 50%; }
  }
  @supports not (animation-timeline: view()) {
    .hr-js .hr-chalk { clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.45, 0, .2, 1); }
    .hr-js .hr-chalk.hr-in { clip-path: inset(-4px -4px -4px 0); }
    .hr-js .hr-cutpic img { clip-path: var(--hr-o0); transition: clip-path .9s cubic-bezier(.6, 0, .2, 1); }
    .hr-js .hr-cutpic.hr-in img { clip-path: var(--hr-o1); }
    .hr-js .hr-cutline { clip-path: inset(0 0 100% 100%); transition: clip-path .8s .6s cubic-bezier(.45, 0, .2, 1); }
    .hr-js .hr-cutline.hr-in { clip-path: inset(-4px); }
  }
}
@keyframes hr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hr-dr { from { translate: -3vw 0; } to { translate: 3vw 0; } }
@keyframes hr-dl { from { translate: 3vw 0; } to { translate: -3vw 0; } }
@keyframes hr-draw { from { clip-path: inset(-4px 100% -4px 0); } to { clip-path: inset(-4px -4px -4px 0); } }
@keyframes hr-draw2 { from { clip-path: inset(0 0 100% 100%); } to { clip-path: inset(-4px); } }
@keyframes hr-open { from { clip-path: var(--hr-o0); } to { clip-path: var(--hr-o1); } }
@keyframes hr-explode { from { translate: calc(var(--k) * var(--hr-ex, -20px)) calc(var(--k) * var(--hr-ey, 15px)); } to { translate: 0 0; } }

/* the swatch book's morph: the chip grows onto the rod while the old cloth shrinks into its slot */
::view-transition-group(.hr-sw) { animation-duration: .56s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(.hr-sw), ::view-transition-new(.hr-sw) { height: 100%; object-fit: cover; animation-duration: .28s; }
::view-transition-group(root) { animation-duration: .28s; }
.hr-chip, .hr-hangit { view-transition-class: hr-sw; }

/* ── 834: one-line masthead, the book laid out under the cover ─────────────────────────────────── */
@media (max-width: 1100px) and (min-width: 701px) {
  .hr-lede { grid-column: 1 / 6; }
  .hr-bookwrap { grid-column: 1 / -1; grid-row: 5; padding-top: 2.5rem; }
  .hr-bookwrap .hr-label { padding-left: 0; }
  .hr-book { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
  .hr-chip { grid-template-columns: 1fr auto; grid-template-rows: 2.25rem auto; row-gap: .4rem; height: auto; max-width: none; }
  .hr-chip-f { grid-column: 1 / -1; grid-row: 1; }
  .hr-chip-n { grid-row: 2; }
  .hr-tick { position: static; grid-row: 2; translate: none; }
  .hr-chip[aria-pressed="true"] { translate: 0 -8px; }
  .hr-capwrap { grid-column: 6 / -1; }
  .hr-lines { grid-template-columns: 1fr; }
  .hr-open { grid-row: 6; }
  .hr-draft-intro { grid-column: 1 / -1; }
  .hr-draft-grid { grid-column: 1 / 8; margin-top: 2.5rem; justify-content: start; }
  .hr-draft-out { grid-column: 8 / -1; margin-top: 2.5rem; }
  .hr-plate { grid-template-columns: 1fr; }
  .hr-plate-fig { grid-row: auto; }
  .hr-cutfig figcaption { grid-column: 7 / -1; grid-row: 2; margin-top: 1.5rem; }
  .hr-key { grid-column: 8 / -1; }
  .hr-comesp .hr-intro { grid-column: 1 / 8; margin-bottom: 2rem; }
  .hr-letter { grid-column: 1 / -1; }
  .hr-standing { grid-column: 8 / -1; }
  .hr-cut-body { grid-column: 2 / 8; }
}

/* ── 390: designed for the hand, not squeezed ──────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .hr-issue {
    --hr-c: calc((100vw - 2 * var(--hr-m) - 3 * var(--hr-g)) / 4);
    /* "Row" sets flush right at 1.57em; its R's stem sits about 1.5em in from the right. The cloth
       hangs left of it and overlaps only the stem, and the rod stops on the stem */
    --mf: 30vw; --cw: min(47vw, 12.5rem); --hx0: 0px;
    --rs: calc(100vw - 2 * var(--hr-m) - 1.5 * var(--mf));
    --hl: calc(var(--rs) + 8px - var(--cw));
  }
  .hr-cloth > .hr-rod { width: calc(var(--rs) - var(--hl) - .07 * var(--cw) + 18px); }
  .hr-endframe { width: calc(var(--rs) - var(--eo)); }
  .hr-sp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hr-sp > * { grid-column: 1 / -1; }
  .hr-rh { top: .875rem; }
  .hr-strip-now { display: none; }
  .hr-cover { --mt: 3.25rem; grid-template-rows: 1.75rem auto; padding-bottom: 4rem; }
  .hr-cover .hr-rh { flex-direction: column; justify-content: flex-start; gap: .15rem; height: 1.75rem; }
  .hr-mast { display: flex; flex-direction: column; white-space: normal; }
  .hr-mast-b { align-self: flex-end; }
  .hr-cloth { left: 0; width: calc(100vw - 2 * var(--hr-m)); top: calc(var(--mt) + 1.12 * var(--mf) - 20px); height: calc(var(--ch) + 60px); }
  .hr-canvas { left: calc(-1 * var(--hl) - var(--hr-m)); width: 100vw; height: calc(var(--ch) + 130px); }
  .hr-lede { display: contents; }
  #hr-h1 { grid-column: 1 / -1; grid-row: 3; margin-top: calc(var(--ch) + 44px - .48 * var(--mf)); font-size: 2.25rem; line-height: 1.11; }
  .hr-bookwrap { grid-column: 1 / -1; grid-row: 4; padding-top: 1.25rem; }
  .hr-bookwrap .hr-label { padding-left: 0; margin-bottom: .25rem; }
  .hr-book { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--hr-m)); padding: 12px var(--hr-m) 6px; scroll-padding-inline: var(--hr-m); scrollbar-width: none; }
  .hr-book li { flex: none; scroll-snap-align: start; }
  .hr-chip { width: 64px; max-width: none; height: 44px; grid-template-columns: 1fr auto; grid-template-rows: 28px 16px; }
  .hr-chip-f { grid-column: 1 / -1; grid-row: 1; }
  .hr-chip-n { grid-row: 2; align-self: end; }
  .hr-tick { position: static; grid-row: 2; translate: none; align-self: end; width: .75rem; height: .75rem; }
  .hr-chip[aria-pressed="true"] { translate: 0 -8px; }
  .hr-chip-n::after { bottom: -3px; }
  .hr-capwrap { grid-column: 1 / -1; grid-row: 5; padding-top: 1.25rem; }
  .hr-cap { font-size: .9375rem; line-height: 1.53; }
  .hr-sub { grid-column: 1 / -1; grid-row: 6; margin-top: 2.75rem; max-width: none; font-size: 1.0625rem; line-height: 1.59; }
  .hr-lines { grid-column: 1 / -1; grid-row: 7; grid-template-columns: 1fr; margin-top: 1.75rem; gap: 1rem; }
  .hr-open { grid-column: 1 / -1; grid-row: 8; justify-self: end; margin-top: 1.5rem; }
  .hr-toc { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .hr-toc > li { grid-column: 1 / -1; margin-top: 0; }
  .hr-toc a { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: end; }
  .hr-toc-n { font-size: 24vw; grid-row: 1 / span 2; }
  .hr-toc-w { margin-top: 0; }
  .hr-toc > li:nth-child(even) a { grid-template-columns: 1fr auto; text-align: right; }
  .hr-toc > li:nth-child(even) .hr-toc-n { grid-column: 2; }
  .hr-toc > li:nth-child(even) :is(.hr-toc-w, .hr-toc-d) { grid-column: 1; justify-self: end; }
  .hr-plates { row-gap: 3rem; margin-top: 3rem; }
  .hr-plate, .hr-plate:nth-child(even) { grid-column: 1 / -1; margin-top: 0; grid-template-columns: 8.5rem 1fr; column-gap: 1.5rem; }
  .hr-plate-fig { width: 8.5rem; grid-row: 1 / span 2; margin-bottom: 1.75rem; }
  .hr-plate-sw { width: 8.5rem; height: 8.5rem; }
  .hr-plate-ch { width: 3.5rem; height: 3.5rem; right: -1.25rem; bottom: -1.25rem; outline-width: .25rem; }
  .hr-plate .hr-capn { grid-column: 1 / -1; }
  .hr-plate .hr-hangit { grid-column: 1 / -1; }
  .hr-macro img { height: auto; aspect-ratio: 3 / 4; }
  .hr-macro figcaption, .hr-wornfig figcaption { margin: 1.25rem var(--hr-m) 0; max-width: none; }
  .hr-draft { grid-template-columns: 1fr; }
  .hr-draft > * { grid-column: 1 / -1; }
  /* 42px squares, narrower only where the measure is under 350px (a 360 phone) */
  .hr-draft-grid { grid-template-columns: repeat(8, min(42px, calc((100vw - 2 * var(--hr-m) - 14px) / 8))); justify-content: start; margin-top: 2rem; }
  .hr-cell { width: 100%; height: auto; aspect-ratio: 1; }
  .hr-draft-out { margin-top: 1.75rem; display: grid; grid-template-columns: 8.5rem 1fr; column-gap: 1.25rem; align-items: start; }
  .hr-draft-sw { width: 8.5rem; height: 8.5rem; }
  .hr-verdict { margin-top: 0; }
  .hr-draft-out .hr-hangit { grid-column: 1 / -1; }
  .hr-nobook { grid-template-columns: 1fr; }
  .hr-nobook picture, .hr-nobook figcaption { grid-column: 1; }
  .hr-nobook figcaption { margin-top: 1.25rem; }
  .hr-cutfig { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hr-cutpic { grid-column: 2 / -1; }
  .hr-cutpic img { aspect-ratio: 3 / 4; }
  .hr-cutpic { --hr-o0: polygon(192.66% -59.85%, -131.29% 160.15%, -131.65% 159.85%, 192.3% -60.15%); --hr-o1: polygon(264.07% -.7%, -59.87% 219.3%, -203.06% 100.7%, 120.89% -119.3%); }
  /* the 3:4 crop: its chalk line leaves the left edge 70.9% down */
  .hr-cutline { top: 70.9%; left: 0; width: calc(var(--hr-c) + var(--hr-g) - .25rem); }
  .hr-cutfig figcaption { grid-column: 1 / -1; grid-row: 2; margin-top: 1.5rem; }
  .hr-cutsp .hr-stand, .hr-standing { margin-top: 3rem; }
  .hr-standing { grid-row: auto; }
  .hr-cut-body { margin-top: 1.5rem; }
  .hr-platex { margin-inline: calc(-.5 * var(--hr-m)); }
  .hr-ly { --hr-ex: -10px; --hr-ey: 7.5px; }
  .hr-key { margin-top: 2.5rem; }
  .hr-cols { columns: 1; margin-top: 3rem; }
  .hr-fitfig { grid-row: auto; }
  .hr-fitfig img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
  .hr-stages { grid-row: auto; margin-top: 3rem; }
  .hr-timing { grid-row: auto; margin-top: 2.5rem; padding-left: 0; }
  .hr-wornfig img { aspect-ratio: 3 / 4; }
  .hr-cap2 { columns: 1; }
  .hr-cl-worn { grid-template-columns: 1fr; row-gap: .75rem; }
  .hr-make dl > div { grid-template-columns: 1fr; row-gap: .35rem; }
  .hr-make dt, .hr-make dd { grid-column: 1; }
  .hr-qa { grid-template-columns: 1fr; }
  .hr-qa > div, .hr-qa > div:nth-child(even) { grid-column: 1; }
  .hr-comesp .hr-intro { margin-bottom: 2.5rem; }
  .hr-blank, .hr-blank-name, .hr-blank-reply { display: block; width: 100%; margin: 0 0 .2em; }
  .hr-depts > div { grid-template-columns: 6.5rem 1fr; }
  .hr-adl { margin-top: 2.5rem; }
  .hr-end { grid-template-columns: 1fr; }
  .hr-endframe, .hr-end .hr-folio { grid-column: 1; }
  .hr-end .hr-folio { margin-top: 2rem; }
}