/* Hueck-van Riel. Their house style: the amber hvr mark, the grey name in a condensed sans,
   the dark slate bar of their own site, white pages, plain words with "u". */
@font-face{font-family:Fira;src:url(fonts/text-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Fira;src:url(fonts/text-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Fira;src:url(fonts/text-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Fira;src:url(fonts/text-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Word;src:url(fonts/word-500.woff2) format('woff2');font-weight:500;font-display:block}
@font-face{font-family:FiraC;src:url(fonts/cond-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:FiraC;src:url(fonts/cond-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --amber:#EAA300; --slate:#2C353D; --slate-2:#232A30; --ink:#2C353D; --text:#2C353D; --muted:#5B646B;
  --line:#DDE0E2; --soft:#F4F4F2; --steel:#C9CED2; --link:#7D6524;
  --f:Fira,"Helvetica Neue",Helvetica,Arial,sans-serif; --fc:FiraC,Fira,"Helvetica Neue",Arial,sans-serif;
  --wrap:1240px; --pad:clamp(1.25rem,4vw,3rem); --sec:clamp(3.5rem,8vw,6.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* One type scale: 14 meta, 17 body and controls, 20 lead and h3, 24 small headings, 24-32 card titles, 34-50 h2, 42-74 h1 */
  --fs-s:.875rem; --fs-b:1.0625rem; --fs-m:1.25rem; --fs-l:1.5rem; --fs-xl:clamp(1.5rem,1.2rem + 1vw,2rem);
  --fs-h2:clamp(2.1rem,1.5rem + 2vw,3.1rem); --fs-h1:clamp(2.6rem,1.4rem + 3.9vw,4.6rem);
  --on-dark:#D5DADE; --on-dark-2:#D5DADE;
}
/* Page changes fade instead of cutting; the top bar and header stay put. */
@view-transition{navigation:auto}
/* The old page fades out, then the new one fades in: two pages never show through each other. */
::view-transition-old(root){animation:vt-out .2s var(--ease) both}
::view-transition-new(root){animation:vt-in .3s var(--ease) .2s both}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0}}
.util{view-transition-name:util}.head{view-transition-name:head}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6.5rem}
/* Smooth only after a link is followed (it then has focus), not for every script that scrolls the page. */
@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{margin:0;background:#fff;color:var(--text);font:400 var(--fs-b)/1.6 var(--f);font-variant-numeric:lining-nums;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
p,li,dd,dt,td,th{overflow-wrap:break-word}
p{margin:0 0 1rem;text-wrap:pretty}
p a{padding-block:.25rem}
h1,h2,h3{color:var(--ink);text-wrap:balance;margin:0;overflow-wrap:break-word}
/* Links in text: a slate line at rest (amber on white is too faint to read as a line), amber and thicker on hover. */
a{color:var(--ink);text-decoration-color:var(--slate);text-decoration-thickness:2px;text-underline-offset:.2em}
a:hover{color:var(--ink);text-decoration-color:var(--amber);text-decoration-thickness:3px}
::selection{background:var(--amber);color:var(--slate)}
:focus-visible{outline:3px solid var(--slate);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.util :focus-visible,.foot :focus-visible{outline-color:var(--amber)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:0;right:0;top:-4rem;z-index:50;border-radius:3px;display:flex;align-items:center;min-height:2.5rem;padding:0 max(var(--pad),calc((100% - var(--wrap))/2));background:var(--amber);color:var(--slate);font-weight:600}
.skip:focus{top:0;color:var(--slate);outline-offset:-4px;outline-color:var(--slate)}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.nw{white-space:nowrap}
@media (max-width:360px){.nw{white-space:normal}}
.num{font-variant-numeric:tabular-nums}

/* Buttons and links: one language. Amber fills, slate on hover; the line under a link turns amber. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem min(1.25rem,6vw);max-width:100%;overflow-wrap:anywhere;text-align:center;border:2px solid var(--amber);border-radius:3px;background:var(--amber);color:var(--slate);font:600 var(--fs-b)/1.2 var(--f);text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .1s var(--ease)}
.btn:hover{background:#CC8E00;border-color:#CC8E00;color:#1A1F24;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.btn.ghost{background:transparent;border-color:var(--slate);color:var(--slate)}
.btn.ghost:hover{background:var(--slate);color:#fff}
.dark .btn.ghost{border-color:#fff;color:#fff}
.dark .btn.ghost:hover{background:#fff;color:var(--slate)}
.more,.to{display:inline-flex;align-items:center;max-width:100%;overflow-wrap:anywhere;gap:.5rem;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--amber);padding-block:.25rem;transition:gap .2s var(--ease),border-color .2s var(--ease)}
.more::after,.to::after{content:'';width:.5rem;height:.5rem;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg);margin-right:.25rem}
.more:hover,.to:hover{gap:.75rem;border-color:var(--slate);color:var(--ink)}
.dark .more{color:#fff}.dark .more:hover{border-color:#fff;color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
/* On a phone the buttons stack at full width: whether two fit side by side must not depend on which font has loaded yet. */
@media (max-width:30em){.actions{display:grid}.actions .btn{justify-content:center}}

/* Closed until further notice (owner, 2026-11-12): a line above the top bar on every page, and in place of the
   opening hours. Slate on their amber, as on the counter door: 5.8:1. */
.closed{background:var(--amber);color:var(--slate);view-transition-name:closed}
.closed p{margin:0;padding-block:.625rem;font:600 var(--fs-b)/1.35 var(--f)}
.shut{max-width:26rem;margin:1.5rem 0 0;padding-left:1rem;border-left:4px solid var(--amber);font-weight:600;color:var(--ink)}

/* Top bar and header */
.util{background:var(--slate);color:var(--on-dark);font-size:var(--fs-s)}
/* The top bar is always one line. As it gets narrower (or the text larger) it lets go of the tagline, then the
   e-mail, then the phone number (the header keeps its call button); NL/EN always stays.
   Widths are in em of the bar's own text, so they hold at any text size. */
.util{overflow-x:clip}
.util .wrap{display:flex;align-items:center;gap:1.5rem;min-height:2.5rem;container:util/inline-size}
.util p{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.util ul{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0 0 0 auto;padding:0;white-space:nowrap}
@container util (max-width:61.5em){.util p{display:none}.util ul{flex:1}.util .lang{margin-left:auto}}
@container util (max-width:41.5em){.util ul{gap:1rem}}
/* On a phone the top bar keeps only NL/EN: the header and the hero already carry the phone number. */
@container util (max-width:51.5em){.util .u-mail,.util .u-tel{display:none}}
.util a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;padding-block:.25rem;border-bottom:2px solid transparent}
/* Room for the focus ring beside the text; the item gives the room back, so nothing moves. */
.util .u-tel,.util .u-mail{margin-inline:-.375rem}.util .u-tel a,.util .u-mail a{padding-inline:.375rem}
.util a:focus-visible{outline-offset:0}
.util a:hover{border-bottom-color:var(--amber);color:#fff}
.util svg{width:1.125rem;height:1.125rem;fill:none;stroke:var(--amber);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.util .lang{gap:0}
.util .lang a{padding:.25rem .5rem;font-weight:600;letter-spacing:.04em}
.util .lang a[aria-current]{color:#fff;text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:.35em}
.util .lang a+a{border-left:1px solid #56606A}
.util .lang a:last-child{padding-right:0}

.head{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20}
.head .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;min-height:5.5rem}
.logo{display:block;flex:none;border-radius:3px}
.logo-svg path{transition:fill .2s var(--ease)}
.logo:hover .logo-svg path:first-child{fill:#CC8E00}
.logo-svg{height:48px;width:auto}
.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25rem;margin-left:auto}
.nav a{position:relative;padding:.75rem .75rem;color:var(--ink);font:500 var(--fs-b) var(--f);text-decoration:none;white-space:nowrap}
.nav a::after{content:'';position:absolute;left:.7rem;right:.7rem;bottom:.35rem;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.head .call{flex:none}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;padding:.5rem 1rem;border:2px solid var(--slate);border-radius:3px;font:600 var(--fs-b) var(--f);color:var(--slate);transition:background-color .2s var(--ease),color .2s var(--ease)}
.menu summary::-webkit-details-marker{display:none}
.menu:not([open]) nav{display:none}
.menu summary::before{content:'';width:1.1rem;height:.75rem;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
.menu summary:hover{background:var(--slate);color:#fff}
.menu[open] summary{background:var(--slate);color:#fff}
.menu nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:4px solid var(--amber);box-shadow:0 18px 30px -18px rgba(0,0,0,.25);padding:.5rem var(--pad) 1rem;display:grid}
.menu nav a{padding:.75rem 0;border-bottom:1px solid var(--line);color:var(--ink);font:500 var(--fs-m) var(--f);text-decoration:none}
.menu nav a:hover{color:var(--ink);background:linear-gradient(var(--amber),var(--amber)) left bottom/2.5rem 3px no-repeat}
@media (min-width:1181px) and (min-height:560px){.head{position:sticky;top:0}.js .head.scrolled{box-shadow:0 10px 24px -18px rgba(0,0,0,.35)}}
@media (max-width:1180px){.nav{display:none}.menu{display:block;margin-left:0}.head .call{margin-left:auto}}
.js .head.compact{position:relative}
.js .head.compact .nav{display:none}
.js .head.compact .menu{display:block;margin-left:0}
.js .head.compact .call{margin-left:auto}
.js .head.tight .wrap{column-gap:.75rem}.js .head.tight .call span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.js .head.tight .call{min-width:3rem;padding:.75rem}
.js .head.stacked .menu{order:3;flex:1 0 100%}.js .head.stacked .menu summary{width:100%;justify-content:center}
.js .head.tiny .wrap{column-gap:.5rem}.js .head.tiny .menu summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.js .head.tiny .menu summary{gap:0;min-width:3rem;justify-content:center;padding:.5rem .75rem}
@media (max-width:560px){.head .wrap{gap:.5rem;min-height:4.5rem;flex-wrap:wrap;padding-block:.5rem}.logo{margin-right:auto}.logo-svg{height:min(38px,8.4vw)}.head .call span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.head .call{min-width:3rem;padding:.75rem}.menu{margin-left:0}.menu summary{padding:.5rem .75rem;gap:.5rem}}
@media (max-width:340px){.menu summary{font-size:0;gap:0;min-width:3rem;justify-content:center}.menu summary::before{width:1.25rem}}

/* Hero */
.hero{padding-top:clamp(2.5rem,6vw,4.75rem)}
.hero>.wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,6.2vw,5.5rem);align-items:stretch;padding-bottom:clamp(2.5rem,5vw,4.5rem)}
/* The counter card starts on the eyebrow line and is as tall as its content. */
.hero .card{align-self:start}
.eyebrow{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;font:600 var(--fs-s) var(--fc);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:'';width:.75rem;height:.75rem;background:var(--slate);border-radius:0}
h1{font:600 var(--fs-h1)/1.02 var(--fc);letter-spacing:-.005em;max-width:12em}
.lead{margin-top:1.25rem;font-size:var(--fs-m);line-height:1.55;max-width:36em;color:var(--text)}
@media (max-width:640px){.lead,.sea-head p{font-size:var(--fs-b)}}
/* Amber means 'act here' (buttons, link lines) and the logo; cards and columns are ruled in slate. */
.card{background:var(--soft);border-top:4px solid var(--slate);border-radius:0 0 3px 3px;padding:clamp(1.25rem,2.5vw,1.75rem)}
.hours h2{font:600 var(--fs-xl)/1.15 var(--fc);margin-bottom:.5rem}
.hours p{color:var(--text)}
dl{margin:0}
dl div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1rem;padding:.5rem 0;border-top:1px solid var(--line)}
dt{color:var(--text)}
dd{margin:0;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.hours .shut{margin:1rem 0 1.25rem}
.panorama{margin:0 auto;max-width:calc(var(--wrap) + 2*var(--pad));padding-inline:var(--pad)}
.panorama img{border-radius:3px}
.panorama img{width:100%;aspect-ratio:1500/430;object-fit:cover;object-position:30% 50%}
@media (max-width:900px){.hero>.wrap{grid-template-columns:minmax(0,1fr);align-items:start}}
@media (max-width:640px){.panorama img{aspect-ratio:3/2;object-position:28% 60%}}

/* Promises */
.usps{background:var(--soft);border-bottom:1px solid var(--line)}
.usps ul{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 2.5rem;padding-block:1.5rem}
.usps li{display:flex;align-items:center;gap:.75rem;font-weight:500;color:var(--ink);line-height:1.35}
.check{width:1.125rem;height:1.125rem;flex:none}
.check rect{fill:var(--amber)}.check path{fill:none;stroke:var(--slate);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.usps{container:usps/inline-size}
@container usps (max-width:62em){.usps ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container usps (max-width:30em){.usps ul{grid-template-columns:minmax(0,1fr)}}

/* Sections */
.sec{padding-block:var(--sec)}
/* Two white sections in a row share one gap, not two. */
.sec:not(.soft,.dark)+.sec:not(.soft,.dark){padding-top:0}
.soft{background:var(--soft)}
.sec h2{font:600 var(--fs-h2)/1.06 var(--fc);letter-spacing:-.003em;margin-bottom:1rem}
.sec h3{font:600 var(--fs-m)/1.3 var(--f)}
.grid-2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6.2vw,5.5rem);align-items:start}
.grid-2.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.intro>p{max-width:34em}
.photo{margin:0}
.photo img{width:100%;border-radius:3px;background:#E6E8EA}
.dark .photo img{background:#3A444C}
.photo figcaption{margin-top:.75rem;font-size:var(--fs-s);color:var(--muted)}
@media (max-width:900px){.grid-2,.grid-2.rev{grid-template-columns:minmax(0,1fr)}}

/* Products */
.metals{display:flex;flex-wrap:wrap;align-items:center;row-gap:.25rem;margin:1.5rem 0 2rem -1.875rem;clip-path:inset(-.5rem 0 -.5rem 1.875rem);font:600 var(--fs-m) var(--fc);color:var(--ink)}
.metals span{display:inline-flex;align-items:center;min-width:0}
.metals span::before{content:'';width:.375rem;height:.375rem;margin-inline:.75rem;background:var(--amber)}
.photo.tall img{aspect-ratio:4/5;object-fit:cover}
@media (max-width:900px){.photo.tall img{aspect-ratio:3/2;object-position:50% 40%}}
.plist{list-style:none;margin:0;padding:0;border-top:2px solid var(--slate)}
.plist li{display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(min-content,11rem);gap:.5rem 1.5rem;align-items:start;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.plist svg{width:3.25rem;height:3.25rem}
.plist svg *{fill:none;stroke:var(--slate);stroke-width:2.4;stroke-linejoin:round}
.plist svg .a{fill:var(--amber);stroke:var(--slate)}
.plist svg .h{fill:#fff}
.plist h3{margin-bottom:.25rem}
.plist p{margin:0;color:var(--text)}
.plist .to{align-self:start;justify-self:start;font-size:var(--fs-b)}
@media (max-width:640px){.plist li{grid-template-columns:44px minmax(0,1fr);column-gap:1rem}.plist svg{width:42px;height:42px}.plist .to{grid-column:2;justify-self:start;white-space:normal;flex-wrap:wrap;max-width:100%}}

/* Cut to length */
.tool{background:#fff;border:1px solid var(--line);border-top:4px solid var(--slate);display:none}
.js .tool{display:block}
.js .nojs{display:none}
.fields{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:1rem}
label{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;min-width:0;font:600 var(--fs-s) var(--f);color:var(--ink)}
select,input[type=number],input[type=search],input[type=text]{width:100%;min-width:0;min-height:3rem;padding:.5rem .75rem;border:1px solid #9AA2A9;border-radius:3px;background:#fff;color:var(--ink);font:400 var(--fs-b) var(--f);font-variant-numeric:tabular-nums}
select{max-width:100%;text-overflow:ellipsis;overflow:hidden;appearance:none;padding-right:2.5rem;background:#fff}
label:has(>select){position:relative}
label:has(>select)::after{content:'';position:absolute;right:.9rem;bottom:1.5rem;width:.75rem;height:.5rem;margin-bottom:-.25rem;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232C353D' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
select:hover,input[type=number]:hover,input[type=search]:hover,input[type=text]:hover{border-color:var(--slate)}
.rod{position:relative;margin:3.5rem 0 0;cursor:ew-resize}
.stock{position:relative;height:var(--h,1.25rem);background:linear-gradient(#E9EBED,#D5D9DC 55%,#C3C8CC);border-radius:3px;transition:height .2s var(--ease)}
.piece{position:absolute;inset:0 auto 0 0;width:var(--cut,40%);background:linear-gradient(#8E979E,#5F6870 55%,#4A535A);border-radius:3px 0 0 3px}
.cut{position:absolute;top:-1.9rem;bottom:-.4rem;left:var(--cut,40%);width:2px;margin-left:-1px;background:var(--amber)}
.cut span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--amber);color:var(--slate);font:600 var(--fs-s)/1 var(--f);padding:.25rem .5rem;border-radius:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ticks{display:flex;justify-content:space-between;margin-top:.75rem;font-size:var(--fs-s);color:var(--muted);font-variant-numeric:tabular-nums}
.rod input{position:absolute;left:0;right:0;top:-1rem;width:100%;height:calc(var(--h,1.25rem) + 2rem);margin:0;opacity:0;cursor:ew-resize}
.rod:has(input:focus-visible) .stock{outline:3px solid var(--slate);outline-offset:5px}
.rod:hover .cut{width:4px;margin-left:-2px}
.help{margin:.75rem 0 0;font-size:var(--fs-b)}
.result{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1rem 0 0;padding-top:1rem;border-top:1px solid var(--line)}
.result div{display:block;border:0;padding:0}
.result dt{font-size:var(--fs-s);color:var(--muted)}
.result dd{text-align:left;font:600 var(--fs-l)/1.2 var(--fc)}
.tool .actions{margin-top:1.5rem}
.fine{font-size:var(--fs-s);color:var(--muted);margin:1.25rem 0 0}
@media (max-width:640px){.fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}.fields label:first-child{grid-column:1/-1}.result{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Catalogue */
.cat-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem clamp(2.5rem,6.2vw,5.5rem);align-items:end;margin-bottom:2rem}
.cat-head p{margin:0;max-width:34em}
.filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr);gap:1rem;padding:1.25rem;background:var(--soft);border-radius:3px}
.count{margin:1.25rem 0 .5rem;font-weight:500;color:var(--muted)}
.tablewrap{border-top:2px solid var(--slate);container:list/inline-size}
table{width:100%;border-collapse:collapse;font-size:var(--fs-b)}
thead th{background:#fff;text-align:left;font:600 var(--fs-s) var(--f);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:.75rem;border-bottom:1px solid var(--line);box-shadow:inset 0 -1px 0 var(--line)}
tbody th,tbody td{padding:.75rem .75rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
tbody th{font-weight:500;color:var(--ink)}
thead th:nth-child(2),thead th:nth-child(3),tbody td.r{text-align:right}
tbody tr:hover{background:#FAF8F2}
tbody tr[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.js #list.ready tbody tr{animation:rowin .2s var(--ease) both}}
@keyframes rowin{from{opacity:0}}
.js #list:not(.ready) tbody tr:nth-child(n+13){display:none}
@media (max-width:640px){.js #list:not(.ready) tbody tr:nth-child(n+7){display:none}}
.act{text-align:right;white-space:nowrap}
.act .more{margin-inline:.5rem}
.act .link{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .5rem;font:500 var(--fs-b) var(--f);color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:.3em;transition:text-decoration-color .2s var(--ease)}
.act .link:hover{color:var(--ink);text-decoration-color:var(--slate)}
.link{background:none;border:0;cursor:pointer;margin-left:.5rem}
#more{margin-top:1.5rem}
/* Nothing found: say so, offer the phone and mail, and a way back to the full list. */
.empty{margin:0 0 1rem;padding:1.5rem;background:var(--soft);border-top:2px solid var(--slate);border-radius:0 0 3px 3px}
.empty p{max-width:34em;margin-bottom:1rem}
.empty[hidden],.tablewrap[hidden]{display:none}
/* Room between the right-aligned weight and the left-aligned grade. */
@container list (min-width:56.01em){thead th:nth-child(4),tbody tr>:nth-child(4){padding-left:3rem}}
@media (max-width:900px){.cat-head{grid-template-columns:minmax(0,1fr)}.filters{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}.filters .q{grid-column:1/-1}}
/* Cards below the width the Dutch table needs at body size (923 px = 54.3 em), with some room. */
@container list (max-width:56em){
  thead{display:none}
  table,tbody,tr,th,td{display:block}
  tbody tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));gap:.25rem 1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
  tbody th{grid-column:1/-1;padding:0;border:0;font-weight:600;font-size:var(--fs-b)}
  tbody td,tbody td.nw{padding:0;border:0;white-space:normal;text-align:left}
  tbody td:first-of-type{grid-column:1/-1}
  tbody td::before{content:attr(data-l);display:block;font-size:var(--fs-s);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .act{grid-column:auto;align-self:end;text-align:left}
  .act .more{margin-inline:0}
}

/* Counter: their orange door, with the mark cut large, slides open over the counter */
.doorway{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:3/2;background:#E6E8EA}
.doorway img{width:100%;height:100%;object-fit:cover}
@media (min-width:901px){.pickup .doorway{aspect-ratio:4/5}.pickup .doorway img{position:absolute;inset:0}}
.door{position:absolute;inset:0;background:var(--amber);transform:translateX(calc(var(--open,1) * (100% + 2rem)));display:grid;place-items:center;align-content:center;gap:1.25rem;box-shadow:-10px 0 24px -12px rgba(0,0,0,.45)}
.door::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(0,0,0,.14) 0 calc(50% + 1px),transparent 0),linear-gradient(rgba(0,0,0,.08),transparent 12%,transparent 88%,rgba(0,0,0,.08))}
.door::after{content:'';position:absolute;left:0;right:0;top:0;height:.6rem;background:var(--slate)}
.door-mark{width:56%;position:relative}
.door{overflow:hidden}
.door span{position:relative;font:600 var(--fs-l) var(--fc);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);background:var(--amber)}
.pickup h3{margin:1.5rem 0 .5rem}

/* Shipping and industry */
.dark{background:var(--slate);color:var(--on-dark)}
.dark h2,.dark h3{color:#fff}
.sea-head{max-width:46rem;margin-bottom:2.5rem}
.sea-head p{font-size:var(--fs-m)}
.three{list-style:none;margin:0 0 3rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem clamp(1.5rem,3vw,3rem)}
.three li{border-top:3px solid #6B7680;padding-top:1.25rem;display:flex;flex-direction:column;align-items:flex-start}
.three h3{margin-bottom:.5rem}
.three p{flex:1}
.photo.wide img{aspect-ratio:1500/430;object-fit:cover}
@media (max-width:900px){.three{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.photo.wide img{aspect-ratio:3/2}}

/* Schools */
.stocklist{background:#fff;border:1px solid var(--line);border-top:4px solid var(--slate)}
.stocklist h3{margin-bottom:1rem;font:600 var(--fs-xl)/1.15 var(--fc)}
.stocklist table{font-size:var(--fs-b)}
.stocklist th,.stocklist td{padding:.75rem 0;border-bottom:1px solid var(--line);text-align:left}
.stocklist thead th{position:static;padding:.5rem 0}
.stocklist td+td,.stocklist th+th{text-align:right;font-variant-numeric:tabular-nums}
.stocklist td{overflow-wrap:anywhere}
@media (max-width:900px){.stocklist thead{display:table-header-group}.stocklist table{display:table}.stocklist tbody{display:table-row-group}.stocklist tr{display:table-row}.stocklist th,.stocklist td{display:table-cell}}

/* Contact */
.contact{padding-bottom:var(--sec)}
.door-photo{margin-top:2rem}
.door-photo img{border-radius:3px;aspect-ratio:3/2;object-fit:cover}
.phone{margin:1.5rem 0 .25rem;font:600 var(--fs-h2)/1.1 var(--fc)}
/* An underline, not a bottom border: a border sits below the room kept for descenders, which digits never use. */
.phone a,.mail a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:.12em}
.phone a:hover,.mail a:hover{color:var(--ink);text-decoration-color:var(--slate);text-decoration-thickness:2px}
.mail{font-size:var(--fs-m);font-weight:500;overflow-wrap:anywhere}
address{font-style:normal;margin-top:1.5rem;line-height:1.7;color:var(--text)}
.about{border-top:2px solid var(--slate);padding-top:1.5rem}
.about h3{margin-bottom:.75rem}

/* Footer, after their own: four columns with ruled headings */
.foot{background:var(--slate);color:var(--on-dark);font-size:var(--fs-b)}
.foot .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem;padding-block:clamp(3rem,6vw,4.5rem)}
.foot h2{font:600 var(--fs-b) var(--fc);letter-spacing:.07em;text-transform:uppercase;color:#fff;padding:.75rem 0;border-block:1px solid #4E5962;margin-bottom:1rem}
.foot a,.foot .to{overflow-wrap:anywhere;color:#fff;text-decoration:none;border-bottom:1px solid var(--amber);font-weight:400;font-size:inherit;padding:.25rem 0;display:inline-block}
.foot .to::after{content:none}
.foot a:hover{border-color:#fff;box-shadow:0 1px 0 #fff;color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.foot dl div{border-color:#4E5962;flex-direction:column;gap:0}
.foot dl div:first-child{border-top:0;padding-top:0}
.foot dt{color:var(--on-dark)}.foot dd{color:#fff;text-align:left}
.foot-mark{width:4.5rem;margin-top:1.5rem}
.base{background:var(--slate-2);font-size:var(--fs-s);color:var(--on-dark-2)}
.base .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;padding-block:1rem}
.base p{margin:0}
@media (max-width:900px){.foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 1.5rem}.foot .cols>:nth-child(-n+2){grid-column:1/-1}}
@media (max-width:359px){.foot .cols{grid-template-columns:minmax(0,1fr)}}

.lost{padding-block:clamp(4rem,12vw,9rem)}.lost .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}.lost-mark{width:100%;max-width:26rem;justify-self:end}.lost .fine{margin-top:2rem}
@media (max-width:760px){.lost .wrap{grid-template-columns:minmax(0,1fr)}.lost-mark{max-width:8rem;justify-self:start}}
@media (max-width:600px){.lost-mark{display:none}}
@media print{.util,.head,.menu,.filters,#more,.act,.door{display:none}}