/* Look CD "Roast": a coffee roastery café. The roastery floor in real photos (the drum, the cooling tray, the people at
   it), very large condensed capitals (Pathway Gothic One) for headlines, origins and prices over Golos Text, a warm stone
   page with espresso bands and one coffee-cherry accent. The signature is today's beans: a dark board where each coffee
   on the roaster this week is a ruled row with its roast curve drawn from the roaster's log. */
@font-face{font-family:"Pathway CD";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/pathway-gothic-one-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Pathway CD";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/pathway-gothic-one-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos CD";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/golos-text-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Golos CD";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/golos-text-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* tokens (light palette stone; design.ts lists every palette and checks each text pair) and type:
   --fd = Pathway Gothic One (always capitals), --ft = Golos Text, --tr = the capitals' tracking, --hh = the header row */
:root{--bg:#e8e3dc;--paper:#f3efea;--ink:#1c1612;--mute:#574d44;--line:#cbc2b6;--deep:#1f1813;--ondeep:#f1e9df;--dmute:#b9aa99;
  --dline:#3e332b;--acc:#872734;--onacc:#ffffff;--dacc:#e79a8e;--scrim:#120d0a;
  --w:1280px;--pad:clamp(20px,4vw,64px);--edge:max(var(--pad),calc((100% - var(--w)) / 2));--gap:clamp(88px,9vw,148px);--hh:76px;
  --fd:"Pathway CD","Arial Narrow",sans-serif;--ft:"Golos CD","Segoe UI",system-ui,sans-serif;--tr:.01em;--fts:calc(17px*var(--tune-size,1));
  --m-accent:var(--acc);--m-header-bg:var(--deep);--m-head-offset:0px;
  --g-max:calc(var(--w) + 2 * var(--pad));--g-pad:var(--pad);--g-bg:var(--bg);--g-paper:var(--paper);--g-surface:var(--paper);--g-ink:var(--ink);--g-muted:var(--mute);
  --g-line:var(--line);--g-accent:var(--acc);--g-on-accent:var(--onacc);--g-radius:calc(3px*var(--tune-radius,1));--g-case:uppercase;--g-ls:var(--tr);--g-fd:var(--fd);--g-ft:var(--ft);--g-fq:var(--ft);--g-fqw:400;--g-fqls:0;--g-top:0px}
.f-sack{--tr:.06em;--fts:calc(18px*var(--tune-size,1))}
@media (max-width:899px){:root{--hh:64px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:16px}
body{overflow-wrap:anywhere;margin:0;background:var(--bg);color:var(--ink);font:400 var(--fts)/1.6 var(--ft);font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;overflow-x:clip;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
h1,h2,h3,h4,summary,dt,dd,figcaption{overflow-wrap:anywhere;hyphens:auto}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
h2{font:400 calc(clamp(44px,5.4vw,80px)*var(--tune-size,1))/.95 var(--fd);letter-spacing:var(--tr);text-transform:uppercase}
h3{font:600 calc(clamp(19px,1.5vw,21px)*var(--tune-size,1))/1.25 var(--ft)}
p,figure,blockquote,dl,dd{margin:0}
p{text-wrap:pretty}
ul,ol{list-style:none;margin:0;padding:0}
.cd-w{max-width:var(--w);margin-inline:auto;padding-inline:var(--pad);box-sizing:content-box}
.cd-big{font-family:var(--fd);font-weight:400;letter-spacing:var(--tr);text-transform:uppercase;line-height:.95}
.cd-sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cd-nw{white-space:nowrap}
.cd-k{font:500 calc(15px*var(--tune-size,1))/1.4 var(--ft);color:var(--mute);margin-bottom:12px}
.cd-skip{position:absolute;left:12px;top:-60px;background:var(--acc);color:var(--onacc);padding:10px 16px;z-index:40}
.cd-skip:focus{top:12px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.cd-pr{font:400 clamp(30px,2.6vw,38px)/1 var(--fd);letter-spacing:var(--tr);color:var(--ink);white-space:nowrap}

/* ---------- buttons: one quiet outline pill on photos, one filled pill on the page ---------- */
.cd-pill,.cd-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;border-radius:999px;
  font:500 17px/1 var(--ft);text-decoration:none;white-space:nowrap}
.cd-pill{color:var(--deep);border:1.5px solid #fff;background:#fff}
.cd-btn{color:var(--onacc);background:var(--acc);border:0}
@media (hover:hover){.cd-pill:hover{background:var(--paper);border-color:var(--paper)}.cd-btn:hover{background:color-mix(in oklab,var(--acc) 86%,#000)}}

/* ---------- the header: one slim row over the top photo ---------- */
.cd-top{position:absolute;inset:0 0 auto;z-index:30;color:#fff}
.cd-plain .cd-top{position:relative;background:var(--deep);color:var(--ondeep)}
.cd-row{display:flex;align-items:center;gap:36px;height:var(--hh);padding-inline:max(var(--pad),calc((100% - var(--w) - 2 * var(--pad)) / 2 + var(--pad)))}
.cd-name{font:400 32px/1 var(--fd);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap;display:flex;align-items:center;padding-top:2px}
.cd-name img,.cd-name svg{max-height:40px;width:auto}
.cd-nav ul{display:flex;gap:30px}
.cd-nav a{font:500 calc(16px*var(--tune-size,1))/1 var(--ft);text-decoration:none;padding:10px 0;display:block;opacity:.92}
.cd-nav a[aria-current],.cd-nav a:hover{opacity:1;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.45em}
.cd-side{margin-left:auto;display:flex;align-items:center;gap:22px}
.cd-days{display:flex;align-items:center;gap:10px;font:500 calc(15px*var(--tune-size,1))/1.3 var(--ft)}
.cd-dot{width:8px;height:8px;border-radius:50%;background:var(--dacc);flex:none}
.cd-top .langs{display:flex;gap:4px}
.cd-top .langs a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;font:600 calc(14px*var(--tune-size,1))/1 var(--ft);letter-spacing:.05em;text-decoration:none;opacity:.8}
.cd-top .langs a[aria-current]{opacity:1;box-shadow:inset 0 -1.5px 0 currentColor}
.cd-menu{display:none;margin-left:auto}
.cd-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;height:44px;padding:0 18px;border:1.5px solid currentColor;border-radius:999px;font:500 calc(16px*var(--tune-size,1))/1 var(--ft)}
.cd-menu summary::-webkit-details-marker{display:none}
.cd-drop{position:absolute;left:0;right:0;top:var(--hh);background:var(--deep);color:var(--ondeep);padding:8px var(--pad) 28px;box-shadow:0 24px 48px rgb(0 0 0 / .28)}
.cd-drop ul li{border-bottom:1px solid var(--dline)}
.cd-drop ul a{display:block;padding:16px 0;font:400 calc(34px*var(--tune-size,1))/1 var(--fd);letter-spacing:var(--tr);text-transform:uppercase;text-decoration:none}
.cd-drop .cd-days{margin-top:18px;color:var(--dmute)}
.cd-drop-tel{display:inline-block;margin-top:10px;font:500 calc(18px*var(--tune-size,1))/1.4 var(--ft)}
.cd-drop .langs{display:flex;gap:18px;margin-top:14px}
.cd-drop .langs a{font:600 calc(16px*var(--tune-size,1))/1 var(--ft);padding:10px 0;text-decoration:none;color:var(--dmute)}
.cd-drop .langs a[aria-current]{color:var(--ondeep);text-decoration:underline}
@media (max-width:1099px){.cd-days{display:none}.cd-drop .cd-days{display:flex}}
@media (max-width:899px){.cd-nav,.cd-side{display:none}.cd-menu{display:block}.cd-name{font-size:calc(28px*var(--tune-size,1))}}

/* ---------- hero: drum (full-bleed) and half (exact split) ---------- */
.cd-hero{position:relative;min-height:max(640px,100svh);max-height:1080px;color:#fff;overflow:hidden;isolation:isolate;display:flex}
.cd-hero-ph{position:absolute;inset:0;z-index:-2;overflow:hidden}
.cd-hero-ph img{width:100%;height:100%;object-fit:cover}
.cd-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--scrim) 50%,transparent) 0,color-mix(in srgb,var(--scrim) 28%,transparent) 50%,transparent 80%),
    linear-gradient(180deg,color-mix(in srgb,var(--scrim) 62%,transparent) 0,transparent 20%,transparent 30%,color-mix(in srgb,var(--scrim) 70%,transparent) 62%,color-mix(in srgb,var(--scrim) 92%,transparent) 100%)}
.cd-hero-in{width:100%;display:flex;align-items:flex-end;padding:calc(var(--hh) + 32px) var(--edge) calc(clamp(48px,7vh,84px)*var(--tune-space,1))}
.cd-hero-t{max-width:1040px}
/* drum on wide screens: the capitals hold the bottom left, the lede and the action stand in a narrow column at the
   bottom right, their last line on the capitals' last baseline, like the two sides of a roaster's label */
@media (min-width:1100px){
  .cd-h-drum .cd-hero-t{max-width:none;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);grid-template-rows:auto 1fr auto auto;grid-template-areas:"k k" "h ." "h l" "h a";column-gap:56px;align-items:end}
  .cd-h-drum .cd-kicker{grid-area:k}.cd-h-drum .cd-h1{grid-area:h}
  .cd-h-drum .cd-lede{grid-area:l;margin:0;padding-bottom:4px}
  .cd-h-drum .cd-hero-a{grid-area:a;margin:22px 0 .1em}
}
.cd-kicker{font:600 calc(17px*var(--tune-size,1))/1.4 var(--ft);margin-bottom:18px;opacity:.95}
.cd-h1{font:400 calc(clamp(62px,15vw,168px)*var(--tune-size,1))/.92 var(--fd);letter-spacing:var(--tr);text-transform:uppercase;margin:0}
.cd-l{display:block;overflow:clip;padding-bottom:.03em;margin-bottom:-.03em}
.cd-l>span{display:block}
.cd-lede{font:400 calc(clamp(17px,1.45vw,20px)*var(--tune-size,1))/1.5 var(--ft);max-width:34em;margin-top:22px}
.cd-hero-a{margin-top:30px}
/* half: the words on the espresso half, the photo full height beside it */
.cd-h-half{background:var(--deep)}
.cd-h-half .cd-hero-ph{left:50%}
.cd-h-half .cd-shade{left:50%;background:linear-gradient(180deg,color-mix(in srgb,var(--scrim) 58%,transparent) 0,transparent 22%)}
.cd-h-half .cd-hero-in{padding-right:calc(50% + 48px)}
.cd-h-half .cd-h1{font-size:calc(clamp(62px,9.6vw,168px)*var(--tune-size,1))}
.cd-h-half .cd-kicker,.cd-h-half .cd-lede{color:var(--ondeep)}
.cd-hk-half .cd-top{color:var(--ondeep)}
@media (max-width:899px){
  .cd-hero{min-height:max(600px,100svh)}
  .cd-hero-in{padding-bottom:36px}
  .cd-kicker{font-size:calc(15px*var(--tune-size,1));margin-bottom:12px}
  .cd-lede{margin-top:14px}
  .cd-hero-a{margin-top:22px}
  .cd-h-half{flex-direction:column;min-height:0;max-height:none}
  .cd-h-half .cd-hero-ph{position:relative;inset:auto;height:40svh;min-height:280px}
  .cd-h-half .cd-shade{left:0;bottom:auto;height:40svh;min-height:280px}
  .cd-h-half .cd-hero-in{padding:28px var(--pad) 36px}
  .cd-h-half .cd-h1{font-size:calc(clamp(56px,16vw,120px)*var(--tune-size,1))}
}

/* ---------- inner page heads ---------- */
.cd-page{position:relative;min-height:clamp(420px,58vh,620px);color:#fff;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden}
.cd-page-ph{position:absolute;inset:0;z-index:-2}
.cd-page-ph img{width:100%;height:100%;object-fit:cover}
.cd-page-t{width:100%;padding-bottom:calc(48px*var(--tune-space,1))}
.cd-page .cd-h1{font-size:calc(clamp(60px,10vw,150px)*var(--tune-size,1))}
.cd-page .cd-lede{margin-top:14px}

/* ---------- the roastery: a statement, ruled facts, an upright photo ---------- */
.cd-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:end;padding-block:var(--gap)}
.cd-say{font:400 calc(clamp(28px,2.7vw,40px)*var(--tune-size,1))/1.22 var(--ft);letter-spacing:-.012em;text-wrap:balance}
.cd-say em{font-style:inherit}
.cd-facts{margin-top:calc(44px*var(--tune-space,1));border-top:1px solid var(--line)}
.cd-facts li{padding:16px 0;border-bottom:1px solid var(--line);font-size:calc(18px*var(--tune-size,1));display:flex;gap:16px;align-items:baseline}
.cd-facts li::before{content:"";width:18px;height:2px;background:var(--acc);flex:none;transform:translateY(-5px)}
.cd-intro-p img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:calc(3px*var(--tune-radius,1))}
@media (max-width:899px){.cd-intro{grid-template-columns:1fr}.cd-intro-p{order:-1}.cd-intro-p img{aspect-ratio:4/3}}

/* ---------- today's beans: the board ---------- */
.cd-beans{background:var(--deep);color:var(--ondeep);padding-block:var(--gap)}
.cd-beans-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26em);gap:24px 48px;align-items:end;margin-bottom:calc(clamp(36px,4vw,56px)*var(--tune-space,1))}
.cd-beans-h h2{font-size:calc(clamp(56px,8vw,128px)*var(--tune-size,1))}
.cd-beans-h p{color:var(--dmute);font-size:calc(18px*var(--tune-size,1))}
.cd-board{border-top:1px solid var(--dline)}
.cd-bean{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) 252px 128px;gap:32px;align-items:center;padding-block:32px;border-bottom:1px solid var(--dline)}
.cd-bean-o h3{font:400 calc(clamp(52px,5.4vw,80px)*var(--tune-size,1))/.9 var(--fd);letter-spacing:var(--tr);text-transform:uppercase;overflow-wrap:anywhere;hyphens:manual}
.cd-bean-o p{color:var(--dmute);font-size:calc(16px*var(--tune-size,1));margin-top:10px}
.cd-bean-f{display:grid;grid-template-columns:repeat(3,auto);gap:14px 28px;justify-content:start}
.cd-bean-f dt{font:500 calc(14px*var(--tune-size,1))/1.3 var(--ft);color:var(--dmute)}
.cd-bean-f dd{font:500 calc(17px*var(--tune-size,1))/1.35 var(--ft);margin-top:3px}
.cd-bean-n{grid-column:1/-1}
.cd-bean-n dd{font-weight:400}
.cd-lvl{display:flex;align-items:center;gap:12px;font:500 calc(15px*var(--tune-size,1))/1 var(--ft);color:var(--dmute);margin-bottom:14px}
.cd-ticks{display:flex;gap:4px}
.cd-ticks i{width:18px;height:6px;border-radius:calc(1px*var(--tune-radius,1));background:var(--dline)}
.cd-ticks i.on{background:var(--dacc)}
.cd-curve svg{display:block;width:100%;max-width:252px;height:auto;overflow:visible}
.cd-dev{fill:var(--dacc);opacity:.13}
.cd-tick,.cd-base{stroke:var(--dline);stroke-width:1}
.cd-line{fill:none;stroke:var(--dacc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cd-pt{fill:var(--deep);stroke:var(--dacc);stroke-width:2}
.cd-curve figcaption{display:flex;justify-content:space-between;margin-top:8px;font:500 calc(14px*var(--tune-size,1))/1.2 var(--ft);color:var(--dmute);font-variant-numeric:tabular-nums}
.cd-bean-p{text-align:right;display:grid;gap:6px;justify-items:end;font:500 calc(14px*var(--tune-size,1))/1.3 var(--ft);color:var(--dmute)}
.cd-bean-pv{font:400 clamp(34px,3vw,44px)/1 var(--fd);letter-spacing:var(--tr);color:var(--ondeep);white-space:nowrap}
.cd-beans-x{margin-top:28px;color:var(--dmute);font-size:calc(16px*var(--tune-size,1));max-width:44em}
@media (max-width:1199px){
  .cd-bean{grid-template-columns:minmax(0,1fr) 252px;grid-template-areas:"o c" "f p";gap:24px 40px}
  .cd-bean-o{grid-area:o}.cd-bean-c{grid-area:c}.cd-bean-f{grid-area:f}.cd-bean-p{grid-area:p;align-self:end}
}
@media (max-width:699px){
  .cd-beans-h{grid-template-columns:1fr}
  .cd-bean{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"o p" "f f" "c c";gap:20px 16px;padding-block:28px}
  .cd-bean-f{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-bean-p{align-self:start}
  .cd-bean-o h3{font-size:calc(clamp(40px,11vw,52px)*var(--tune-size,1))}
  .cd-curve{max-width:300px}.cd-curve svg{max-width:none}
}

/* ---------- what we offer: rows | list ---------- */
.cd-svc{padding-block:var(--gap)}
.cd-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,28em);gap:20px 48px;align-items:end;margin-bottom:calc(clamp(36px,4vw,56px)*var(--tune-space,1))}
.cd-head p{color:var(--mute);font-size:calc(18px*var(--tune-size,1))}
.cd-svc-lead{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:end;background:var(--paper);border-radius:calc(3px*var(--tune-radius,1));overflow:hidden;
  box-shadow:0 1px 2px var(--tone-sh,rgb(40 28 20 / .08)),0 18px 40px -24px var(--tone-sh,rgb(40 28 20 / .22))}
.cd-svc-lead img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
.cd-svc-lt{padding:calc(40px*var(--tune-space,1)) 44px calc(44px*var(--tune-space,1)) 0}
.cd-svc-lt h3{font:400 calc(clamp(44px,4.2vw,64px)*var(--tune-size,1))/.95 var(--fd);letter-spacing:var(--tr);text-transform:uppercase;margin-bottom:16px}
.cd-svc-lt>p:first-of-type{font-size:calc(18px*var(--tune-size,1));color:var(--mute)}
.cd-svc-m{display:flex;align-items:baseline;gap:18px;margin-top:22px;color:var(--mute);font:500 calc(15px*var(--tune-size,1))/1 var(--ft)}
.cd-svc-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px;margin-top:calc(64px*var(--tune-space,1))}
.cd-svc-r.cd-n2,.cd-svc-r.cd-n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.cd-svc-r img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:calc(3px*var(--tune-radius,1));margin-bottom:20px}
.cd-svc-r h3{font:400 calc(clamp(32px,2.6vw,40px)*var(--tune-size,1))/1 var(--fd);letter-spacing:var(--tr);text-transform:uppercase;margin-bottom:8px}
.cd-svc-r p{color:var(--mute)}
.cd-svc-r .cd-svc-m{margin-top:14px}
.cd-svc-l{margin-top:calc(48px*var(--tune-space,1));border-top:1px solid var(--line)}
.cd-svc-l li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.cd-svc-l h3{font:400 calc(clamp(32px,2.8vw,42px)*var(--tune-size,1))/1 var(--fd);letter-spacing:var(--tr);text-transform:uppercase}
.cd-svc-l p{color:var(--mute);margin-top:4px}
.cd-more{margin-top:36px}
.cd-more a{font:500 calc(17px*var(--tune-size,1))/1 var(--ft);color:var(--acc);text-underline-offset:.35em}
@media (max-width:899px){
  .cd-head{grid-template-columns:1fr}
  .cd-svc-lead{grid-template-columns:1fr;align-items:start}
  .cd-svc-lt{padding:0 24px 28px}
  .cd-svc-r,.cd-svc-r.cd-n2,.cd-svc-r.cd-n4{grid-template-columns:1fr;gap:40px;margin-top:calc(48px*var(--tune-space,1))}
}

