/* Diced by JT
   The idea: the photos come first. One fills the first screen, the rest run large and straight.
   The brand sits lightly on top: the blackletter name, ransom-letter headings, paper notes and a small die.
   Red is for booking and nothing else that matters.
   Order: tokens, base, shared pieces, header, hero + die, sections, footer, viewer, motion. */

/* ---------- Fonts ----------
   Served from this site (no outside font service). Latin subset only; licences sit next to the files. */
@font-face {
  font-family: "UnifrakturCook"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/unifrakturcook-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800 900; font-display: swap;
  src: url("fonts/big-shoulders-display-latin-800-900.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/archivo-latin-400-700.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --ink: #0d0c0b;        /* the mat */
  --paper: #ece6d8;      /* cut paper, main text on the mat (15.7:1 on ink) */
  --paper-2: #d6cfbe;    /* older paper */
  --red: #e63a1f;        /* booking. Ink text on red is 4.6:1 */
  --red-ink: #b3260f;    /* red text on paper (5.3:1) */
  --chrome: #c9c9c6;     /* pins, staples, chain, studs */
  --chrome-2: #77756f;
  --mute: #b8b2a4;       /* quiet text on the mat (9.3:1) */

  --f-black: "UnifrakturCook", "Old English Text MT", "Luminari", serif;          /* the name only */
  --f-loud: "Big Shoulders Display", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gut: clamp(16px, 4vw, 40px);
  --die: clamp(60px, 16vw, 96px);   /* the die is a small accent now, the photos are the point */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 1.0625rem/1.55 var(--f-body);
}
main, .foot { overflow-x: hidden; overflow-x: clip; }   /* rotated pieces must never cause sideways scroll */
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }   /* no tap delay, no grey flash: see "Press feedback" */
h1, h2, h3, p, figure { margin: 0; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; }
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  background: var(--paper); color: var(--ink); padding: 12px 16px; font-weight: 700;
}
.skip:focus { top: 12px; }

/* ---------- Shared pieces ---------- */

/* Book button: a sewn-on patch (red, dashed stitch line) */
.book {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 16px;
  background: var(--red); color: var(--ink);
  border: 2px dashed rgba(13, 12, 11, .75);
  box-shadow: 0 0 0 4px var(--red);
  font: 900 1.15rem/1 var(--f-loud); letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  rotate: -1.5deg;
}
.book:focus-visible { outline-offset: 8px; }
.book--big { font-size: clamp(1.5rem, 6.5vw, 2rem); padding: 14px 28px; }

/* Ransom-note lettering for headings. The real text sits beside it in a .vh span. */
.ransom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .18em .45em; }
.ransom .w { display: inline-flex; gap: .09em; }
.ransom b {
  display: inline-grid; place-items: center;
  min-width: .9em; padding: .06em .15em .03em;
  font: 900 1em/1 var(--f-loud);
  background: var(--paper); color: var(--ink);
  rotate: var(--lr, -3deg); translate: 0 var(--ly, 0);
}
.ransom b:nth-child(2n) { --lr: 2.5deg; --ly: .05em; }
.ransom b:nth-child(3n) { --lr: 5deg; --ly: -.04em; }
.ransom b:nth-child(4n) { --lr: -5deg; }
.ransom .k2 { background: var(--red); font-family: var(--f-black); font-weight: 700; padding-bottom: .1em; }
.ransom .k3 { background: var(--paper-2); font: italic 700 .92em/1 Georgia, "Times New Roman", serif; padding: .1em .18em; }
.ransom .k4 { background: var(--chrome); font: 700 .9em/1 "Courier New", Courier, monospace; padding: .12em .14em; }
.ransom .k5 {
  color: var(--red-ink);
  background: radial-gradient(circle 1.5px at 4px 4px, rgba(13, 12, 11, .28) 98%, transparent) 0 0/8px 8px var(--paper);
}
.ransom .k6 { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); }
.ransom-h { font-size: clamp(1.7rem, 7.5vw, 3rem); line-height: 1; }

