@font-face{
  font-family:"Inter Tight";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-tight-latin.woff2") format("woff2");
}

:root{
  --stone:#efe6d6;
  --ink:#1a1512;
  --post:#9e2a1c;      /* the postbox door, darkened for text contrast */
  --plate:#fbf7ee;     /* the enamel plate */
  --mute:#5c534b;
  --rule:#cbbfab;
  --gutter:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--stone);color:var(--ink)}
html{scroll-behavior:smooth}
body{font-family:"Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block}
ul,ol{list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--post);outline-offset:3px}

.skip{position:absolute;left:16px;top:-60px;z-index:10;background:var(--ink);color:var(--stone);padding:10px 14px;text-decoration:none;font-weight:500}
.skip:focus{top:16px}

/* ---------- hero (unchanged in look) ---------- */
.hero{position:relative;height:100vh;min-height:760px;overflow:hidden}
/* the photograph is the idea: a collection plate, 09:00 and 16:00. Anchored low so the emblem at the top is cropped off */
.hero img{position:absolute;left:0;bottom:0;width:100%;height:114%;object-fit:cover;object-position:center bottom}

.hero nav{position:absolute;top:0;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;height:84px;font-size:14px;z-index:2}
.hero nav a{color:var(--ink);text-decoration:none;font-weight:500}
.hero nav .mark{font-weight:800;letter-spacing:-0.02em;font-size:18px}

h1{position:absolute;left:60px;top:170px;font-weight:800;letter-spacing:-0.05em;line-height:.94;font-size:clamp(56px,6.6vw,94px)}