/* ---------- the full-bleed band ---------- */
.cd-band{position:relative;margin:0;color:#fff;isolation:isolate}
.cd-band-p img{width:100%;height:clamp(360px,72vh,760px);object-fit:cover}
.cd-band figcaption{text-wrap:balance}
.cd-band .cd-shade{background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--scrim) 84%,transparent) 100%);z-index:0}
.cd-band figcaption{position:absolute;left:0;right:0;bottom:clamp(28px,5vw,64px);z-index:1;font-size:calc(clamp(46px,7.4vw,120px)*var(--tune-size,1))}

/* ---------- green bean to cup: one time ruler ---------- */
.cd-steps{padding-block:var(--gap)}
.cd-steps h2{margin-bottom:calc(clamp(36px,4vw,56px)*var(--tune-space,1));max-width:12em}
.cd-ruler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
.cd-ruler.cd-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cd-ruler img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:calc(3px*var(--tune-radius,1));margin-bottom:24px}
.cd-mark{font:400 calc(clamp(36px,3.2vw,48px)*var(--tune-size,1))/1 var(--fd);letter-spacing:var(--tr);text-transform:uppercase;color:var(--acc);padding-top:16px;border-top:2px solid var(--ink);margin-bottom:12px}
.cd-ruler h3{margin-bottom:8px}
.cd-ruler p:last-child{color:var(--mute);font-size:calc(16px*var(--tune-size,1))}
@media (max-width:899px){.cd-ruler,.cd-ruler.cd-n3{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px}}
@media (max-width:519px){.cd-ruler,.cd-ruler.cd-n3{grid-template-columns:1fr}.cd-ruler img{aspect-ratio:3/2}}

