/* The Gist reading room: generated walnut plates, live printed covers, on the brand orange.
   The wall is orange "wallpaper": a tonal stripe and a warm pool of lamp light, no new colours. */
.reading-room, .mantel-sec {
  isolation: isolate;
  background-color: var(--orange);
  background-image: radial-gradient(ellipse at 74% 34%, rgb(255 214 150 / .22), transparent 55%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgb(120 30 6 / .07) 46px 48px, transparent 48px 54px, rgb(120 30 6 / .05) 54px 55px);
}
.reading-room.hero .shell { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 3.5vw, 52px); min-height: min(calc(100svh - 160px), 660px); padding-block: clamp(40px, 5vw, 72px); }
.reading-room.hero h1 { font-size: clamp(46px, 5vw, 76px); line-height: .96; max-width: 10ch; }
.reading-room.hero .sub { color: var(--cream); font-weight: 500; opacity: .88; font-size: clamp(17px, 1.3vw, 19px); }
.reading-room .ctas { gap: 10px; }
.reading-room .ctas .btn { font-size: 14px; padding-inline: 18px; }
.reading-room :focus-visible { outline-color: var(--cream); }
.reading-room-display { position: relative; min-width: 0; }
.reading-room-display .rack-scroll { position: relative; z-index: 2; overflow: visible; }
.reading-room .rack { padding-top: 5%; margin-right: 3%; }
.reading-room .rack .note { right: 20%; top: -5%; color: var(--cream); }
/* The oak wall shelf. Its board's top face runs from the back edge at 27.8% of the plate's height to the front lip at 37%;
   the covers stand on it just behind the lip (bottom 64.2%), and the clear space under the corbels is pulled back up. */
.reading-room .rack:has(.oak-shelf) { padding-top: 34%; }
.reading-room .oak-shelf { aspect-ratio: 2172 / 724; margin-bottom: -5%; filter: drop-shadow(0 18px 16px rgb(60 16 0 / .26)); }
.reading-room .oak-shelf .row { left: 6%; right: 6%; bottom: 64.2%; gap: 3.5%; justify-content: center; }
.reading-room .oak-shelf .slot { flex: 0 0 29%; }
/* a soft contact shadow where each cover meets the board */
.reading-room .oak-shelf .slot::after { content: ""; position: absolute; z-index: -1; left: -7%; right: -7%; bottom: -2.4%; height: 6%; pointer-events: none; background: radial-gradient(closest-side, rgb(40 14 0 / .55), rgb(40 14 0 / .2) 60%, transparent); }
/* the covers keep their own photo colour, a little quieter so the three sit together, under a faint printed-paper grain */
.oak-shelf .print.colour img { filter: saturate(.72) sepia(.08) contrast(1.04); mix-blend-mode: normal; visibility: visible; }
.oak-shelf .print.colour canvas { display: none; }
.oak-shelf .print.colour::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .07 0 0 0 0 .06 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(rgb(18 19 17 / .5) .6px, transparent 1px); background-size: 160px 160px, 3px 3px; }
.reading-lamp { position: absolute; z-index: 1; width: 19%; height: auto; right: -3%; bottom: 76%; pointer-events: none; filter: drop-shadow(0 10px 20px rgb(0 0 0 / .2)); }
.reading-room .swipe-hint { display: none; }
.mantel-sec { padding-block: clamp(28px, 4vw, 56px); }
.mantel-sec .plate { filter: drop-shadow(0 20px 16px rgb(0 0 0 / .3)); }
@media (max-width: 900px) {
  .reading-room.hero .shell { grid-template-columns: minmax(0, 1fr); padding-block: 32px 24px; gap: 32px; min-height: 0; }
  .reading-room.hero h1 { max-width: 14ch; font-size: clamp(44px, 8vw, 70px); }
  .reading-room.hero .sub { max-width: 48ch; margin-top: 16px; }
  .reading-room .ctas { margin-top: 20px; }
  .reading-room-display { padding-top: 18px; }
  .reading-room .rack-scroll { margin-inline: 0; padding-block: 18px 8px; }
  .reading-room .rack-scroll .rack { width: auto; margin-inline: 0; }
  .reading-room .rack .note { top: -9%; right: 21%; font-size: 25px; }
  .reading-lamp { right: -1%; bottom: 76%; width: 17%; }
}
@media (max-width: 480px) {
  .reading-room.hero h1 { font-size: clamp(40px, 11vw, 52px); max-width: 13ch; }
  .reading-room .ctas .btn { font-size: 13px; padding-inline: 14px; min-height: 44px; }
  /* on phones the whole shelf, both brackets included, sits inside the screen width, and the empty
     parts of the plate above and below it are trimmed so the covers sit close under the buttons */
  .reading-room { overflow-x: clip; }
  .reading-room .oak-shelf { width: 100%; margin-left: 0; margin-bottom: -13%; }
  .reading-room .oak-shelf .row { left: 5%; right: 5%; gap: 2.5%; }
  .reading-room .oak-shelf .slot { flex-basis: 31%; }
  .reading-room .rack:has(.oak-shelf) { padding-top: 26%; }
  .reading-room-display { margin-inline: -10px; }
  .reading-room .rack-scroll { padding-block: 0 0; }
}