.foot{position:absolute;left:var(--gutter);bottom:56px;max-width:460px}
.lede{font-size:18px;line-height:1.45;margin-bottom:28px}
.btn{display:inline-block;background:var(--ink);color:var(--stone);text-decoration:none;font-weight:500;font-size:16px;padding:18px 26px;border-radius:2px}
.btn:hover{background:#000}
.price{display:inline-block;margin-left:20px;font-size:15px;opacity:.7}

/* ---------- shared section frame ---------- */
.band{padding:136px var(--gutter);max-width:1440px;margin:0 auto}
h2{font-weight:800;letter-spacing:-0.045em;line-height:.98;font-size:clamp(40px,4.4vw,64px);max-width:16ch}
h3{font-weight:800;letter-spacing:-0.02em;font-size:20px;line-height:1.2}
.band p{font-size:17px;line-height:1.5}
.note{max-width:46ch;margin-top:48px;color:var(--mute)}

/* ---------- how: the day ---------- */
.day{margin-top:72px}
.chart{position:relative;height:220px}
.chart svg{width:100%;height:100%;overflow:visible}
.quiet{fill:#e6dbc8}
.t{stroke:#a39684;stroke-width:2;vector-effect:non-scaling-stroke}
.bar{stroke:var(--post);stroke-width:10;vector-effect:non-scaling-stroke}
.axis{stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.flag{position:absolute;font-size:14px;line-height:1.3;white-space:nowrap}
.flag b{display:block;font-weight:800;font-size:18px;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.f9{left:calc(300 / 1400 * 100% + 14px);top:calc(116 / 200 * 100% - 4px)}
.f16{right:calc(400 / 1400 * 100% + 14px);top:calc(20 / 200 * 100% - 4px);text-align:right}
.hours{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hours li{width:0;display:flex;justify-content:center}
.hours li:first-child{justify-content:flex-start}
.hours li:last-child{justify-content:flex-end}
.day figcaption{margin-top:20px;font-size:14px;line-height:1.5;color:var(--mute);max-width:60ch}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:88px;border-top:1.5px solid var(--ink);padding-top:28px}
.steps .when{font-weight:800;letter-spacing:-0.04em;font-size:44px;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:18px}
.steps h3{margin-bottom:8px}
.steps p:not(.when){max-width:30ch}

/* motion: the two hand-overs rise as the day scrolls into view */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .chart{view-timeline-name:--day}
    .bar,.flag{animation-timeline:--day;animation-fill-mode:both;animation-timing-function:linear}
    .bar{transform-box:fill-box;transform-origin:50% 100%;animation-name:rise}
    .flag{animation-name:show}
    .b9{animation-range:entry 60% cover 34%}
    .f9{animation-range:cover 30% cover 37%}
    .b16{animation-range:cover 34% cover 44%}
    .f16{animation-range:cover 42% cover 48%}
  }
}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes show{from{opacity:0}to{opacity:1}}

/* ---------- holds: enamel plates ---------- */
.holds{border-top:1px solid var(--rule)}
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:64px}
.plate{background:var(--plate);border:2px solid var(--ink);border-radius:4px;padding:26px 28px 32px;box-shadow:0 0 0 6px var(--plate),0 0 0 8px var(--post)}
.plate h3{text-transform:uppercase;font-weight:600;letter-spacing:.06em;font-size:22px;padding-bottom:10px;margin-bottom:18px;border-bottom:2px solid var(--ink);font-stretch:condensed}
.plate p{max-width:28ch}

/* ---------- urgent: the postbox door ---------- */
.urgent{max-width:none;background:var(--post);color:var(--stone);padding-left:max(var(--gutter),calc((100% - 1312px) / 2));padding-right:max(var(--gutter),calc((100% - 1312px) / 2))}
.urgent .intro{margin-top:24px;font-size:19px;max-width:44ch}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:72px;counter-reset:r}
.rules li{border-top:1.5px solid var(--stone);padding-top:24px;counter-increment:r}
.rules li::before{content:counter(r);display:block;font-weight:800;font-size:15px;margin-bottom:28px;font-variant-numeric:tabular-nums}
.rules h3{margin-bottom:8px}
.rules p{max-width:30ch}
.urgent .note{color:var(--stone);opacity:.86}

/* ---------- pricing ---------- */
.ticket{display:grid;grid-template-columns:auto 1fr;gap:80px;align-items:end;margin-top:64px;border-top:1.5px solid var(--ink);padding-top:40px}
.amount{display:flex;align-items:flex-end;gap:18px}
.num{font-weight:800;letter-spacing:-0.06em;line-height:.8;font-size:clamp(120px,14vw,200px)}
.per{font-size:18px;line-height:1.3;padding-bottom:6px}
.terms li{font-size:17px;line-height:1.5;padding:14px 0;border-bottom:1px solid var(--rule)}
.terms li:last-child{border-bottom:0}

/* ---------- closing ---------- */
.start{border-top:1px solid var(--rule);padding-bottom:120px}
.start h2{max-width:none;font-size:clamp(48px,6.6vw,94px);letter-spacing:-0.05em;line-height:.94}
.start .next{margin-top:28px;font-size:18px;max-width:40ch}
.start .btn{margin-top:40px}

.colophon{padding:28px var(--gutter) 40px;max-width:1440px;margin:0 auto;font-size:14px;color:var(--mute);border-top:1px solid var(--rule)}

/* ---------- tablet ---------- */
@media (max-width:1000px){
  .steps,.rules{grid-template-columns:1fr;gap:40px}
  .plates{grid-template-columns:1fr;gap:36px;max-width:520px}
  .ticket{grid-template-columns:1fr;gap:32px}
}

/* phone: the plate on top, the words below it on the stone */
@media (max-width:700px){
  :root{--gutter:20px}
  .hero{height:auto;min-height:0;padding:0 20px 40px}
  .hero img{position:relative;display:block;margin:0 -20px;width:calc(100% + 40px);height:62vh;object-position:74% 40%;object-view-box:inset(10% 0 0 0)}
  .hero nav{left:20px;right:20px;height:64px}
  .hero nav a{color:var(--stone)}
  .hero nav .mark{color:var(--ink)}
  h1{position:static;font-size:52px;margin:28px 0 20px}
  .foot{position:static;max-width:none}
  .lede{font-size:17px;margin-bottom:24px}

  .band{padding-top:88px;padding-bottom:88px}
  h2{font-size:40px}
  .day{margin-top:48px}
  .chart{height:220px}
  .f9{left:calc(300 / 1400 * 100% - 5px);top:auto;bottom:calc(84 / 200 * 100% + 10px)}
  .flag{font-size:13px}
  .flag b{font-size:16px}
  .hours li:nth-child(even){visibility:hidden}
  .steps{margin-top:56px}
  .steps .when{font-size:36px}
  .plates{margin-top:44px}
  .rules{margin-top:48px}
  .start h2{font-size:48px}
}