.cd-gal{padding-bottom:var(--gap)}

/* ---------- reviews: score | quote ---------- */
.cd-rv{padding-block:var(--gap);background:linear-gradient(var(--line),var(--line)) 50% 0/calc(100% - 2*var(--pad)) 1px no-repeat}
.cd-rv-score{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(40px,6vw,96px);align-items:start}
.cd-score-n{font:400 calc(clamp(150px,17vw,260px)*var(--tune-size,1))/.8 var(--fd);color:var(--acc);margin-top:28px}
.cd-score-l{margin-top:18px;color:var(--mute);font-size:calc(16px*var(--tune-size,1))}
.cd-q blockquote{margin:0}
.cd-q p{font:400 calc(19px*var(--tune-size,1))/1.5 var(--ft)}
.cd-q figcaption{margin-top:10px;color:var(--mute);font:500 calc(15px*var(--tune-size,1))/1.4 var(--ft)}
.cd-q-lead p{font:400 calc(clamp(24px,2.2vw,32px)*var(--tune-size,1))/1.35 var(--ft);letter-spacing:-.01em}
.cd-qr{margin-top:calc(40px*var(--tune-space,1));border-top:1px solid var(--line)}
.cd-qr li{padding:22px 0;border-bottom:1px solid var(--line)}
.cd-rv-s{color:var(--mute);font-size:calc(17px*var(--tune-size,1))}
.cd-q-big p{font:400 calc(clamp(28px,3vw,44px)*var(--tune-size,1))/1.25 var(--ft);letter-spacing:-.015em;max-width:30em}
.cd-qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:32px;margin-top:calc(56px*var(--tune-space,1))}
.cd-qs li{border-top:2px solid var(--ink);padding-top:20px}
@media (max-width:899px){.cd-rv-score{grid-template-columns:1fr;gap:28px}.cd-score-n{margin-top:14px}}