/* The Huw page mantel: cloth-bound volumes either side of two live Gists, shown in their own colour.
   --u is one unit of the binder scale; widths and heights are given in it. */
.mantel-sec.sec { padding-block: clamp(8px, 1.4vw, 20px) clamp(20px, 2.4vw, 36px); }
.mantel-sec .wshelf.ws-mantel { max-width: 1120px; padding-top: calc(var(--mw) * 28 / 22 - 4%); }
.ws-mantel .ws-base { container-type: inline-size; --u: calc(100cqw / 96); }
.ws-mantel .ws-row { left: 6.5%; right: 6.5%; isolation: isolate; }
.ws-mantel .print.colour img { filter: saturate(.78) sepia(.06) contrast(1.04); mix-blend-mode: normal; visibility: visible; }
.ws-mantel .print.colour canvas { display: none; }
.ws-mantel .run { position: relative; flex: none; display: flex; align-items: flex-end; }
/* the dark of the shelf behind and between the volumes */
.ws-mantel .run::before { content: ""; position: absolute; z-index: -1; left: 2%; right: 2%; bottom: 0; top: 14%; background: linear-gradient(rgb(40 12 0 / .35), rgb(25 7 0 / .7)); filter: blur(calc(.3 * var(--u))); }
.bd { --c: var(--blue); --f: var(--cream); position: relative; flex: none; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center;
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); margin: 0 calc(.08 * var(--u)); padding: calc(1.4 * var(--u)) 0 calc(1.2 * var(--u));
  color: var(--f); text-decoration: none; background-color: var(--c); border-radius: 0 0 calc(.12 * var(--u)) calc(.12 * var(--u));
  background-image: var(--weave), var(--cgrain); background-size: 3px 3px, 160px 160px;
  box-shadow: 0 calc(.1 * var(--u)) 0 calc(-.02 * var(--u)) rgb(15 4 0 / .7);
  transition: transform .55s var(--ease-out), filter .55s var(--ease-out); }
