/* Pottery Gagliano concept · drafting-sheet identity: architectural cream, wine ink, brass */
:root {
  --paper: #f1eee5;
  --sheet: #e8e0d2;
  --sand: #dccbb0;
  --ink: #302b2c;
  --kiln: #241f20;
  --wine: #4e282c;
  --brass: #d3ac6f;
  --brass-hi: #f0d49a;
  --oxblood: #6e2430;
  --muted: #5e524a;
  --line: #c8c0af;
  --focus: #1f5f6e;
  --header: 72px;
  --gutter: clamp(16px, 4.5vw, 88px);
  --display: 'Manrope', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --sans: 'DM Sans', 'Segoe UI', Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header) + 16px); -webkit-text-size-adjust: 100%; }
html:not(.js) { scroll-padding-top: 16px; }
html:not(.js) .site-header { position: static; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; margin: 0; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; }
h1 em, h2 em { font: italic 400 1.08em/0.9 var(--serif); letter-spacing: -0.01em; color: var(--wine); }
p { margin: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; font-weight: 600; }
.skip:focus { top: 12px; }
.select-all { user-select: all; -webkit-user-select: all; font-family: var(--mono); overflow-wrap: anywhere; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 20px; border: 2px solid currentColor; font: 600 15px/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer; background: transparent; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-wine { background: var(--wine); border-color: var(--wine); color: #fff; }
.btn-line { color: var(--ink); }
.btn-brass { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn-line-light { color: var(--paper); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px var(--mono); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.kicker, .section-no, .plate-no, .note-label, .visit-label { font: 500 13px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.section-no { display: flex; align-items: baseline; gap: 14px; color: var(--muted); }
.section-no span { font: italic 400 44px/1 var(--serif); color: var(--wine); letter-spacing: 0; }
.section-no.on-dark { color: #e5d9c8; }
.section-no.on-dark span { color: var(--brass); }

/* ---------- Header (direct child of body; nothing above it transforms or clips) ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--ink); }
.header-row { display: flex; align-items: center; gap: 16px; padding: 8px var(--gutter); flex-wrap: wrap; }
.menu-ready .header-row { height: 72px; flex-wrap: nowrap; padding-block: 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; min-width: 0; margin-right: auto; }
.brand-mark { width: 42px; height: 42px; flex: none; }
.brand-word { font: 800 18px/1 var(--display); letter-spacing: -0.03em; white-space: nowrap; }
.brand-word small { display: block; margin-top: 4px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 600 14px var(--sans); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.menu-toggle { display: none; min-height: 44px; min-width: 76px; padding: 0 14px; border: 2px solid var(--ink); background: transparent; font: 600 14px var(--sans); cursor: pointer; }
.menu-toggle::after { content: ""; display: inline-block; width: 12px; height: 8px; margin-left: 8px; border-top: 2px solid; border-bottom: 2px solid; vertical-align: 1px; }
.menu-toggle[aria-expanded="true"]::after { height: 2px; border-bottom: 0; }
.header-call { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--wine); color: #fff; font: 600 14px var(--sans); text-decoration: none; white-space: nowrap; }
.header-call .call-short, .header-call .call-sr { display: none; }
@media (max-width: 1060px) {
  .menu-ready .menu-toggle { display: inline-flex; align-items: center; }
  .menu-ready .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: 8px var(--gutter) 18px; background: var(--paper); border-bottom: 1px solid var(--ink); box-shadow: 0 18px 30px rgba(48, 43, 44, .12); }
  .menu-ready .site-nav.is-open { display: flex; }
  .menu-ready .site-nav a { min-height: 48px; padding: 0; border-bottom: 1px solid var(--line); font-size: 17px; }
}
@media (max-width: 560px) {
  :root { --header: 64px; }
  .menu-ready .header-row { height: 64px; gap: 8px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-word { font-size: 16px; }
  .brand-word small { display: none; }
  .header-call { padding: 0 14px; }
  .header-call .call-long { display: none; }
  .header-call .call-short { display: inline; }
  .header-call .call-sr { display: block; }
  .menu-toggle { min-width: 0; }
}
@media (max-width: 360px) { .brand { gap: 7px; } .brand-word { font-size: 15px; white-space: normal; max-width: 6.5em; line-height: 1.02; } .brand-mark { width: 32px; height: 32px; } }

/* ---------- Hero ---------- */
.hero { padding: 0 var(--gutter) clamp(40px, 6vw, 80px); }
.concept-note { padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 13px/1.5 var(--mono); color: var(--muted); }
.concept-note span { color: var(--wine); font-weight: 500; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding-top: clamp(20px, 3.5vw, 48px); }
.hero-copy { container-type: inline-size; }
.hero-copy .kicker { color: var(--muted); }
.hero h1 { font-size: clamp(2.6rem, 9vw, 7.4rem); margin: 16px 0 20px; line-height: .94; padding-right: .14em; }
@supports (font-size: 1cqi) { .hero h1 { font-size: min(13.4cqi, 7.4rem); } }
.h1-line { display: block; }
.lede { max-width: 34em; font-size: clamp(17px, 1.35vw, 19px); }
.hero .actions { margin: 24px 0 26px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; border-top: 2px solid var(--wine); }
.facts div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 12px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; line-height: 1.4; }
.hero-plate { margin: 0; background: var(--sheet); border: 1px solid #b9ab95; position: relative; }
.plate-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #b9ab95; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.hero-status .st-off { display: none; }
.hero-status::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--wine); vertical-align: 0; }
.motion .hero-status:not(.is-true) .st-off { display: inline; }
.motion .hero-status:not(.is-true) .st-true { display: none; }
.motion .hero-status:not(.is-true)::before { background: transparent; border: 2px solid var(--wine); }
.hero-svg { width: 100%; height: auto; }
.plate-foot { padding: 8px 14px; border-top: 1px solid #b9ab95; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* Hero entry: one owner per transform (entry drop > JS wobble > CSS cone/squash). */
.hero-lump-entry, .hero-lump-cone, .axis-draw { transform-box: fill-box; }
.hero-lump-cone { transform-origin: 50% 100%; }
.axis-draw { transform-origin: 50% 100%; }
.motion .hero-lump-entry { animation: lump-drop .8s cubic-bezier(.55, 0, .85, .35) .25s both; }
.motion .hero-lump-cone { animation: lump-cone 5.2s ease-in-out .25s both; }
.motion .axis-draw { animation: axis-draw 1s cubic-bezier(.2, .7, .2, 1) both; }
.motion .h1-line { animation: centre-in 1.7s cubic-bezier(.25, .6, .3, 1) both; }
.motion .h1-line + .h1-line { animation-delay: .12s; }
@keyframes lump-drop { from { transform: translateY(-300px); } to { transform: none; } }
@keyframes lump-cone {
  0%, 15% { transform: none; }
  18% { transform: scale(1.1, .86); }
  23%, 70% { transform: none; }
  80% { transform: scale(.78, 1.34); }
  90%, 100% { transform: none; }
}
@keyframes axis-draw { from { transform: scaleY(0); } to { transform: none; } }
@keyframes centre-in {
  0% { transform: translateX(22px); opacity: .1; }
  25% { transform: translateX(-14px); opacity: 1; }
  45% { transform: translateX(8px); }
  65% { transform: translateX(-4px); }
  82% { transform: translateX(1.5px); }
  100% { transform: none; }
}

/* ---------- Shared section heads ---------- */
.section-head { max-width: 980px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head h2 { font-size: clamp(2.3rem, 6vw, 5.6rem); margin: 14px 0 18px; }
.section-intro { max-width: 40em; font-size: 18px; }

/* ---------- 01 Courses ---------- */
.courses { padding: clamp(64px, 8vw, 128px) var(--gutter); border-top: 1px solid var(--ink); }
.plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.plate { display: flex; flex-direction: column; gap: 10px; padding: 0 0 20px; border-top: 3px solid var(--wine); }
.mini { width: 100%; height: auto; aspect-ratio: 240 / 170; background: var(--sheet); border: 1px solid #c9bda9; border-top: 0; }
.mini-ground { stroke: #302b2c; stroke-width: 2; }
.plate-no { color: var(--muted); font-size: 12px; margin-top: 6px; }
.plate h3 { font-size: clamp(1.5rem, 2.1vw, 2rem); }
.plate p:not(.plate-no) { font-size: 16px; }
.plate-link { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; font: 500 14px var(--mono); }
.mid-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); font: italic 400 26px/1.2 var(--serif); }

/* Pot drawing parts (shared by every half-section) */
.p-sil { fill: #c49c72; stroke: #3d3432; stroke-width: 2.5; stroke-linejoin: round; }
.p-sec { fill: url(#hatch); stroke: #3d3432; stroke-width: 2.5; stroke-linejoin: round; }
.p-glaze { fill: #d8cdc4; stroke: #3d3432; stroke-width: 2.5; stroke-linejoin: round; }
.p-glaze-edge { stroke: #6e2430; stroke-width: 3; }
.p-handle { stroke: #c49c72; }
.p-deco { stroke: #f2e3c9; stroke-width: 3.5; stroke-linecap: round; }
.p-axis { stroke: #4e282c; stroke-width: 1; stroke-dasharray: 10 4 2 4; fill: none; }
.mini .p-sil, .mini .p-sec, .mini .p-glaze { stroke-width: 1.8; }

/* ---------- 02 Eight weeks (pinned drafting sheet) ---------- */
.weeks { background: var(--wine); color: var(--paper); --focus: var(--brass-hi); height: 560svh; position: relative; }
.weeks h2 em { color: var(--brass); }
.weeks-stage { position: sticky; top: var(--header); height: calc(100svh - var(--header)); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: minmax(0, 1fr) auto; gap: 16px clamp(24px, 4vw, 64px); padding: clamp(18px, 3vw, 40px) var(--gutter) 16px; overflow: clip; }
.weeks-copy { align-self: center; min-width: 0; }
.weeks h2 { font-size: clamp(2.2rem, 4.6vw, 4.6rem); margin: 10px 0 22px; }
.week-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #8a5f5f; }
.week-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; padding: 7px 0; border-bottom: 1px solid #6e4446; transition: opacity .3s ease; }
.wk-no { font: 500 13px/1.7 var(--mono); color: var(--brass); }
.wk-name { font: 700 17px/1.5 var(--display); letter-spacing: -0.02em; }
.wk-desc { grid-column: 2; font-size: 15px; color: #efe3d3; }
.weeks-note { margin-top: 16px; max-width: 34em; font-size: 13px; line-height: 1.5; color: #e5d9c8; }
.sheet { margin: 0; position: relative; align-self: stretch; min-height: 0; display: flex; background: var(--sheet); border: 1px solid #a98c7d; color: var(--ink); }
.sheet-svg { width: 100%; height: 100%; }
.title-block { display: flex; flex-wrap: wrap; gap: 4px 0; font: 500 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.title-block span { padding: 5px 10px; border: 1px solid #8c7d6c; margin: 0 -1px -1px 0; background: var(--sheet); }
.sheet .title-block { position: absolute; top: 10px; left: 10px; right: 10px; gap: 0; }
.weeks-progress { grid-column: 1 / -1; height: 4px; background: #7a4c50; }
.weeks-progress i { display: block; height: 100%; background: var(--brass); transform-origin: 0 50%; transform: scaleX(1); }
.js .weeks-progress i { transform: scaleX(0); }
/* With scripts, only the current week expands; the rest stay readable to screen readers. */
.js .week-list li { color: #cdb5ab; }
.js .week-list li.is-done { color: #eadbcf; }
.js .week-list li.is-now { color: #fff; }
.js .week-list li.is-now .wk-no { color: var(--paper); background: var(--oxblood); padding: 0 6px; align-self: start; }
.js .week-list li:not(.is-now) .wk-desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.motion .week-list li.is-now .wk-desc { animation: desc-in .45s ease both; }
@keyframes desc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .weeks { height: 500svh; }
  .weeks-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px var(--gutter) 10px; }
  .weeks-copy { align-self: start; }
  .weeks .section-no { font-size: 11px; }
  .weeks .section-no span { font-size: 28px; }
  .weeks h2 { font-size: clamp(1.7rem, 7.4vw, 2.6rem); margin: 4px 0 10px; }
  .js .week-list { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 0; padding-bottom: 92px; }
  .js .week-list li { display: block; padding: 0; border: 0; }
  .js .week-list .wk-no { display: block; text-align: center; padding: 4px 0; border-bottom: 2px solid #7a4c50; font-size: 12px; }
  .js .week-list li.is-done .wk-no { border-bottom-color: var(--brass); }
  .js .week-list li.is-now .wk-no { padding: 4px 0; border-bottom-color: var(--brass-hi); }
  .js .week-list li:not(.is-now) .wk-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* The list is the grid container, so abspos captions must span all columns explicitly. */
  .js .week-list li.is-now .wk-name { position: absolute; grid-column: 1 / -1; left: 0; right: 0; top: 34px; font-size: 16px; }
  .js .week-list li.is-now .wk-desc { position: absolute; grid-column: 1 / -1; left: 0; right: 0; top: 56px; font-size: 14px; line-height: 1.4; }
  .weeks-note { font-size: 11.5px; margin-top: 8px; }
  .sheet .title-block { font-size: 9.5px; top: 6px; left: 6px; }
  .sheet .title-block span { padding: 3px 6px; }
  .sheet .title-block span:first-child, .sheet .title-block span:last-child { display: none; }
  .sheet-svg .dims text, .sheet-svg .kiln text { font-size: 24px; }
  .sheet-svg .cert text { font-size: 15px; }
}
@media (max-width: 360px) {
  .js .week-list { padding-bottom: 106px; }
}
/* Without scripts nothing scrubs, so the chapter is a normal list beside the finished pot. */
html:not(.js) .weeks { height: auto; }
html:not(.js) .weeks-stage { position: static; height: auto; overflow: visible; padding-block: 56px; }
html:not(.js) .sheet { aspect-ratio: 640 / 560; align-self: start; }
html:not(.js) .weeks-progress { display: none; }
@media (max-width: 860px) { html:not(.js) .weeks-stage { grid-template-rows: auto auto; } }
/* Short or landscape screens: no pinning; the full list and the finished pot. */
@media (max-height: 560px), (orientation: landscape) and (max-height: 620px) {
  .weeks { height: auto; }
  .weeks-stage { position: static; height: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; overflow: visible; padding-block: 48px; }
  .sheet { aspect-ratio: 640 / 560; align-self: start; }
  .weeks-progress { display: none; }
  .js .week-list { display: block; padding-bottom: 0; border-top: 1px solid #8a5f5f; }
  .js .week-list li { display: grid; padding: 7px 0; border-bottom: 1px solid #6e4446; opacity: 1; }
  .js .week-list li .wk-no { border: 0; text-align: left; background: none; color: var(--brass); padding: 0; }
  .js .week-list li .wk-name, .js .week-list li .wk-desc, .js .week-list li:not(.is-now) .wk-desc, .js .week-list li:not(.is-now) .wk-name,
  .js .week-list li.is-now .wk-name, .js .week-list li.is-now .wk-desc { position: static; grid-column: 2; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; animation: none; font-size: 15px; }
  .js .week-list li.is-now .wk-no { padding: 0; background: none; color: var(--brass); border: 0; }
}

/* ---------- 03 Your first pot ---------- */
.yourpot { padding: clamp(64px, 8vw, 128px) var(--gutter); }
.yp-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.yp-controls { display: grid; gap: 26px; padding-top: 6px; border-top: 3px solid var(--wine); }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend, .range-row > label, .extra-row > label { font: 700 17px/1.3 var(--display); letter-spacing: -0.02em; margin-bottom: 10px; padding: 0; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chips input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; scroll-margin: calc(var(--header) + 24px) 0 32px; }
.chips label { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 16px; border: 2px solid #8f8274; background: transparent; font: 600 15px var(--sans); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover label { border-color: var(--wine); }
.chips input:checked + label { background: var(--wine); border-color: var(--wine); color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.chips input:checked + label::before { content: "✓" / ""; margin-right: 8px; }
.chips input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }
.range-row input { width: 100%; height: 44px; accent-color: var(--wine); margin: 0; cursor: pointer; scroll-margin: calc(var(--header) + 24px) 0 32px; }
.range-ends { display: flex; justify-content: space-between; gap: 12px; font: 500 13px var(--mono); color: var(--muted); }
.opt { font: 400 14px var(--sans); color: var(--muted); }
textarea { width: 100%; min-height: 76px; padding: 10px 12px; border: 2px solid #8f8274; background: #fbfaf6; font-size: 16px; resize: vertical; scroll-margin: calc(var(--header) + 24px) 0 32px; }
textarea::placeholder { color: #75695f; }
.nojs-note { display: none; margin-bottom: 16px; padding: 12px 14px; border-left: 3px solid var(--wine); background: #fbfaf6; font-size: 15px; }
html:not(.js) .nojs-note { display: block; }
html:not(.js) .yp-controls { display: none; }
.yp-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.yp-plate { margin: 0; background: var(--sheet); border: 1px solid #b9ab95; }
.yp-svg { width: 100%; height: auto; }
.yp-plate .title-block { border-top: 1px solid #b9ab95; }
.yp-plate .title-block span { border-width: 0 1px 0 0; }
.note-card { padding: clamp(18px, 2.4vw, 30px); background: #fbfaf6; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--wine); }
.note-label { color: var(--muted); font-size: 12px; }
.note-text { margin: 10px 0 14px; font: italic 400 clamp(22px, 2.2vw, 28px)/1.25 var(--serif); overflow-wrap: anywhere; }
.note-list { margin: 0 0 18px; padding-left: 20px; font-size: 15px; }
.note-list li + li { margin-top: 4px; }
.note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.note-small { margin-top: 12px; font-size: 13px; color: var(--muted); }
.motion .note-card.is-inked .note-text, .motion .note-card.is-inked .note-list { animation: re-ink .5s ease both; }
@keyframes re-ink { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 04 About ---------- */
.about { background: var(--sand); padding: clamp(64px, 8vw, 128px) var(--gutter); --focus: #1b4f5b; }
.about .section-no { color: var(--ink); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 44px); }
.tile { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; align-items: start; }
.test-tile { grid-row: 1 / span 2; width: 92px; height: auto; }
.tt-body { fill: #c9a27a; stroke: var(--ink); stroke-width: 3; }
.tt-glaze { stroke: var(--ink); stroke-width: 3; }
.tt-glaze.g1 { fill: var(--oxblood); }
.tt-glaze.g2 { fill: #b9822f; }
.tt-glaze.g3 { fill: #7f9786; }
.tt-hole { fill: var(--sand); stroke: var(--ink); stroke-width: 3; }
.tile-big { font: 800 clamp(2.4rem, 4vw, 3.6rem)/1 var(--display); letter-spacing: -0.04em; margin-bottom: 8px; }
.tile p:not(.tile-big) { font-size: 16px; }
.proof-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: clamp(36px, 4vw, 56px); padding-top: 18px; border-top: 2px solid var(--ink); }
.proof-links p { font-weight: 700; margin-right: 6px; }
.proof-links a { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px var(--mono); }
.tiles-note { margin-top: 14px; font: 400 13px var(--mono); color: #4a403a; }

/* ---------- 05 Visit (the calm chapter) ---------- */
.visit { padding: clamp(64px, 8vw, 128px) var(--gutter); border-top: 1px solid var(--ink); }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(16px, 2.5vw, 36px); }
.visit-card { padding-top: 14px; border-top: 3px solid var(--wine); }
.visit-label { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.visit-address { font: 800 clamp(1.5rem, 2.4vw, 2.2rem)/1.15 var(--display); letter-spacing: -0.03em; margin-bottom: 22px; }
.visit .actions { flex-direction: column; align-items: stretch; }
.visit .btn { overflow-wrap: anywhere; }
.hours { margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; text-align: right; }
.visit-small { margin-top: 12px; font-size: 14px; color: var(--muted); }
.arrive { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 16px; }
.arrive li { padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* ---------- 06 Close ---------- */
.close { background: var(--kiln); color: var(--paper); padding: clamp(64px, 8vw, 128px) var(--gutter); --focus: var(--brass-hi); }
.close h2 em { color: var(--brass); }
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.close h2 { font-size: clamp(2.4rem, 6vw, 5.8rem); margin: 14px 0 22px; }
.close-summary { font: italic 400 clamp(22px, 2.3vw, 30px)/1.3 var(--serif); max-width: 24em; margin-bottom: 26px; }
.close-small { margin-top: 16px; font-size: 14px; color: #d9cec2; }
.kiln-plate { margin: 0; border: 1px solid #5d5350; background: #1a1617; }
.kiln-svg { width: 100%; height: auto; }
.kiln-tag { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 12px 16px; border-top: 1px solid #5d5350; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #e5d9c8; }
.kiln-tag span:first-child { color: var(--brass); }
.close .p-sil, .close .p-sec, .close .p-glaze { stroke: #120f10; }
.close .p-axis { stroke: #b7a493; }

/* ---------- Reveals (hidden only once scenes are ready; never by default) ---------- */
.scenes-ready [data-reveal] { transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1), clip-path 1s cubic-bezier(.3, .6, .2, 1); }
.scenes-ready .plate[data-reveal]:not(.is-in) { opacity: .1; transform: translateY(48px); }
.scenes-ready .plate .mini-pot { transition: clip-path 1.1s cubic-bezier(.3, .6, .2, 1) .15s; }
.scenes-ready .plate:not(.is-in) .mini-pot { clip-path: inset(100% 0 0 0); }
.scenes-ready .plate:nth-child(2) { transition-delay: .08s; }
.scenes-ready .plate:nth-child(3) { transition-delay: .16s; }
.scenes-ready .plate:nth-child(4) { transition-delay: .24s; }
.scenes-ready .yp-controls[data-reveal]:not(.is-in) { opacity: .1; transform: translateY(40px); }
.scenes-ready .yp-plate[data-reveal]:not(.is-in) { clip-path: inset(0 0 100% 0); }
.scenes-ready .note-card[data-reveal]:not(.is-in) { opacity: .1; transform: translateY(44px); }
.scenes-ready .tile[data-reveal]:not(.is-in) { opacity: .15; transform: translateY(36px); }
.scenes-ready .tile .tt-glaze { transition: clip-path 1.3s cubic-bezier(.4, .1, .3, 1) .2s; }
.scenes-ready .tile:not(.is-in) .tt-glaze { clip-path: inset(0 0 100% 0); }
.scenes-ready .tile:nth-child(2), .scenes-ready .tile:nth-child(2) .tt-glaze { transition-delay: .15s; }
.scenes-ready .tile:nth-child(3), .scenes-ready .tile:nth-child(3) .tt-glaze { transition-delay: .3s; }
.scenes-ready .proof-links[data-reveal]:not(.is-in) { clip-path: inset(0 100% 0 0); }

/* ---------- Owner panel and footer ---------- */
.owner { background: #f7f6f1; color: #292e30; padding: clamp(40px, 5vw, 72px) var(--gutter); border-top: 5px solid #30363a; display: grid; gap: 14px; }
.owner .kicker { color: #4e5558; }
.owner h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); max-width: 22em; letter-spacing: -0.03em; }
.owner p { max-width: 46em; }
.owner-url { font-size: 14px; }
.owner-links { display: flex; flex-wrap: wrap; gap: 10px; }
.owner .btn-line { color: #292e30; }
.owner-small { font-size: 14px; color: #4e5558; }
.site-footer { background: var(--ink); color: var(--paper); padding: clamp(40px, 5vw, 64px) var(--gutter) 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; --focus: var(--brass-hi); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.foot-col a { display: inline-flex; align-items: center; min-height: 40px; overflow-wrap: anywhere; }
.foot-col span { padding: 8px 0; font-size: 15px; }
.foot-brand { font: 800 22px var(--display); letter-spacing: -0.03em; margin-bottom: 6px; }
.foot-legal { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid #6d6462; font-size: 13px; color: #d9cec2; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .visit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .visit-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-plate { max-width: 640px; }
  .yp-grid { grid-template-columns: minmax(0, 1fr); }
  .close-grid { grid-template-columns: minmax(0, 1fr); }
  .kiln-plate { max-width: 560px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .plates { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .visit-grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer { grid-template-columns: minmax(0, 1fr); }
  .hero .actions .btn { flex: 1 1 100%; }
  .note-actions .btn { flex: 1 1 100%; }
  .close .actions .btn { flex: 1 1 100%; }
  .mid-cta { font-size: 22px; }
  .mid-cta .btn { flex: 1 1 100%; }
  .section-intro { font-size: 16px; }
}

/* ---------- Reduced motion: discrete states only ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Forced colours ---------- */
@media (forced-colors: active) {
  .btn, .chips label, .menu-toggle, .header-call { border: 2px solid ButtonText; }
  .chips input:checked + label { border-width: 4px; text-decoration: underline; }
  .js .week-list li.is-now .wk-name { text-decoration: underline; }
  .weeks-progress i { background: Highlight; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ---------- Print ---------- */
@media print {
  .site-header { position: static; }
  .menu-toggle, .skip, .copy-btn, #yp-copy, .weeks-progress { display: none !important; }
  .site-nav { display: flex !important; position: static !important; box-shadow: none !important; }
  .weeks { height: auto; background: #fff; color: #000; }
  .weeks-stage { position: static; height: auto; display: block; overflow: visible; }
  .sheet { height: 420px; margin-top: 16px; }
  .js .week-list li, .js .week-list { display: block !important; opacity: 1 !important; padding-bottom: 0 !important; }
  .js .week-list li .wk-name, .js .week-list li .wk-desc { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; white-space: normal !important; display: inline; }
  [data-reveal], [data-reveal] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .close, .site-footer, .about { background: #fff; color: #000; }
}