/* ---------- visit ---------- */
.cd-visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;padding-block:var(--gap);background:linear-gradient(var(--line),var(--line)) 50% 0/calc(100% - 2*var(--pad)) 1px no-repeat}
.cd-visit-p img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:calc(3px*var(--tune-radius,1))}
.cd-addr{font:400 calc(clamp(48px,5.4vw,84px)*var(--tune-size,1))/.95 var(--fd);letter-spacing:var(--tr);text-transform:uppercase;margin-bottom:28px}
.cd-route{margin-bottom:32px;border-top:1px solid var(--line)}
.cd-route li{padding:12px 0;border-bottom:1px solid var(--line);font-size:calc(16px*var(--tune-size,1));color:var(--mute)}
.cd-hrs div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line)}
.cd-hrs dd{font-variant-numeric:tabular-nums;white-space:nowrap}
.cd-shut{color:var(--mute)}
.cd-visit-tel{margin-top:28px}
.cd-visit-tel a{font:400 calc(clamp(34px,3vw,44px)*var(--tune-size,1))/1 var(--fd);letter-spacing:var(--tr);text-decoration:none;color:var(--acc)}
.wk{font:500 calc(15px*var(--tune-size,1))/1.2 var(--ft);margin-top:4px}
.wk ol{display:grid;gap:10px}
.wk li{display:grid;grid-template-columns:2.8em 1fr 7.4em;align-items:center;gap:12px}
.wk-bar{position:relative;height:8px;background:var(--line)}
.wk-bar i{position:absolute;top:0;bottom:0;background:var(--acc)}
.wk-t{text-align:right;font-variant-numeric:tabular-nums}
.wk .off{color:var(--mute)}
.wk-scale{display:flex;justify-content:space-between;margin:8px 7.4em 0 2.8em;padding-inline:12px;color:var(--mute);font-size:calc(15px*var(--tune-size,1))}
@media (max-width:899px){.cd-visit{grid-template-columns:1fr}.cd-visit-p img{aspect-ratio:3/2}}

