:root{
  --cream:#F2EFE7; --cream-2:#E9E4D8; --green:#172923; --green-2:#22392F; --orange:#D16A43; --orange-d:#A24826;   /* 4.7:1 on cream-2, 5.2:1 on cream (#B4532F was 4.3) */
  --tone-c:var(--cream);   /* the page tone: main.js writes it from the sky; html, the nav and the night scrims all paint it */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI","Noto Sans Bengali",sans-serif;
  --m:clamp(16px,5vw,72px);
  --orange-l:#EE9A76;
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box;margin:0}
/* registered, so the tone can glide: where it steps over the band no ink reads on, the page fades through it in .3 s like light
   going, and every scrim (same variable) glides with it instead of showing an edge */
@property --tone-c{syntax:'<color>';inherits:true;initial-value:#F2EFE7}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--tone-c);transition:--tone-c .3s ease}
[tabindex="-1"]:focus{outline:none}   /* sections take focus after an in-page link (keyboard users carry on from there) */
[hidden]{display:none!important}
html.lenis{scroll-behavior:auto}
body{position:relative;color:var(--green);font:400 18px/1.55 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
::selection{background:var(--orange);color:var(--cream)}
.wrap{position:relative;z-index:2;padding-inline:var(--m);max-width:1560px;margin-inline:auto}

h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.03em;line-height:.98;text-wrap:balance}
h1{font-size:clamp(3.4rem,7.4vw,8.25rem)}
.chapter-title{font-size:clamp(2.6rem,5.6vw,5.75rem)}
h3{font-size:clamp(1.9rem,3.3vw,3.25rem);line-height:1.05}
[lang=bn]{letter-spacing:0;line-height:1.2}
p{text-wrap:pretty}   /* no one-word last lines */
.lede{font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.35}
.note{font-size:1rem;opacity:.72}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:32px;padding:14px var(--m);background:var(--tone-c)}
.mark{display:flex;align-items:center;gap:10px;font:600 1.25rem/1 var(--serif);letter-spacing:-.01em;text-decoration:none;margin-right:auto}
.nav nav{display:flex;gap:28px}
.nav nav a{text-decoration:none;font-weight:500;font-size:1rem;padding:8px 0;background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--orange);color:#fff;font:600 1.1rem/1 var(--sans);text-decoration:none;padding:18px 30px;border-radius:999px;border:0;cursor:pointer;transition:transform .16s var(--ease),background-color .2s ease}
.btn span{transition:transform .25s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-small{padding:12px 20px;font-size:.98rem}
.btn-wide{width:100%}
.link{display:inline-block;font-weight:600;color:var(--orange-d);text-decoration:none;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.link span{display:inline-block;transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .nav nav a:hover{background-size:100% 2px}
  .btn:hover{background:var(--orange-d)}
  .btn:hover span,.link:hover span{transform:translateX(5px)}
  .round:hover{background:var(--green);color:var(--cream)}
}

/* hero */
.hero{position:relative;min-height:max(100svh,680px);overflow:hidden}
.backdrop{position:fixed;inset:auto 0 0 0;height:62svh;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%)}
.backdrop img{width:100%;height:100%;object-fit:cover;object-position:50% 82%}
/* no JS: the page stays cream, so the skyline stays behind the hero only (green text over a fixed dusk city was unreadable) */
html:not(.js) .backdrop{position:absolute;top:max(100svh,680px);bottom:auto;transform:translateY(-100%)}
/* short screens (landscape phones, short laptops): a fixed city would sit under the hero copy, so it stays at the hero's foot */
@media (max-height:620px){html.js .backdrop{position:absolute;height:45svh;top:calc(max(100svh,680px) - 45svh);bottom:auto}}
.hero-in{padding-top:clamp(96px,15svh,150px)}
h1 .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
h1 .ln>span{display:block}
.hero .lede{margin-top:clamp(14px,2.2svh,26px)}
.hero .now{display:flex;width:fit-content;margin-top:clamp(12px,1.8svh,18px);font-size:1rem}   /* the chip itself is styled with .when below */
.now:not([hidden])+.hero-row{margin-top:clamp(14px,calc(3svh - 8px),26px)}   /* the chip borrows most of the gap, so the button and portrait barely move */
.now b{font-weight:600;font-variant-numeric:tabular-nums}
.now i{font-style:normal;opacity:.75}
.hero-row{margin-top:clamp(18px,3svh,34px)}
.hero .btn{white-space:nowrap}
.portrait{position:absolute;right:var(--m);top:clamp(84px,11svh,120px);width:min(25vw,40svh,390px);aspect-ratio:1;
  -webkit-mask:radial-gradient(37.5% 37.5% at 50% 47.9%,#000 99%,transparent 100%),linear-gradient(#000,#000) top/100% 47.9% no-repeat;mask:radial-gradient(37.5% 37.5% at 50% 47.9%,#000 99%,transparent 100%),linear-gradient(#000,#000) top/100% 47.9% no-repeat}
.stops{position:absolute;inset:0;z-index:2;pointer-events:none}
.stops li{position:absolute;left:var(--x);top:calc(var(--y) + var(--dy,0px));transform:translate(-50%,-100%);font:500 1.15rem/1 var(--serif);padding:0 0 24px;white-space:nowrap}
.stops li::before{content:"";position:absolute;left:calc(50% - 6px);bottom:-6px;width:12px;height:12px;border-radius:50%;background:var(--orange)}
.stops li:first-child{padding:0 0 46px}
.stops li:first-child::before{display:none}

/* flight line */
.flight.over{z-index:6}
.flight{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.trail,.ink{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ink{stroke-width:3.5}      /* the signature: a heavier pen than the flight line, so it reads as ink */
.plane{opacity:0}
html.js .plane{opacity:1}

/* chapters */
.chapter{position:relative;padding-block:clamp(72px,9vw,132px)}
/* the products curtain: a sheet with soft top corners and a faint shadow, drawn up over the morning sky */
.tone{background:var(--cream-2);border-radius:clamp(22px,3vw,44px) clamp(22px,3vw,44px) 0 0;box-shadow:0 -1px 0 rgba(23,41,35,.05),0 -28px 56px -34px rgba(23,41,35,.28)}
.chapter-title{max-width:16ch}
.job{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,110px);align-items:center;margin-top:clamp(56px,8vw,120px)}
.job.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.job.flip .job-text{order:2}
.job-text{display:grid;gap:22px;justify-items:start}
.job-text p{max-width:46ch}
.shot{position:relative;border-radius:12px;overflow:hidden;background:var(--green)}
.shot img{width:100%}
.mock{display:grid;gap:18px;padding:clamp(22px,4vw,56px);font-size:1.05rem}
.bubble{justify-self:start;max-width:80%;padding:16px 20px;border-radius:18px 18px 18px 4px;background:var(--green-2);color:var(--cream)}
.bubble.bot{justify-self:end;border-radius:18px 18px 4px 18px;background:var(--orange);color:#fff;font-weight:600}
.paper{justify-self:end;width:min(100%,440px);padding:24px 26px;border-radius:6px;background:#FBF9F3;color:var(--green);display:grid;gap:10px}
.paper-head{display:flex;justify-content:space-between;font:600 1.5rem/1 var(--serif);padding-bottom:10px}
.paper-head span{font:400 1rem/1.5 var(--sans)}
.paper-row{display:grid;grid-template-columns:1fr 48px 80px;font-variant-numeric:tabular-nums}
.paper-row span:not(:first-child){text-align:right}
.paper.wide{justify-self:start;width:min(100%,520px)}
.paper-row.run{grid-template-columns:74px 1fr 20px}
.paper-row.run span:nth-child(2){text-align:left}
.paper-row.run span:first-child{font-weight:600}
.paper-row.run span:last-child{color:var(--orange-d);font-weight:700}
.paper-row.total{font-weight:700;padding-top:10px;margin-top:4px;background:linear-gradient(var(--green),var(--green)) top/100% 2px no-repeat}
.mock.news{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);align-items:center;column-gap:clamp(18px,3vw,40px)}
.clock{grid-column:1;display:flex;align-items:baseline;justify-content:space-between;gap:16px;color:var(--cream);font:600 clamp(2.4rem,4.4vw,4rem)/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.news .clock [data-clock]{display:inline-block;min-width:3.95em}   /* the widest time it shows (10:00pm, 3.91em), so the caption never re-wraps (D11) */
.news .clock small{text-align:right}
.clock small{font:400 1rem/1.3 var(--sans);letter-spacing:0;opacity:.75}
.news .paper{grid-column:1;width:100%}
.slide{grid-column:2;grid-row:1/span 2;position:relative;display:grid;gap:12px;padding:12px 12px 16px;border-radius:12px;background:#FBF9F3;color:var(--green);transform:rotate(3deg)}
/* before the picture wipes in, the frame is a layout in progress (two faint title bars), not a failed orange image */
.slide-pic{aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:linear-gradient(rgba(23,41,35,.09),rgba(23,41,35,.09)) 12px calc(100% - 34px)/58% 9px no-repeat,linear-gradient(rgba(23,41,35,.09),rgba(23,41,35,.09)) 12px calc(100% - 18px)/36% 9px no-repeat,#EDE7DA}
.slide-pic img{width:100%;height:100%;object-fit:cover;object-position:78% 100%}
.slide-title{font:600 clamp(1.15rem,1.7vw,1.5rem)/1.1 var(--serif);letter-spacing:-.02em}
.slide-dots{display:flex;gap:5px}
.slide-dots i{width:7px;height:7px;border-radius:50%;background:var(--green);opacity:.3}
.slide-dots i:first-child{background:var(--orange);opacity:1}
.badge{position:absolute;right:-12px;top:-14px;padding:9px 16px;border-radius:999px;background:var(--orange);color:#fff;font-weight:600;font-size:.95rem}
.news .bubble{grid-column:1/-1}
.mock.bill{grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);align-items:center;column-gap:clamp(18px,3vw,36px)}
.chat{display:grid;gap:14px}
.chat .bubble{max-width:100%}
.bill .paper{width:100%}
.paper-row span{display:block}
.mock .paper{padding:22px 22px;font-size:1rem}
.mock .paper-head{white-space:nowrap;gap:12px;align-items:baseline}
.bill .paper-row span:first-child{white-space:nowrap}
.mock{padding:clamp(20px,3vw,44px)}
@media (max-width:860px){
  .mock.news,.mock.bill{grid-template-columns:1fr}
  .slide{grid-column:1;grid-row:auto;width:min(64%,230px);justify-self:center;margin-top:8px}
}
/* two-column scenes need room: in a narrow picture column (tablets, small laptops) they stack as on phones */
.job-pic{container-type:inline-size}
@container (max-width:640px){.mock.bill{grid-template-columns:1fr}}   /* the bill's figures do not wrap */
@container (max-width:480px){
  .mock.news{grid-template-columns:1fr}
  .news .slide{grid-column:1;grid-row:auto;width:min(64%,230px);justify-self:center;margin-top:8px}
}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,28px);align-items:start}
.pair .shot:last-child{margin-top:clamp(28px,5vw,80px)}

/* the projects wall: two groups of six equal cells, 3 -> 2 -> 1 columns (6 divides into each, so no width leaves a hole) */
.wall-head{display:flex;align-items:end;justify-content:space-between;gap:24px}
.wall-head+.works+.wall-head{margin-top:clamp(88px,9vw,140px)}   /* the second group's head */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:clamp(40px,3.9vw,56px) clamp(20px,2.2vw,32px);margin-top:clamp(28px,3.5vw,48px)}
@media (max-width:1099px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.works{grid-template-columns:1fr}}
.work{display:grid;align-content:start;justify-items:start}
/* the frame: every film is 4:3 paper on the cream-2 curtain (the ad is 16:9, cropped at the sides where it has no words) */
.work .loop,.next-slot{justify-self:stretch;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--green);box-shadow:0 0 0 1px rgba(23,41,35,.10),0 22px 44px -30px rgba(23,41,35,.45)}
.kind{font:600 .78rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;margin-top:18px}   /* full ink: faded ink on cream-2 drops under 4.5:1 */
.work h3{font-size:clamp(1.35rem,1.9vw,1.8rem);margin-top:8px}
.work h3+p{max-width:38ch;margin-top:8px}
.work .link,.work .when{margin-top:12px}
@media (hover:hover) and (pointer:fine){.link.down:hover span{transform:translateY(3px)}}
/* the open slot: the films' grid paper (48 px on 960 = 20 x 15 cells), a dashed inset edge, an orange plus */
.next-slot{display:grid;place-content:center;justify-items:center;gap:16px;outline:2px dashed rgba(23,41,35,.3);outline-offset:-12px;
  background:linear-gradient(90deg,#E2DCCD 1px,transparent 1px) 0 0/5% 6.6667%,linear-gradient(#E2DCCD 1px,transparent 1px) 0 0/5% 6.6667%,var(--cream)}
.next-slot i{width:56px;height:56px;border-radius:50%;background:linear-gradient(#fff,#fff) center/22px 3px no-repeat,linear-gradient(#fff,#fff) center/3px 22px no-repeat,var(--orange)}
.next-slot span{font:italic 600 clamp(1.3rem,1.8vw,1.7rem)/1.1 var(--serif);letter-spacing:-.02em}
[data-films] svg{display:block;margin:auto}
[data-films][aria-pressed=true] .i-pause,[data-films]:not([aria-pressed=true]) .i-play{display:none}
.round{width:56px;height:56px;border-radius:50%;border:2px solid var(--green);background:none;color:var(--green);font:500 1.3rem/1 var(--sans);cursor:pointer;transition:transform .16s var(--ease),background-color .2s ease,color .2s ease}
.round:active{transform:scale(.94)}

/* night: #automation runs over the fixed skyline; main.js sets --night and html.is-night from the scroll */
.hero,#automation,.nav,.link{transition:color .3s steps(2,jump-none)}   /* the ink flips half-way through the tone's .3 s glide over the band */
html.is-night .hero,html.is-night #automation,html.is-night .nav{color:var(--cream)}   /* the nav's background is the page tone, set by main.js */
html.is-night #automation .link{color:var(--orange-l)}
.trail,.ink{transition:opacity .6s ease}
#workbench{scroll-margin-top:100px}      /* a bare heading: the native jump (reduced motion, no JS) lands below the fixed nav */
html.is-night .trail{opacity:.45}
#automation .shot{background:var(--green-2);box-shadow:0 0 0 1px rgba(242,239,231,.12)}
#automation .mock .bubble:not(.bot){background:rgba(242,239,231,.1)}   /* the card took --green-2, so the chat bubble steps up */
.night-lede{margin-top:clamp(14px,2vw,24px);max-width:30ch}
#automation :is(.note,.next,.cap){opacity:1}   /* full ink over the night: these can be on screen while the tone turns, where faded ink drops under 4.5:1 */
/* time chips: the time in full ink (orange text failed 4.5:1 on cream and in the turns), the orange is a small "running" light */
.when,.now{display:inline-flex;align-items:center;gap:.55em;padding:7px 15px 7px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent);font-size:.95rem;line-height:1.3}
.when::before,.now::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 22%,transparent)}
.when b{font:600 1.15rem/1 var(--serif);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.job-text .when{margin-bottom:-8px}
.next{font-size:1rem;opacity:.75}
.cap{margin-top:12px;font-size:.95rem;opacity:.72}
/* copy crosses the fixed skyline (dark trees at dusk, lit windows at night): each text group sits on one scrim of the page
   tone itself, so it has no edge on the plain page and only fogs out the city right behind the words. The scrim is the group's
   own ::before under an isolated group, so it can never paint over a neighbour's letters; its edge is feathered by a mask */
#automation{overflow-x:clip}   /* the feather reaches past the screen edge on phones; clip, not hidden: no scroll box */
html.js #automation :is(.night-head,.job-text,.cap,.dawn>span){position:relative;isolation:isolate}
.night-head{width:fit-content;max-width:100%}   /* the fog is as wide as the words, not the page */
html.js #automation :is(.night-head,.job-text,.cap,.dawn>span)::before{content:"";position:absolute;inset:calc(-1 * var(--fy)) calc(-1 * var(--fx));z-index:-1;pointer-events:none;
  --fx:120px;--fy:60px;      /* feather: 120 px sideways, 60 px up and down (a job's caption is 56 px above the next job on phones) */
  background:color-mix(in srgb,var(--tone-c) 84%,transparent);
  --rx:linear-gradient(90deg,transparent,rgb(0 0 0/0.04) calc(var(--fx)*0.125),rgb(0 0 0/0.15) calc(var(--fx)*0.25),rgb(0 0 0/0.31) calc(var(--fx)*0.375),rgb(0 0 0/0.5) calc(var(--fx)*0.5),rgb(0 0 0/0.69) calc(var(--fx)*0.625),rgb(0 0 0/0.85) calc(var(--fx)*0.75),rgb(0 0 0/0.96) calc(var(--fx)*0.875),#000 var(--fx),#000 calc(100% - var(--fx)),rgb(0 0 0/0.96) calc(100% - var(--fx)*0.875),rgb(0 0 0/0.85) calc(100% - var(--fx)*0.75),rgb(0 0 0/0.69) calc(100% - var(--fx)*0.625),rgb(0 0 0/0.5) calc(100% - var(--fx)*0.5),rgb(0 0 0/0.31) calc(100% - var(--fx)*0.375),rgb(0 0 0/0.15) calc(100% - var(--fx)*0.25),rgb(0 0 0/0.04) calc(100% - var(--fx)*0.125),transparent);
  --ry:linear-gradient(180deg,transparent,rgb(0 0 0/0.04) calc(var(--fy)*0.125),rgb(0 0 0/0.15) calc(var(--fy)*0.25),rgb(0 0 0/0.31) calc(var(--fy)*0.375),rgb(0 0 0/0.5) calc(var(--fy)*0.5),rgb(0 0 0/0.69) calc(var(--fy)*0.625),rgb(0 0 0/0.85) calc(var(--fy)*0.75),rgb(0 0 0/0.96) calc(var(--fy)*0.875),#000 var(--fy),#000 calc(100% - var(--fy)),rgb(0 0 0/0.96) calc(100% - var(--fy)*0.875),rgb(0 0 0/0.85) calc(100% - var(--fy)*0.75),rgb(0 0 0/0.69) calc(100% - var(--fy)*0.625),rgb(0 0 0/0.5) calc(100% - var(--fy)*0.5),rgb(0 0 0/0.31) calc(100% - var(--fy)*0.375),rgb(0 0 0/0.15) calc(100% - var(--fy)*0.25),rgb(0 0 0/0.04) calc(100% - var(--fy)*0.125),transparent);      /* smoothstep stops: no slope break where the fog ends */
  -webkit-mask:var(--rx),var(--ry);-webkit-mask-composite:source-in;mask:var(--rx),var(--ry);mask-composite:intersect}
/* the title and the dawn line have open space round them: a long, slow feather, so their fog reads as haze, not a panel */
html.js #automation :is(.night-head,.dawn>span)::before{--fx:220px;--fy:110px}
.dawn{min-height:70svh;display:grid;place-items:center;text-align:center;font:600 clamp(2.6rem,5.6vw,5.75rem)/.98 var(--serif);letter-spacing:-.03em;padding-top:clamp(56px,8vw,120px)}
.dawn>span{display:inline-block;text-wrap:balance}

#order{background:var(--cream)}

/* order counter */
.counter{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,6vw,110px);align-items:start}
.menu{display:grid;gap:14px}
.menu .lede{margin:6px 0 18px}
.row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;border-radius:16px;background:var(--cream-2);font-size:clamp(1.1rem,1.6vw,1.45rem);font-weight:500;cursor:pointer;transition:transform .16s var(--ease),background-color .2s ease}
.row:active{transform:scale(.985)}
.row input{appearance:none;-webkit-appearance:none;order:2;flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--green);background:var(--cream) center/0 no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");cursor:pointer;transition:background-size .2s var(--ease),background-color .2s ease,border-color .2s ease}
.row input:checked{background-color:var(--orange);border-color:var(--orange);background-size:22px}
.row:has(input:checked){background:#E3DCCB}
.till{position:sticky;top:96px;-webkit-user-select:none;user-select:none}   /* a double-click on Send must not paint the stamp as a selection */
.slot{height:22px;border-radius:8px;background:var(--green)}
.receipt{margin:-8px 14px 0;padding:44px 26px 30px;background:#FBF9F3;font:400 .98rem/1.5 ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),96% 100%,92% calc(100% - 10px),88% 100%,84% calc(100% - 10px),80% 100%,76% calc(100% - 10px),72% 100%,68% calc(100% - 10px),64% 100%,60% calc(100% - 10px),56% 100%,52% calc(100% - 10px),48% 100%,44% calc(100% - 10px),40% 100%,36% calc(100% - 10px),32% 100%,28% calc(100% - 10px),24% 100%,20% calc(100% - 10px),16% 100%,12% calc(100% - 10px),8% 100%,4% calc(100% - 10px),0 100%);padding-bottom:44px}
.r-title{text-align:center;font-weight:700;letter-spacing:.08em;font-size:1.15rem;padding-bottom:16px;border-bottom:2px dashed rgba(23,41,35,.35)}
.r-items{display:grid;gap:16px;padding:20px 0;min-height:120px}
.r-items li{display:grid;gap:2px;padding-left:22px;position:relative}
.r-items li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:11px;border-radius:50%;background:var(--orange)}
.r-items b{font-weight:700}
.r-items span{opacity:.75;font-size:.9rem}
.r-items .empty{padding-left:0;opacity:.7}
.r-items .empty::before{display:none}
.r-foot{padding:16px 0 20px;border-top:2px dashed rgba(23,41,35,.35);font-size:.9rem}
.receipt .btn{font-size:1rem;padding:18px 16px}
.btn[aria-disabled=true]{background:#B9B3A4;pointer-events:none}
.sent{position:absolute;left:14px;right:14px;top:22px;bottom:0;display:grid;place-content:center;justify-items:center;gap:18px;text-align:center}
.stamp{padding:14px 24px;border:3px solid var(--orange-d);border-radius:10px;color:var(--orange-d);font:600 clamp(1.7rem,2.8vw,2.4rem)/1 var(--serif);letter-spacing:-.01em;transform:rotate(-5deg);box-shadow:inset 0 0 0 2px var(--cream),inset 0 0 0 3px color-mix(in srgb,var(--orange-d) 45%,transparent)}
.sent-note{max-width:24ch;margin-top:4px;font-size:.98rem;line-height:1.4}
.sent .link{border:0;background-color:transparent;font:600 1.05rem/1.4 var(--sans);cursor:pointer}

/* footer */
.foot{position:relative;background:var(--green);color:var(--cream);padding-top:clamp(88px,12vw,170px);overflow:hidden}
.foot h2{font-size:clamp(2.6rem,5.6vw,5.75rem);max-width:14ch}
.contacts{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(28px,4vw,52px)}
.contacts a{display:inline-flex;padding:16px 28px;border-radius:999px;background:var(--green-2);font-weight:600;font-size:1.15rem;text-decoration:none;transition:transform .16s var(--ease),background-color .2s ease,color .2s ease}
.contacts a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.contacts a:hover{background:var(--orange);color:#fff}}
/* the signature the flight line writes: main.js reads this box and its path; without JS the static copy shows */
.sign{position:absolute;right:calc(var(--m) + 9vw);top:clamp(110px,10.5vw,170px);   /* high enough that the flourish clears the printed name below */
  width:clamp(240px,28vw,420px);aspect-ratio:2/1}
.sign svg{display:block;width:100%;height:100%;overflow:visible}
.sign path{fill:none;stroke:var(--orange);stroke-width:3.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
html.js .sign svg{visibility:hidden}
.bigname{font:600 clamp(3rem,13.2vw,15rem)/.9 var(--serif);letter-spacing:-.045em;white-space:nowrap;margin-top:clamp(64px,9vw,130px);color:var(--cream)}
.small{font-size:1rem;opacity:.7;padding:26px 0 30px}

/* phone and tablet */
@media (max-width:860px){
  body{font-size:17px}
  .nav nav{display:none}
  .mark{font-size:1.05rem;white-space:nowrap}
  .nav{gap:12px}
  .btn-small{white-space:nowrap;padding:11px 16px;font-size:.92rem}
  h1{font-size:clamp(3rem,14.6vw,5.4rem)}
  .backdrop{height:50svh}
  .backdrop img{object-position:60% 100%}
  .hero-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .portrait{position:static;width:128px;flex:none;margin-block:-14px}
  .stops li{top:calc(var(--y) + 10% + var(--dy,0px));font-size:.95rem;padding:0 0 22px}
  .stops li:first-child{padding:0 0 44px}
  .stops li:nth-child(4){top:calc(var(--y) + 16% + var(--dy,0px))}   /* Ship sits clear under the portrait, so late fonts never flip its push */
  .stops li:nth-child(3){transform:translate(-50%,0);padding:24px 0 0}   /* Automate reads under its dot, clear of the line that climbs to Ship */
  .stops li:nth-child(3)::before{top:-6px;bottom:auto}
  .bigname{font-size:11.4vw}
  .sign{position:relative;right:auto;top:auto;width:min(64vw,260px);margin:76px auto 0}
  .job,.job.flip,.counter{grid-template-columns:1fr}
  .job.flip .job-text{order:0}
  .till{position:relative}   /* not static: .sent is laid over the till */
  .row{padding:18px 18px}
  .receipt{margin-inline:8px}
}
@media (max-width:860px) and (max-height:700px),(max-width:379px){.stops{display:none}}
/* 320 to 379 px phones: the nav and the hero row fit the screen (they ran 44 px past it at 320) */
@media (max-width:379px){
  .portrait{width:92px}
  .hero-row{gap:10px}
  .hero .btn{padding:16px 22px}
  .nav{gap:8px}
  .btn-small{padding:10px 12px;font-size:.88rem}
  .mark{font-size:.95rem;gap:6px}
  .mark svg{width:22px}
}
/* landscape phones: the whole hero (title to button) fits the first screen, so the idea and its line are seen */
@media (max-width:860px) and (max-height:500px){
  h1{font-size:min(14.6vw,15svh)}
  .hero-in{padding-top:72px}
  .hero .lede{margin-top:8px}
  .hero .now{margin-top:8px}
  .now:not([hidden])+.hero-row,.hero-row{margin-top:10px}
  .portrait{width:96px;margin-block:-8px}
  .sign{width:min(56vw,220px);margin-top:40px}   /* the finished name fits the last screen, below the nav */
  .sign+.bigname{margin-top:30px}
}
/* short laptops (1280x720): a lower skyline, so "Good morning" finishes its turn above the spires */
@media (min-width:861px) and (max-height:800px){.backdrop{height:52svh}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .stops li{transition:none!important}   /* the line is routed from where the stops are right now; even a .01 ms "transition all" left it measuring the old spot */
}