/* Paper note */
.scrap {
  background: var(--paper); color: var(--ink);
  padding: 22px 22px 24px;
  clip-path: polygon(0 1.5%, 99% 0, 100% 98%, 1.5% 100%);
  rotate: var(--r, 1deg);
}
.scrap h3 { font: 900 1.6rem/1.05 var(--f-loud); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 10px; }
.scrap p + p, .scrap address + p, .scrap dl + p { margin-top: 10px; }
.scrap a { color: var(--red-ink); font-weight: 700; }
.scrap a:focus-visible { outline-color: var(--ink); }
.scrap address { font-style: normal; }
.fine { font-size: .9rem; }
.scrap .fine { color: #4c4741; }

/* Studded belt strip */
.studs {
  height: 22px;
  background: conic-gradient(from 45deg, #a3a19b 0 25%, #5e5c57 0 50%, #c9c9c6 0 75%, #f4f4f1 0) center/22px 22px repeat-x;
}

/* ---------- Header ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 14px var(--gut) 6px; max-width: 1260px; margin-inline: auto; }
.mark { font: 700 2rem/1 var(--f-black); text-decoration: none; margin-right: auto; padding: 6px 0; }
.mark span { font: 900 .5em/1 var(--f-loud); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.nav { order: 3; width: 100%; display: flex; gap: 22px; }
.nav a {
  font: 800 1.05rem/1 var(--f-loud); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: 14px 4px; margin: 0 -4px; border-bottom: 3px solid transparent;   /* the side padding makes short words like "Work" a full-size tap target */
}

/* ---------- Hero ----------
   One photo fills the whole first screen. A dark fade at the top and bottom keeps the menu and the
   text readable; the middle of the photo is left alone. */
body.has-bar > .top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: end;
  padding: 150px var(--gut) clamp(28px, 6vw, 56px);
}
/* On phones the photo takes the top four fifths, so JT sits above the text instead of under it. */
.hero__photo { position: absolute; left: 0; top: 0; z-index: -2; width: 100%; height: 80%; object-fit: cover; object-position: 50% 50%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(13, 12, 11, .8) 0, rgba(13, 12, 11, .2) 16%, rgba(13, 12, 11, 0) 30%, rgba(13, 12, 11, 0) 50%, rgba(13, 12, 11, .8) 68%, var(--ink) 80%);
}
.hero__text { width: 100%; max-width: 1180px; margin-inline: auto; display: grid; gap: 12px; justify-items: start; }
.hero__where { font: 800 .9rem/1.2 var(--f-loud); letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }
.hero__title { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; line-height: .78; }
.hero__title .bl {
  font: 700 clamp(4.2rem, 21vw, 8rem)/.86 var(--f-black);
  text-shadow: .045em .045em 0 var(--red);   /* two-colour print, slightly off register */
}
.hero__title .ransom { font-size: clamp(1.6rem, 7.5vw, 2.6rem); margin-bottom: .22em; }
.hero__lede { font-size: 1.1rem; max-width: 19.5em; }   /* text widths are in em, not ch: a ch changes size when the web font arrives and the page would jump */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-left: 4px; margin-top: 6px; padding-right: calc(var(--die) + 20px); }
.cta-note { color: var(--paper); font-size: .95rem; max-width: 15.5em; }
.stage { display: contents; }

/* The die. A paper cube with six faces and plain ink dots.
   The cube is drawn in .die3d. The <button> is a clear sheet laid over it, so Safari never has to
   draw 3D inside a button (it can't), and the whole die is one big target for a thumb.
   Every 3D box has its size written out in full: Safari mis-sizes "100%" boxes here. */