/* ---------- closing: cup | plain ---------- */
.cd-end-cup{position:relative;color:#fff;isolation:isolate;min-height:clamp(480px,80vh,760px);display:flex;align-items:flex-end}
.cd-end-p{position:absolute;inset:0;z-index:-2}
.cd-end-p img{width:100%;height:100%;object-fit:cover}
.cd-end-cup .cd-shade{background:linear-gradient(180deg,transparent 25%,color-mix(in srgb,var(--scrim) 86%,transparent) 100%)}
.cd-end-in{width:100%;padding-block:calc(clamp(48px,7vw,96px)*var(--tune-space,1))}
.cd-end h2{font-size:calc(clamp(60px,10vw,160px)*var(--tune-size,1));max-width:9em}
.cd-end-x{font-size:calc(clamp(17px,1.4vw,20px)*var(--tune-size,1));max-width:32em;margin-top:18px}
.cd-end-a{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:32px}
.cd-end-tel{font:500 calc(19px*var(--tune-size,1))/1 var(--ft);text-decoration:none}
.cd-end-plain{padding-block:var(--gap);background:linear-gradient(var(--line),var(--line)) 50% 0/calc(100% - 2*var(--pad)) 1px no-repeat}
.cd-end-plain .cd-end-x{color:var(--mute)}
.cd-end-addr{font:400 calc(clamp(28px,3vw,44px)*var(--tune-size,1))/1 var(--fd);letter-spacing:var(--tr);text-transform:uppercase;color:var(--acc);margin-top:28px}

/* ---------- services page ---------- */
.cd-offers{padding-block:var(--gap);display:grid;gap:clamp(64px,8vw,120px)}
.cd-offer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.cd-offer.cd-flip figure{order:2}
.cd-offer img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(3px*var(--tune-radius,1))}
.cd-offer h2{font-size:calc(clamp(44px,4.6vw,72px)*var(--tune-size,1));margin-bottom:16px}
.cd-offer-s{font-size:calc(20px*var(--tune-size,1));font-weight:500;margin-bottom:12px}
.cd-offer-t>p{max-width:32em}
.cd-offer-t>p:not(.cd-offer-s):not(.cd-svc-m){color:var(--mute)}
.cd-offer-f{margin-top:16px}
.cd-offer-f .cd-k{margin:0}
.cd-rates,.cd-faq{padding-bottom:var(--gap)}
.cd-rates h2,.cd-faq h2{margin-bottom:32px}
.cd-plist{border-top:1px solid var(--line);max-width:860px}
.cd-plist div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.cd-plist dd{font:400 30px/1 var(--fd);letter-spacing:var(--tr);white-space:nowrap}
.cd-faq details{border-bottom:1px solid var(--line)}
.cd-faq>div{border-top:1px solid var(--line);max-width:920px}
.cd-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;padding:20px 0;font:600 calc(19px*var(--tune-size,1))/1.35 var(--ft)}
.cd-faq summary::-webkit-details-marker{display:none}
.cd-faq summary::after{content:"+";font:400 calc(30px*var(--tune-size,1))/.8 var(--fd);color:var(--acc)}
.cd-faq details[open] summary::after{content:"–"}
.cd-faq details p{padding:0 0 22px;color:var(--mute);max-width:44em}
.cd-faq-open dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px}
.cd-faq-open dl div{border-top:2px solid var(--ink);padding-top:16px}
.cd-faq-open dt{font:600 calc(19px*var(--tune-size,1))/1.35 var(--ft);margin-bottom:8px}
.cd-faq-open dd{color:var(--mute)}
.cd-next{padding-bottom:var(--gap)}
@media (max-width:899px){.cd-offer{grid-template-columns:1fr}.cd-offer.cd-flip figure{order:0}.cd-faq-open dl{grid-template-columns:1fr}}