.bd.lt { background-blend-mode: soft-light, multiply; }
.bd:nth-child(4n+1) { height: calc((var(--h) - .25) * var(--u)); }
.bd:nth-child(4n+2) { width: calc((var(--w) - .15) * var(--u)); height: calc((var(--h) + .2) * var(--u)); }
.bd:nth-child(4n+3) { width: calc((var(--w) + .12) * var(--u)); }
.bd:nth-child(4n) { height: calc((var(--h) - .12) * var(--u)); }
/* a hairline of the binding's own cloth at the head */
.bd::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(.2 * var(--u)); border-radius: calc(.2 * var(--u)) calc(.2 * var(--u)) 0 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), color-mix(in srgb, var(--c) 72%, #fff) 30%, color-mix(in srgb, var(--c) 86%, #000)); filter: saturate(.85) brightness(1.04); }
/* contact on the walnut */
.bd::after { content: ""; position: absolute; z-index: -1; left: -4%; right: -30%; bottom: calc(-.18 * var(--u)); height: calc(.5 * var(--u));
  background: radial-gradient(closest-side, rgb(18 5 0 / .95), rgb(18 5 0 / .45) 55%, transparent); transition: transform .55s var(--ease-out), opacity .55s var(--ease-out); }
.bd > .sh, .bd > .wr, .bd > .tx { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
/* a round spine lit from the upper left */
.bd > .sh { background:
    linear-gradient(90deg, rgb(20 6 0 / .5) 0, rgb(20 6 0 / .2) 5%, rgb(255 238 214 / .12) 14%, rgb(255 238 214 / .3) 25%, rgb(255 238 214 / .14) 37%, transparent 52%, rgb(20 6 0 / .1) 68%, rgb(20 6 0 / .28) 86%, rgb(20 6 0 / .56) 100%),
    linear-gradient(rgb(255 226 190 / .16), transparent 26%, transparent 78%, rgb(20 6 0 / .2) 93%, rgb(14 4 0 / .5)); }
/* rubbed corners, head and tail, uneven fading */
.bd > .wr { mix-blend-mode: screen; opacity: .7; background:
    radial-gradient(circle at 0 0, rgb(255 236 210 / .3), transparent calc(1.1 * var(--u))),
    radial-gradient(circle at 100% 0, rgb(255 236 210 / .22), transparent var(--u)),
    radial-gradient(circle at 0 100%, rgb(255 236 210 / .22), transparent var(--u)),
    radial-gradient(circle at 100% 100%, rgb(255 236 210 / .18), transparent calc(.9 * var(--u))),
    linear-gradient(rgb(255 236 210 / .2), transparent 1.6%, transparent 98.6%, rgb(255 236 210 / .16)),
    var(--blot) calc(var(--i) * -37px) calc(var(--i) * -53px) / 220px 220px; }
.bd > .tx { background-image: var(--weave), var(--cgrain); background-size: 3px 3px, 160px 160px; opacity: .55; mix-blend-mode: multiply; }
/* blocked into the cloth: cream foil on dark cloth, ink on light */
.bd.dk { --blk: color-mix(in srgb, var(--cream) 86%, var(--orange-wash, #F6B9A6)); }
.bd.lt { --blk: color-mix(in srgb, var(--f) 92%, var(--c)); }
.bd .gb { width: 84%; height: calc(.8 * var(--u)); border-block: calc(.13 * var(--u)) solid var(--blk); opacity: .92; filter: drop-shadow(0 calc(-.05 * var(--u)) 0 rgb(15 5 0 / .4)) drop-shadow(0 calc(.06 * var(--u)) 0 rgb(255 245 228 / .25)); }
.bd .gb::after { content: ""; display: block; margin: calc(.22 * var(--u)) auto 0; width: 100%; height: calc(.06 * var(--u)); background: var(--blk); opacity: .7; }
.bd .gb.lo { margin-top: calc(.6 * var(--u)); }
.bd .sl { width: 46%; margin-top: calc(1.1 * var(--u)); aspect-ratio: 96 / 99; background: url("/assets/img/logo-mark-96.webp") 0 0 / 100% 100%; opacity: .95;
  filter: saturate(.82) contrast(.94) brightness(.97) drop-shadow(0 calc(-.05 * var(--u)) 0 rgb(15 5 0 / .4)) drop-shadow(0 calc(.06 * var(--u)) 0 rgb(255 245 228 / .2)); }
.bd strong { align-self: center; padding: 0 6%; text-align: center; color: var(--blk); font: 900 calc(1.18 * var(--u))/1.02 var(--cond); font-stretch: 66%; text-transform: uppercase; text-wrap: balance; letter-spacing: .01em;
  text-shadow: 0 calc(-.06 * var(--u)) 0 rgb(15 5 0 / .45), 0 calc(.06 * var(--u)) 0 rgb(255 245 228 / .22); }
.bd.lt strong { text-shadow: 0 calc(-.05 * var(--u)) 0 rgb(15 5 0 / .35), 0 calc(.07 * var(--u)) 0 rgb(255 255 255 / .45); }
@media (hover: hover) and (pointer: fine) { .bd:hover { transform: translateY(calc(-1.8 * var(--u))); } .bd:hover::after { transform: translateY(calc(1.8 * var(--u))) scaleX(1.25); opacity: .55; } }
.bd:focus-visible { transform: translateY(calc(-1.8 * var(--u))); outline-color: var(--cream); outline-offset: 2px; }
.ws-mantel .ws-row .slot { margin-inline: calc(.4 * var(--u)); }
/* phones: two volumes either side, the covers larger */
@media (max-width: 600px) {
  .ws-mantel .ws-base { --u: calc(100cqw / 66); }
  .ws-mantel .ws-row { left: 3%; right: 3%; }
  .mantel-sec .wshelf.ws-mantel { padding-top: calc(25% * 28 / 22 - 6%); }
  .ws-mantel .ws-row .slot { flex-basis: 25%; }
  .ws-mantel .run:first-child .bd:nth-child(-n+2), .ws-mantel .run:last-child .bd:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bd, .bd::after { transition: none; } }
:root {
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='3' height='1' fill='%23fff' fill-opacity='.05'/%3E%3Crect y='2' width='3' height='1' fill='%23000' fill-opacity='.05'/%3E%3Crect width='1' height='3' fill='%23000' fill-opacity='.04'/%3E%3Crect x='1' width='1' height='3' fill='%23fff' fill-opacity='.035'/%3E%3C/svg%3E");
  --cgrain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --blot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .84 0 0 0 .5 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}
/* phones: one fuller volume either side, so each spine is a real tap target (44px+) with a label you can read */
@media (max-width: 600px) {
  .ws-mantel .run:first-child .bd:nth-child(-n+3), .ws-mantel .run:last-child .bd:nth-child(n+2) { display: none; }
  .ws-mantel .run .bd { width: calc(9.6 * var(--u)); }
  .ws-mantel .run .bd strong { font-size: calc(1.95 * var(--u)); padding: 0 8%; }
  .ws-mantel .ws-row .slot { flex-basis: 28%; }
}