.die-wrap { position: absolute; right: calc(var(--gut) + 6px); bottom: clamp(34px, 7vw, 64px); width: var(--die); height: var(--die); }
.die-wrap::after {   /* its shadow on the pieces underneath */
  content: ""; position: absolute; left: -12%; right: -22%; bottom: -34%; height: 40%; z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
}
.die3d { position: absolute; left: 0; top: 0; width: var(--die); height: var(--die); -webkit-perspective: 760px; perspective: 760px; }
.die__tilt, .die__cube {
  position: absolute; left: 0; top: 0; width: var(--die); height: var(--die);
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.die__tilt { transform: rotateX(-18deg) rotateY(-24deg); }
.die__cube { transform: rotateY(90deg); }   /* shows the five. main.js takes over from here when it loads */
.face {
  position: absolute; left: 0; top: 0; width: var(--die); height: var(--die);
  display: grid; grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); gap: 5%; padding: 9%;
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  --h: calc(var(--die) / 2);
}
.f1 { transform: translateZ(var(--h)); }
.f6 { transform: rotateY(180deg) translateZ(var(--h)); }
.f2 { transform: rotateY(90deg) translateZ(var(--h)); }
.f5 { transform: rotateY(-90deg) translateZ(var(--h)); }
.f3 { transform: rotateX(90deg) translateZ(var(--h)); }
.f4 { transform: rotateX(-90deg) translateZ(var(--h)); }
/* The dots: plain ink dots, like a regular die */
.pip { place-self: center; width: 76%; height: 76%; border-radius: 50%; background: var(--ink); }
.p1 { grid-area: 1 / 1; } .p2 { grid-area: 1 / 2; } .p3 { grid-area: 1 / 3; }
.p4 { grid-area: 2 / 1; } .p5 { grid-area: 2 / 2; } .p6 { grid-area: 2 / 3; }
.p7 { grid-area: 3 / 1; } .p8 { grid-area: 3 / 2; } .p9 { grid-area: 3 / 3; }
.die {
  position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  touch-action: pan-y;   /* sideways swipes turn the die, up-and-down still scrolls the page */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.die:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }

/* ---------- Sections ---------- */
.sec { padding: clamp(48px, 9vw, 92px) var(--gut); max-width: 1260px; margin-inline: auto; }

/* Work: big straight photos with a thin gap, running to the screen edges on phones.
   Wide (landscape) photos take a full row. The others pair up on phones and go three across on wide screens. */