/* ---------- people page ---------- */
.cd-crew{padding-block:var(--gap)}
.cd-crew h2{margin-bottom:calc(clamp(36px,4vw,56px)*var(--tune-space,1))}
.cd-crew-portraits .cd-people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.cd-crew-portraits .cd-people.cd-n2,.cd-crew-portraits .cd-people.cd-n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.cd-face{margin:0 0 20px}
.cd-face img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:calc(3px*var(--tune-radius,1))}
.cd-face span{display:grid;place-items:center;aspect-ratio:4/5;background:var(--deep);color:var(--ondeep);font:400 calc(96px*var(--tune-size,1))/1 var(--fd);letter-spacing:var(--tr);border-radius:calc(3px*var(--tune-radius,1))}
.cd-people h3{font:400 calc(clamp(34px,2.8vw,42px)*var(--tune-size,1))/1 var(--fd);letter-spacing:var(--tr);text-transform:uppercase}
.cd-p-r{color:var(--acc);font-weight:500;margin-top:6px}
.cd-p-b{color:var(--mute);margin-top:8px}
.cd-crew-list .cd-people{border-top:1px solid var(--line)}
.cd-crew-list .cd-people li{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.cd-crew-list .cd-face{order:2;margin:0}
.cd-crew-list .cd-face img,.cd-crew-list .cd-face span{aspect-ratio:1;font-size:calc(48px*var(--tune-size,1))}
@media (max-width:899px){.cd-crew-portraits .cd-people,.cd-crew-portraits .cd-people.cd-n2,.cd-crew-portraits .cd-people.cd-n4{grid-template-columns:1fr}.cd-crew-list .cd-people li{grid-template-columns:minmax(0,1fr) 88px}}

.cd-ct{padding-bottom:var(--gap)}
.cd-ct-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.cd-ct-nf{grid-template-columns:minmax(0,1fr)}
.cd-ct-d{margin-bottom:28px}
.cd-ct-d div{padding:12px 0;border-bottom:1px solid var(--line)}
.cd-ct-d dt{color:var(--mute);font-size:calc(15px*var(--tune-size,1))}
.cd-ct-d dd{font-size:calc(18px*var(--tune-size,1))}
.cd-form{display:grid;gap:18px;background:var(--paper);padding:clamp(24px,3vw,40px);border-radius:calc(3px*var(--tune-radius,1));box-shadow:0 1px 2px var(--tone-sh,rgb(40 28 20 / .08)),0 18px 40px -24px var(--tone-sh,rgb(40 28 20 / .22))}
.cd-form label{display:grid;gap:6px;font:500 calc(15px*var(--tune-size,1))/1.3 var(--ft)}
.cd-form input,.cd-form textarea{font:400 calc(17px*var(--tune-size,1))/1.4 var(--ft);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:calc(3px*var(--tune-radius,1));padding:12px 14px}
.cd-form button{justify-self:start;cursor:pointer}
.cd-form-n{color:var(--mute);font-size:calc(15px*var(--tune-size,1))}
.cd-ct-m{display:grid;gap:0;border-top:1px solid var(--line)}
.cd-ct-m li{padding:24px 0;border-bottom:1px solid var(--line)}
.cd-ct-m .cd-k{margin-bottom:6px}
.cd-ct-v{font:400 calc(clamp(34px,4vw,60px)*var(--tune-size,1))/1.05 var(--fd);letter-spacing:var(--tr);text-decoration:none;display:block}
.cd-ct-e{text-transform:none}
.cd-reg{color:var(--mute);font-size:calc(15px*var(--tune-size,1));padding-bottom:calc(48px*var(--tune-space,1))}
@media (max-width:899px){.cd-ct-g{grid-template-columns:1fr}}

.cd-legal{padding-block:calc(72px*var(--tune-space,1)) var(--gap);max-width:780px}
.cd-legal h1{font:400 calc(clamp(52px,7vw,96px)*var(--tune-size,1))/.95 var(--fd);letter-spacing:var(--tr);text-transform:uppercase;margin-bottom:24px}
.cd-legal p a{font-size:.84em}
.cd-legal h2{font-size:calc(clamp(30px,3vw,40px)*var(--tune-size,1));margin:calc(40px*var(--tune-space,1)) 0 12px}

/* ---------- footer: the espresso band ---------- */
.cd-foot{background:var(--deep);color:var(--ondeep);padding:calc(clamp(56px,7vw,96px)*var(--tune-space,1)) 0 calc(48px*var(--tune-space,1))}
.cd-foot-n{font:400 calc(clamp(64px,11vw,176px)*var(--tune-size,1))/.85 var(--fd);letter-spacing:var(--tr);text-transform:uppercase;margin-bottom:calc(clamp(36px,4vw,56px)*var(--tune-space,1))}
.cd-foot-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px;border-top:1px solid var(--dline);padding-top:32px;font-size:calc(16px*var(--tune-size,1))}
.cd-foot-g p{margin-bottom:6px}
.cd-foot a{text-decoration:none}
.cd-foot a:hover{text-decoration:underline}
.cd-foot .cd-k{color:var(--dmute)}
.cd-foot .cd-hrs div{border-color:var(--dline);padding:7px 0}
.cd-foot .cd-shut{color:var(--dmute)}
.cd-foot-l ul{display:grid;gap:8px}
.cd-foot .langs{display:flex;gap:14px;margin:16px 0}
.cd-foot .langs a[aria-current]{text-decoration:underline}
.cd-foot-f{color:var(--dmute);font-size:calc(15px*var(--tune-size,1))}
@media (max-width:899px){.cd-foot-g{grid-template-columns:1fr}}

/* ---------- serious tone: nothing loud to calm, the shadows stay soft ---------- */
[data-tone=playful] .cd-pill{background:var(--acc);border-color:var(--acc);color:var(--onacc)}

/* ---------- motion (Advanced, scroll): the roast curve is uncovered left to right as its row comes in (a cover in the
   board's colour scales away to the right: transform only) ---------- */
@media (prefers-reduced-motion:no-preference){
  .m-js .cd-board.m-stagger .cd-curve{position:relative}
  .m-js .cd-board.m-stagger .cd-curve::after{content:"";position:absolute;inset:-6px -6px 24px 0;background:var(--deep);transform-origin:100% 50%;pointer-events:none}
  .m-js .cd-board.m-stagger>li.m-in .cd-curve::after,.m-js .cd-board.m-stagger.m-in>li .cd-curve::after{animation:cd-wipe 1.6s cubic-bezier(.4,.1,.2,1) .2s forwards}
}
@keyframes cd-wipe{to{transform:scaleX(0)}}

/* ---------- Advanced hero moment ----------
   "The drum turns": the photo of the drum turns a few degrees back to rest (it starts turned and a little closer), the
   two lines of capitals rise out of their own lines, then the facts line, the lede and the pill follow. Transform and
   opacity only, ending exactly at the still page; the photo layer that follows the pointer (data-depth) is animated on
   its img, so the pointer's translate never fights the entrance. */