.wall { list-style: none; margin: 26px calc(var(--gut) * -1) 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.shot { position: relative; overflow: hidden; }
.shot--wide { grid-column: 1 / -1; }
.shot__link { position: relative; display: block; height: 100%; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot:not(.shot--wide) img { aspect-ratio: 4 / 5; }   /* pairs line up even when one photo is taller */
.shot__link:focus-visible { outline: 3px solid var(--red); outline-offset: -6px; }
.work__more { margin-top: 14px; color: var(--mute); font-size: 1.05rem; }
.work__more a { display: inline-block; padding: 12px 0; color: var(--paper); font-weight: 700; text-underline-offset: 4px; }

/* The nine squares a photo splits into when it is "diced" (built by main.js on hover or focus) */
.tiles {
  position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  background: var(--ink); perspective: 520px; pointer-events: none; visibility: hidden;
}
.tiles span { background-size: 300% 300%; background-repeat: no-repeat; }
.is-dicing .tiles { visibility: visible; }
.is-dicing img { visibility: hidden; }

/* Chain with hanging dice */
.chain {
  position: relative; height: 150px; margin-top: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='18' viewBox='0 0 44 18'%3E%3Cellipse cx='12' cy='9' rx='10' ry='6' fill='none' stroke='%23c9c9c6' stroke-width='3.5'/%3E%3Crect x='19' y='7' width='22' height='4' rx='2' fill='%2377756f'/%3E%3C/svg%3E") repeat-x 0 8px/44px 18px;
}
.hang { position: absolute; top: 17px; width: 3px; background: linear-gradient(var(--chrome), var(--chrome-2)); transform-origin: 50% 0; }
.hang::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 46px; aspect-ratio: 1; translate: -50% -2px; border-radius: 9px;
}
.hang--a { right: calc(14% + 50px); height: 54px; rotate: 5deg; }
.hang--b { right: 14%; height: 84px; rotate: -4deg; }
.hang--a::after {
  rotate: 12deg; background-color: var(--paper);
  background-image:
    radial-gradient(circle 4.5px at 25% 25%, var(--ink) 96%, transparent), radial-gradient(circle 4.5px at 75% 25%, var(--ink) 96%, transparent),
    radial-gradient(circle 4.5px at 50% 50%, var(--ink) 96%, transparent),
    radial-gradient(circle 4.5px at 25% 75%, var(--ink) 96%, transparent), radial-gradient(circle 4.5px at 75% 75%, var(--ink) 96%, transparent);
}
.hang--b::after {
  rotate: -15deg; background-color: var(--red);
  background-image: radial-gradient(circle 4.5px at 28% 28%, var(--ink) 96%, transparent), radial-gradient(circle 4.5px at 72% 72%, var(--ink) 96%, transparent);
}

/* Services: three paper tickets with a tear-off Book stub */
.menu { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 22px; max-width: 860px; }
.tag {
  display: grid; align-items: center; gap: 6px 14px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "pip name price" "desc desc desc" "book book book";
  background: var(--paper); color: var(--ink); padding: 16px 18px 0;
  clip-path: polygon(0 2%, 100% 0, 99.4% 100%, .6% 98%);
  rotate: var(--r, -1deg);
}
.tag:nth-child(2) { --r: .8deg; }
.tag:nth-child(3) { --r: -.5deg; }
.pipface { grid-area: pip; width: 46px; aspect-ratio: 1; border-radius: 8px; background-color: var(--ink); rotate: -6deg; }
.pipface--1 { background-image: radial-gradient(circle 5px at 50% 50%, var(--paper) 96%, transparent); }
.pipface--2 { background-image: radial-gradient(circle 5px at 28% 28%, var(--paper) 96%, transparent), radial-gradient(circle 5px at 72% 72%, var(--paper) 96%, transparent); }
.pipface--3 { background-image: radial-gradient(circle 5px at 25% 25%, var(--paper) 96%, transparent), radial-gradient(circle 5px at 50% 50%, var(--paper) 96%, transparent), radial-gradient(circle 5px at 75% 75%, var(--paper) 96%, transparent); }
.tag__name { grid-area: name; font: 900 clamp(1.8rem, 7.5vw, 2.5rem)/1 var(--f-loud); text-transform: uppercase; letter-spacing: .01em; }
.tag__price { grid-area: price; font: 900 clamp(2.3rem, 10vw, 3.3rem)/1 var(--f-loud); color: var(--red-ink); font-variant-numeric: tabular-nums; }
.tag__desc { grid-area: desc; font-size: 1rem; max-width: 30em; }
.tag__book {
  grid-area: book; display: grid; place-items: center; min-height: 50px; margin: 10px -18px 0; padding: 12px;
  background: var(--red); color: var(--ink); border-top: 3px dashed var(--ink);
  font: 900 1.3rem/1 var(--f-loud); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.tag__book:focus-visible { outline: 3px solid var(--ink); outline-offset: -8px; }
.services__note { margin-top: 26px; max-width: 33em; color: var(--mute); }
.services__note strong { color: var(--paper); }

/* About */
.about__grid { display: grid; gap: 26px; margin-top: 34px; }
.about__pic { margin-inline: calc(var(--gut) * -1); }   /* the photo runs to the screen edges on phones */
.about__pic img { width: 100%; }
.about__bio { --r: 1.2deg; max-width: 26em; font-size: 1.1rem; }

/* Visit */
.visit__grid { display: grid; gap: 22px; margin-top: 34px; }
.visit__where { --r: -1deg; font-size: 1.15rem; }
.visit__where a { display: inline-block; padding: 9px 0; font-size: 1.35rem; }   /* the phone number is a big tap target */
.visit__hours { --r: .8deg; }
.hours { margin: 0; display: grid; gap: 8px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px dotted rgba(13, 12, 11, .45); padding-bottom: 6px; }
.hours dt { font-weight: 700; }
.hours dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.map { display: block; position: relative; rotate: -1.5deg; text-decoration: none; clip-path: polygon(1% 0, 100% 2%, 99% 100%, 0 97%); }
.map svg { width: 100%; height: auto; }
.map__road { font: 900 30px var(--f-loud); letter-spacing: .1em; fill: #0d0c0b; }
.map__town { font: 800 20px var(--f-loud); letter-spacing: .16em; fill: #4c4741; }
.map__num { font: 900 25px var(--f-loud); fill: #0d0c0b; }
.map__cta {
  display: block; background: var(--red); color: var(--ink); text-align: center; padding: 14px;
  font: 900 1.3rem/1 var(--f-loud); letter-spacing: .1em; text-transform: uppercase;
}
.map:focus-visible { outline: none; }
.map:focus-visible .map__cta { outline: 3px solid var(--ink); outline-offset: -8px; }

/* ---------- Footer ---------- */
.foot__in { display: grid; gap: 24px; justify-items: start; padding: 44px var(--gut) 40px; max-width: 1260px; margin-inline: auto; }
.foot__mark { font: 700 clamp(3.4rem, 15vw, 6rem)/.9 var(--f-black); }
.foot__mark span { font: 900 .32em/1 var(--f-loud); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot__links a { display: inline-block; padding: 13px 0; font: 800 1.1rem/1.2 var(--f-loud); letter-spacing: .08em; text-transform: uppercase; text-underline-offset: 4px; }
.foot__fine { color: var(--mute); font-size: .92rem; }
.foot__fine a { display: inline-block; padding: 13px 0; }

/* Phone-only Book bar */
.stickybook { position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 20; rotate: 0deg; min-height: 50px; font-size: 1.35rem; }
.stickybook.is-away { translate: 0 160%; visibility: hidden; }
body.has-bar { padding-bottom: 86px; }   /* so the bar never covers the footer links, with or without JavaScript */

/* ---------- Photo viewer ---------- */
.lb { width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(13, 12, 11, .97); color: var(--paper); }
.lb::backdrop { background: rgba(13, 12, 11, .9); }
html.is-locked { overflow: hidden; }   /* the page behind stays still (main.js sets this) */
.lb[open] { display: grid; grid-template: "fig fig" minmax(0, 1fr) "prev next" auto / 1fr 1fr; gap: 10px; padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
.lb__fig { grid-area: fig; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 10px; padding-top: 56px; min-height: 0; }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0; background: var(--paper); padding: 6px; }
.lb__cap { text-align: center; font-size: .95rem; }
.lb__count { color: var(--mute); margin-left: 8px; font-variant-numeric: tabular-nums; }
.lb__btn {
  min-height: 50px; padding: 0 18px; border: 0; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: var(--paper); color: var(--ink);
  font: 900 1.1rem/1 var(--f-loud); letter-spacing: .1em; text-transform: uppercase;
}
.lb__close { position: absolute; top: 12px; right: 12px; background: var(--red); }
.lb__prev { grid-area: prev; }
.lb__next { grid-area: next; }

/* ---------- Plain pages: privacy and 404 ---------- */
.doc { max-width: 780px; margin: 18px auto 72px; padding: 0 var(--gut); }
.doc__sheet { background: var(--paper); color: var(--ink); padding: clamp(22px, 5vw, 46px); clip-path: polygon(0 .5%, 99.4% 0, 100% 99.6%, .8% 100%); }
.doc h1 { font: 900 clamp(2.6rem, 10vw, 3.8rem)/1 var(--f-loud); text-transform: uppercase; margin-bottom: 6px; }
.doc h2 { font: 900 1.55rem/1.1 var(--f-loud); text-transform: uppercase; letter-spacing: .02em; margin: 30px 0 8px; }
.doc p + p { margin-top: 10px; }
.doc a { color: var(--red-ink); font-weight: 700; }
.doc a:focus-visible { outline-color: var(--ink); }
.lost { min-height: 68vh; display: grid; align-content: center; justify-items: start; gap: 24px; padding: 40px var(--gut); max-width: 780px; margin-inline: auto; }
.lost h1 { font: 900 clamp(3.2rem, 15vw, 6.5rem)/.9 var(--f-loud); text-transform: uppercase; }
.lost p { font-size: 1.2rem; }
.snake { display: flex; gap: 16px; }
.snake .pipface { width: 88px; border-radius: 15px; background-color: var(--paper); background-image: radial-gradient(circle 9px at 50% 50%, var(--ink) 96%, transparent); }
.snake .pipface + .pipface { rotate: 11deg; background-color: var(--red); }
.lost__links { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.lost__links a:not(.book) { font-weight: 700; padding: 12px 0; text-underline-offset: 4px; }

/* ---------- Wider screens ---------- */
@media (min-width: 720px) {
  body.has-bar { padding-bottom: 0; }
  .stickybook { display: none; }
  .nav { order: 0; width: auto; }
  .wall { margin-inline: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .shot { grid-column: span 3; }
  .shot--wide img { aspect-ratio: 4 / 3; }
  .shot:not(.shot--wide) { order: 2; }   /* the two wide photos share the top row, the tall ones go under them */
  .tag { grid-template-columns: auto minmax(0, 1fr) auto 132px; grid-template-areas: "pip name price book" "pip desc desc book"; padding: 18px 0 18px 20px; gap: 6px 18px; }
  .tag__book { align-self: stretch; margin: -18px 0; border-top: 0; border-left: 3px dashed var(--ink); }
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 44px; }
  .about__pic { margin-inline: 0; }
  .visit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .lb[open] { grid-template: "prev fig next" minmax(0, 1fr) / auto minmax(0, 1fr) auto; align-items: center; padding: 16px; }
  .lb__fig { height: 100%; }
}
@media (min-width: 900px) {
  .hero { padding-bottom: 64px; }
  .hero__photo { height: 100%; object-position: 50% 58%; }
  .hero::after { background: linear-gradient(to bottom, rgba(13, 12, 11, .8) 0, rgba(13, 12, 11, .15) 18%, rgba(13, 12, 11, 0) 40%, rgba(13, 12, 11, .6) 70%, rgba(13, 12, 11, .95) 100%); }
  .hero__title .bl { font-size: clamp(6rem, 10vw, 8rem); }
  .wall { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .shot--wide { grid-column: span 6; }
  .shot:not(.shot--wide) { grid-column: span 3; }
}

/* ---------- Press feedback ----------
   Phones have no hover, so every tappable thing answers the press itself. */
.book:active { scale: .94; }
.tag__book:active, .map:active .map__cta { background: var(--ink); color: var(--paper); }
.shot__link:active { opacity: .8; }
.nav a:active { border-bottom-color: var(--red); }
.foot__links a:active { color: var(--red); }
.lb__btn:active { background: var(--chrome); scale: .95; }

/* ---------- Hover (mouse only, so nothing gets stuck "hovered" after a tap) ---------- */
@media (hover: hover) and (pointer: fine) {
  .book:not(.stickybook):hover { rotate: 1deg; scale: 1.04; }
  .nav a:hover { border-bottom-color: var(--red); }
  .shot img { transition: scale .5s cubic-bezier(.2, .8, .2, 1); }
  .shot__link:hover img { scale: 1.04; }
  .tag:hover { rotate: 0deg; }
  .tag:hover .pipface { rotate: 84deg; }
  .tag__book:hover { background: var(--ink); color: var(--paper); }
  .tag__book:hover:focus-visible { outline-color: var(--paper); }
  .map:hover .map__cta { background: var(--paper); }
  .foot__links a:hover { color: var(--red); }
  .lb__btn:hover { background: var(--chrome); }
}

/* ---------- Motion ----------
   Everything that moves lives here, so people who ask for reduced motion get none of it.
   House rules: only transform and opacity animate (phones draw those smoothly), nothing loops,
   and every move eases out so it feels quick under a thumb. No stepped or jerky timing.
   Pieces below the first screen are revealed once by main.js (class "reveal", then "is-in"). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Small responses */
  .book, .tag, .nav a, .lb__btn { transition: rotate .2s ease-out, scale .14s ease-out, border-color .2s; }
  .pipface { transition: rotate .4s cubic-bezier(.3, 1.5, .5, 1); }
  .stickybook { transition: translate .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s, scale .14s ease-out; }
  .stickybook:not(.is-away) { transition: translate .28s cubic-bezier(.2, .8, .2, 1), scale .14s ease-out; }

  /* The die. main.js runs the tumble (so it can follow a finger). CSS does the drop, the press, the hop and the glints. */
  .die3d { animation: drop .6s cubic-bezier(.3, 1.35, .5, 1) .3s backwards; transition: transform .14s ease-out; }
  .die-wrap.is-pressed .die3d { transform: scale(.93); }
  .die-wrap.is-rolling { animation: hop .95s; }
  .die__tilt { transition: transform .3s ease-out; }

  /* The "by JT" letters land once when the page loads */
  .hero__title .ransom b { animation: pop .42s cubic-bezier(.2, .8, .2, 1.35) .45s backwards; }
  .hero__title .ransom b:nth-child(2) { animation-delay: .52s; }
  .hero__title .w + .w b { animation-delay: .59s; }
  .hero__title .w + .w b:nth-child(2) { animation-delay: .66s; }

  /* Pieces further down get tossed onto the mat as they come into view */
  /* Keep these three rules in this order and no more specific than ".reveal.is-in" below, or a piece stays tilted after it lands. */
  .reveal { opacity: 0; transform: translateY(34px) rotate(6deg) scale(1.05); }
  .reveal:nth-child(even) { transform: translateY(34px) rotate(-6deg) scale(1.05); }
  .shot.reveal, .about__pic.reveal { transform: translateY(26px); }   /* photos just rise in, straight */
  .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .3s ease-out var(--d, 0s), transform .6s cubic-bezier(.2, .8, .2, 1.12) var(--d, 0s), rotate .2s ease-out, scale .14s ease-out;
  }
  .reveal-letters .ransom b { opacity: 0; transform: translateY(-16px) rotate(-14deg) scale(1.35); }
  .reveal-letters.is-in .ransom b {
    opacity: 1; transform: none;
    transition: opacity .2s ease-out, transform .45s cubic-bezier(.2, .8, .2, 1.35);
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  .chain.is-in .hang--a { animation: swing 1.7s cubic-bezier(.35, .1, .35, 1); }
  .chain.is-in .hang--b { animation: swing-b 1.9s cubic-bezier(.35, .1, .35, 1); }

  /* The photo viewer */
  .lb[open] .lb__img { animation: zoom .3s cubic-bezier(.2, .8, .2, 1.05); }
  .lb__img { transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .17s ease-out; }
  .lb__img.is-dragging { transition: none; }   /* while it follows a finger */

  /* A photo being diced into nine squares (mouse hover or keyboard focus) */
  .is-dicing .tiles span { animation: dice .62s cubic-bezier(.3, .7, .3, 1) both; }
  .is-dicing .tiles span:nth-child(2), .is-dicing .tiles span:nth-child(4) { animation-delay: .045s; }
  .is-dicing .tiles span:nth-child(3), .is-dicing .tiles span:nth-child(5), .is-dicing .tiles span:nth-child(7) { animation-delay: .09s; }
  .is-dicing .tiles span:nth-child(6), .is-dicing .tiles span:nth-child(8) { animation-delay: .135s; }
  .is-dicing .tiles span:nth-child(9) { animation-delay: .18s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .die-wrap:hover .die__tilt { transform: rotateX(-24deg) rotateY(-32deg); }
}

@keyframes toss { from { opacity: 0; transform: translateY(-26px) rotate(9deg) scale(1.12); } }
@keyframes pop { from { opacity: 0; transform: translateY(-14px) rotate(-12deg) scale(1.4); } }
@keyframes drop { from { opacity: 0; transform: translateY(-80%); } }
@keyframes hop {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  30% { transform: translateY(-40%); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  58% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  76% { transform: translateY(-9%); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  100% { transform: translateY(0); }
}
@keyframes twinkle { 0% { transform: scale(0) rotate(-90deg); } 60% { transform: scale(1.6) rotate(15deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes swing {
  0% { transform: rotate(20deg); } 22% { transform: rotate(-14deg); } 44% { transform: rotate(9deg); }
  64% { transform: rotate(-5deg); } 82% { transform: rotate(2deg); } 100% { transform: rotate(0deg); }
}
@keyframes swing-b {
  0% { transform: rotate(-18deg); } 22% { transform: rotate(13deg); } 44% { transform: rotate(-9deg); }
  64% { transform: rotate(5deg); } 82% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); }
}
@keyframes zoom { from { opacity: 0; transform: scale(.9) rotate(-2deg); } }
@keyframes dice {
  0% { transform: scale(1) rotateY(0deg); }
  30% { transform: scale(.78) rotateY(0deg); }
  72% { transform: scale(.78) rotateY(180deg); }
  100% { transform: scale(1) rotateY(360deg); }
}