@media (prefers-reduced-motion:no-preference){
  .m-js .cd-hero .cd-hero-ph img{animation:cd-turn 1.8s cubic-bezier(.2,.7,.15,1) backwards}
  .m-js .cd-hero .cd-l>span{animation:cd-rise 1s cubic-bezier(.2,.8,.2,1) .35s backwards}
  .m-js .cd-hero .cd-l+.cd-l>span{animation-delay:.48s}
  .m-js .cd-hero .cd-kicker{animation:cd-fade .7s ease-out .2s backwards}
  .m-js .cd-hero .cd-lede{animation:cd-up .8s cubic-bezier(.2,.8,.2,1) .75s backwards}
  .m-js .cd-hero .cd-hero-a{animation:cd-up .8s cubic-bezier(.2,.8,.2,1) .9s backwards}
}
@keyframes cd-turn{from{transform:rotate(-4deg) scale(1.16)}}
@keyframes cd-rise{from{transform:translateY(105%)}}
@keyframes cd-fade{from{opacity:0}}
@keyframes cd-up{from{opacity:0;transform:translateY(18px)}}

/* long shop names on small screens (html.name-long / name-xl from engine/shared/site.ts; qa tests "Loodgietersbedrijf Jansen") */
@media(max-width:600px){html.name-long .cd-name{font-size:calc(19px*var(--tune-size,1));letter-spacing:.05em;line-height:1.05}}

/* sales step 4 (photo-slice): on phones the first photo keeps more of the picture; the main button and the phone bar stay on the first screen */
@media (max-width:760px){.cd-hero{min-height:max(540px,70svh)}}

/* shared bands: headings in the look's capitals like every other heading; the menu band reads at the page's size
   (its own sizes suit a mixed-case face, and Pathway is narrow) */
@media (min-width:900px){
  .bd-rname{font-size:calc(clamp(18px,1.5vw,21px)*var(--tune-size,1))}
  .bd-rp b{font-size:calc(clamp(26px,2.2vw,32px)*var(--tune-size,1));line-height:1}
  .bd-rsub{font-size:calc(clamp(15.5px,1.2vw,17px)*var(--tune-size,1))}
  .bd-gname{font-size:calc(14px*var(--tune-size,1))}
}
/* phones: the hero lines break at their natural width (balance left "GEZET" alone). A closed day's note takes the
   bar's place so "Branddag, gesloten" stays on one line */
@media (max-width:519px){
  .cd-hero .cd-l>span{text-wrap:wrap}
}
.wk .off .wk-bar{display:none}
.wk .off .wk-t{grid-column:2/4;text-align:left;white-space:nowrap}
/* phones: a band's own 64px padding plus the visit section's 88px made 152px of air; one section gap is enough */
@media (max-width:899px){
  .bd+.cd-visit{padding-top:24px;background:none}
  .cd-visit:has(+.bd){padding-bottom:24px}
}
/* review rows without stars or source (example quotes) have no first cell: the quote takes the wide column */
@media (min-width:900px){.bd-rrow:not(:has(.bd-rvtop)){grid-template-columns:minmax(0,9.2fr) minmax(0,2.6fr)}}