/* Sub Factory. Brushed steel like the counter in their photos, safety orange from their menu sheet and sign, chalkboard
   green from the menu board. Fraunces at full softness stands in for the Cooper-style letters on their logo. */
:root{
  --orange:#FF6B1A;--orange-2:#D9500A;--ink:#16181A;--ink-2:#25282B;--paper:#FBFAF6;--manila:#EEDFB4;--stamp:#C41E2A;
  --chalk:#2B4E42;--chalk-ink:#EEF1E7;--mustard:#EAC43A;--go:#3BD16F;--muted:#3A3F43;
  --display:"Fraunces","Cooper Black",Georgia,serif;--stencil:"Saira Stencil One",Impact,"Arial Black",sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;--cond:"Barlow Condensed","Arial Narrow",sans-serif;--type:"Courier Prime","Courier New",monospace;
  --wrap:1200px;
  --rv:radial-gradient(circle at 11px 11px,#fff 0 1px,#8a9196 1.6px 3.3px,rgba(0,0,0,.28) 3.7px,transparent 4.3px),
       radial-gradient(circle at calc(100% - 11px) 11px,#fff 0 1px,#8a9196 1.6px 3.3px,rgba(0,0,0,.28) 3.7px,transparent 4.3px),
       radial-gradient(circle at 11px calc(100% - 11px),#fff 0 1px,#8a9196 1.6px 3.3px,rgba(0,0,0,.28) 3.7px,transparent 4.3px),
       radial-gradient(circle at calc(100% - 11px) calc(100% - 11px),#fff 0 1px,#8a9196 1.6px 3.3px,rgba(0,0,0,.28) 3.7px,transparent 4.3px);
  --plate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='4.5'%3E%3Cpath d='M6 14 14 6' stroke='%23000' stroke-opacity='.5'/%3E%3Cpath d='M5 13 13 5' stroke='%23fff' stroke-opacity='.12'/%3E%3Cpath d='M23 23 31 31' stroke='%23000' stroke-opacity='.5'/%3E%3Cpath d='M22 22 30 30' stroke='%23fff' stroke-opacity='.12'/%3E%3C/g%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;color:var(--ink);font:400 1.0625rem/1.6 var(--body);background-color:#e2e5e7;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px,rgba(0,0,0,.025) 3px 4px),linear-gradient(180deg,#eef0f1,#dde1e3 50%,#e6e9eb)}
img{max-width:100%;height:auto}
a{color:inherit}
p,ul,ol,figure,blockquote{margin:0}
h1,h2,.h2{font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;line-height:.98;letter-spacing:-.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.7rem,7vw,5.6rem)}
h2{font-size:clamp(2.05rem,4.6vw,3.3rem)}
h3,.h3{margin:0;font:800 1.3rem/1.15 var(--cond);text-transform:uppercase;letter-spacing:.03em;text-wrap:balance}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;z-index:99;background:var(--orange);color:var(--ink);padding:.6rem 1rem;font-weight:700}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.hero :focus-visible,.page-head :focus-visible,.band :focus-visible{outline-color:var(--ink)}
.demo-bar{background:#0b0c0d;color:#c9ced1;font:500 .86rem/1.4 var(--body);text-align:center;padding:.5rem 16px}
.demo-bar a{color:#fff;font-weight:700}

/* buttons: chunky push buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:.75em 1.25em;border:3px solid var(--ink);border-radius:6px;font:800 1.06rem/1 var(--cond);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .08s ease,box-shadow .08s ease;text-align:center}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn-orange{background:var(--orange);color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}
.btn-paper{background:var(--paper);color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.hazard{height:14px;background:repeating-linear-gradient(-45deg,var(--orange) 0 14px,var(--ink) 14px 28px)}
.more{align-self:flex-start;font:800 1.02rem/1 var(--cond);text-transform:uppercase;letter-spacing:.05em;color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:4px;text-underline-offset:5px;padding-block:.45rem}
.fine{font-size:.95rem;color:var(--muted);margin-top:.9rem}

/* header: their orange storefront sign, a hazard stripe under it */
.top{position:sticky;top:0;z-index:60;background:var(--ink);color:#fff}
.top::after{content:"";display:block;height:8px;background:repeating-linear-gradient(-45deg,var(--orange) 0 10px,var(--ink) 10px 20px)}
.top-in{display:flex;align-items:center;gap:1rem;min-height:76px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-decoration:none;flex:none}
.sign{display:block;background:var(--orange);color:#fff;font:900 1.5rem/1 var(--display);font-variation-settings:"SOFT" 100,"WONK" 0;text-transform:uppercase;letter-spacing:.02em;padding:.3em .55em .32em;border-radius:3px;
  text-shadow:-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink),0 -2px 0 var(--ink),0 2px 0 var(--ink),-2px 0 0 var(--ink),2px 0 0 var(--ink),3px 4px 0 var(--ink);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.2),0 0 0 2px #000}
.brand small{font:700 .78rem/1 var(--cond);text-transform:uppercase;letter-spacing:.16em;color:#aeb4b8;padding-left:.1rem}
.nav{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.nav a{color:#e6e9eb;text-decoration:none;font:700 1.02rem/1 var(--cond);text-transform:uppercase;letter-spacing:.05em;padding:.65rem .55rem;border-radius:4px;white-space:nowrap}
.nav a:hover{color:var(--orange)}
.nav a[aria-current=page]{background:var(--orange);color:var(--ink)}
.top .btn{min-height:44px;border-color:#000;box-shadow:0 4px 0 #000;flex:none}
.menu-btn{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:48px;height:48px;border:2px solid #4a4f54;border-radius:6px;background:transparent;cursor:pointer;flex:none}
.menu-btn i{display:block;width:22px;height:3px;background:#fff;border-radius:2px;transition:transform .15s,opacity .15s}
.top.open .menu-btn i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.top.open .menu-btn i:nth-child(2){opacity:0}
.top.open .menu-btn i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* hero */
.hero{background:var(--orange);position:relative;isolation:isolate}
.hero::before,.page-head::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(1100px 480px at 85% 10%,rgba(255,255,255,.2),transparent 62%),repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 1px,transparent 1px 4px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(2.6rem,6vw,4.4rem) clamp(2.4rem,4vw,3.2rem)}
.kicker{font:400 clamp(1.15rem,2.1vw,1.55rem)/1.1 var(--stencil);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.8rem}
.hero h1{font-size:clamp(3.3rem,9vw,7.2rem);line-height:.88}
.lede{font-size:clamp(1.12rem,1.6vw,1.3rem);font-weight:500;max-width:31em;margin-top:1.3rem;line-height:1.5}
.callnote{margin-top:1.2rem;font:700 1.02rem/1.3 var(--cond);text-transform:uppercase;letter-spacing:.06em}

/* time card */
.timecard{--hole:var(--orange);position:relative;width:100%;max-width:410px;justify-self:end;background:var(--manila);color:#2a251d;font-family:var(--type);padding:2.2rem 1.3rem 1.3rem;border-radius:4px;transform:rotate(1.8deg);
  box-shadow:0 24px 34px -16px rgba(0,0,0,.55),0 1px 0 rgba(0,0,0,.12)}
.timecard::before{content:"";position:absolute;top:12px;left:50%;width:42px;height:12px;margin-left:-21px;border-radius:6px;background:var(--hole);box-shadow:inset 0 2px 3px rgba(0,0,0,.45)}
.tc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;border-bottom:2px solid currentColor;padding-bottom:.5rem}
.tc-head b{font:400 1.65rem/1 var(--stencil);text-transform:uppercase;letter-spacing:.04em}
.tc-head span{font-size:.78rem;line-height:1.3;text-align:right}
.timecard table{width:100%;border-collapse:collapse;margin-top:.3rem;font-size:1rem}
.timecard th,.timecard td{text-align:left;padding:.42rem .35rem;border-bottom:1px solid rgba(42,37,29,.2)}
.timecard thead th{font:700 .74rem/1.2 var(--type);text-transform:uppercase;letter-spacing:.03em;padding-top:.65rem}
.timecard tbody th{font-weight:700;width:3.4rem}
.st{display:inline-block;color:var(--stamp);font-weight:700;transform:rotate(-1.2deg);letter-spacing:.02em}
.timecard tr:nth-child(even) .st{transform:rotate(.9deg)}
.closed{display:inline-block;border:2px solid var(--stamp);color:var(--stamp);font-weight:700;text-transform:uppercase;font-size:.84rem;letter-spacing:.14em;padding:0 .5rem;border-radius:3px;transform:rotate(-3deg);opacity:.85}
.timecard tr.today th,.timecard tr.today td{background:linear-gradient(transparent 10%,rgba(234,196,58,.8) 10% 90%,transparent 90%)}
.tc-status{display:flex;gap:.55rem;align-items:flex-start;font:700 1rem/1.35 var(--body);margin-top:.95rem}
.tc-bk{margin-top:.45rem;font-weight:500}
.tc-big{max-width:520px;justify-self:center;transform:rotate(-1.2deg);--hole:#e2e5e7}
.tc-big table{font-size:1.1rem}
.lamp{flex:none;display:inline-block;width:13px;height:13px;margin-top:.22em;border-radius:50%;background:#8d9498;box-shadow:inset 0 -2px 3px rgba(0,0,0,.35),0 0 0 2px rgba(0,0,0,.18)}
.lamp.on{background:var(--go);box-shadow:inset 0 -2px 3px rgba(0,0,0,.2),0 0 0 3px rgba(59,209,111,.25),0 0 14px 2px rgba(59,209,111,.75);animation:glow 2.4s ease-in-out infinite}
.lamp.off{background:#d8463b}
@keyframes glow{50%{box-shadow:inset 0 -2px 3px rgba(0,0,0,.2),0 0 0 3px rgba(59,209,111,.12),0 0 5px 1px rgba(59,209,111,.45)}}

/* the conveyor belt */
.belt{position:relative;overflow:hidden;background:linear-gradient(#44494d,#2b2f32 75%);border-top:4px solid var(--ink);padding-top:1.7rem}
.belt-track{display:flex;align-items:flex-end;width:max-content;position:relative;padding-bottom:20px;animation:run 85s linear infinite}
.belt:hover .belt-track{animation-play-state:paused}
.belt-track::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20px;background:repeating-linear-gradient(90deg,#121416 0 3px,#2c3034 3px 30px);border-top:2px solid #5b6166}
.belt-item,.belt-tag{flex:none;margin:0 30px 7px 0}
.belt-item img{display:block;width:230px;height:165px;object-fit:cover;border:6px solid var(--paper);border-radius:3px;box-shadow:0 14px 14px -8px rgba(0,0,0,.75)}
.belt-tag{width:172px;height:132px;display:flex;flex-direction:column;justify-content:space-between;padding:.9rem 1rem .85rem;border-radius:9px;border:2px solid #0b0c0d;
  background-color:#d9dee1;background-image:var(--rv),linear-gradient(160deg,#f7f8f9,#bfc5c9);box-shadow:inset 0 1px 0 #fff,0 14px 14px -8px rgba(0,0,0,.75)}
.belt-tag b{font:400 1.75rem/1 var(--stencil);color:var(--ink);padding-left:.4rem}
.belt-tag span{font:800 1.04rem/1.05 var(--cond);text-transform:uppercase}
.belt-tag em{font:700 1.08rem/1 var(--type);font-style:normal;color:var(--stamp)}
.rollers{height:30px;background:radial-gradient(circle at 20px 13px,#b8bec2 0 3px,#646b70 3.5px 10px,#1a1c1e 10.5px 12.5px,transparent 13px) 0 0/40px 30px repeat-x,linear-gradient(#25282b,#141618)}
@keyframes run{to{transform:translateX(-50%)}}

/* sections */
.sec{padding-block:clamp(3.2rem,7vw,5.5rem)}
.sec-tight{padding-top:0}
.sec-head{max-width:46rem;margin-bottom:clamp(1.8rem,4vw,2.6rem);display:grid;gap:.9rem}
.sec-head p{font-size:1.15rem;color:var(--muted)}

/* three lines */
.lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.line-card{display:flex;flex-direction:column;background-color:#e2e6e8;background-image:var(--rv),linear-gradient(170deg,#f8f9fa,#d2d7da);border:3px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:0 7px 0 var(--ink)}
.line-run{display:flex;align-items:center;gap:.6rem;background:var(--ink);color:#e6e9eb;padding:.7rem 1rem;font:700 1rem/1.2 var(--cond);letter-spacing:.03em}
.line-run .lamp{margin-top:0}
.line-card>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:3px solid var(--ink)}
.line-body{display:flex;flex-direction:column;gap:.65rem;padding:1.25rem 1.3rem 1.5rem;flex:1}
.line-body h3{font:900 clamp(1.8rem,2.6vw,2.2rem)/1 var(--display);font-variation-settings:"SOFT" 100;text-transform:none;letter-spacing:0}
.line-no{font:400 1.08rem/1 var(--stencil);color:var(--orange-2)}
.line-body .more{margin-top:auto}

/* assembly line */
.assembly{background:var(--ink);color:#fff}
.assembly .sec-head p{color:#c3c9cd}
.stations{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.8rem 1.6rem}
.station .ph{position:relative;border-radius:8px;overflow:hidden;border:3px solid #50565b;background:#000}
.station .ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.station .num{position:absolute;left:0;top:0;background:var(--orange);color:var(--ink);font:400 1.7rem/1 var(--stencil);padding:.42rem .7rem .36rem;border-bottom-right-radius:8px}
.tread{height:12px;margin-top:8px;border-radius:6px;background:repeating-linear-gradient(90deg,#0b0c0d 0 3px,#3d4246 3px 18px);background-size:18px 100%;animation:tread 1.1s linear infinite;box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
@keyframes tread{to{background-position:18px 0}}
.station h3{margin-top:1rem;color:#fff;font-size:1.45rem}
.station p{margin-top:.4rem;color:#c3c9cd}

/* heavy duty, on diamond plate */
.heavy{color:#fff;background-color:#2b2f32;background-image:var(--plate)}
.heavy .sec-head p{color:#d0d5d8}
.hd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.hd{display:flex;flex-direction:column;gap:.35rem;color:var(--ink);background-color:#dfe3e6;background-image:var(--rv),linear-gradient(165deg,#fafbfb,#c9cfd2);border:3px solid #0b0c0d;border-radius:12px;padding:1.6rem 1.5rem 1.6rem;box-shadow:0 9px 0 #0b0c0d}
.hd .no{font:400 2.1rem/1 var(--stencil);color:var(--orange-2);padding-left:.6rem}
.hd h3{font:900 clamp(2.3rem,3.6vw,2.8rem)/.95 var(--display);font-variation-settings:"SOFT" 100;text-transform:none;letter-spacing:0;margin-top:.2rem}
.hd .aka{font:700 1.05rem/1.2 var(--cond);color:#4b5156;text-transform:uppercase;letter-spacing:.04em}
.gauge{display:block;width:100%;max-width:250px;margin:.8rem auto 0}
.gauge-nums text{font:700 12px var(--cond);fill:#16181A;text-anchor:middle;dominant-baseline:middle}
.gauge-label{font:400 10px var(--stencil);fill:#6a7075;text-anchor:middle;letter-spacing:2px}
.gauge .needle{transform-origin:100px 100px;transform:rotate(var(--a))}
.gauge.rev .needle{animation:rev 1.7s cubic-bezier(.25,1.45,.4,1)}
@keyframes rev{from{transform:rotate(-90deg)}}
.gauge-read{text-align:center;font:800 1.1rem/1 var(--cond);text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem}
.bom{list-style:none;padding:0;margin-top:.8rem;display:flex;flex-wrap:wrap;gap:.35rem}
.bom li{background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:.1rem .6rem;font:700 .92rem/1.35 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.bom li.c{background:var(--mustard)}
.hd-price{display:flex;gap:1.5rem;margin-top:auto;padding-top:1rem;border-top:2px dashed rgba(22,24,26,.35);font:800 1.1rem/1 var(--cond);text-transform:uppercase;align-items:baseline}
.hd .bom{margin-bottom:1rem}
.hd-price b{font:900 1.7rem/1 var(--display);font-variation-settings:"SOFT" 100;margin-left:.3rem}
.heavy-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;margin-top:2.6rem}
.pull blockquote{font:800 clamp(1.25rem,2.3vw,1.6rem)/1.3 var(--display);font-variation-settings:"SOFT" 100}
.pull figcaption{margin-top:.6rem;font:700 .98rem/1.2 var(--cond);text-transform:uppercase;letter-spacing:.06em;color:var(--orange-2)}
.heavy .pull figcaption{color:var(--orange)}
.prose .pull,.stack .pull{padding:1.2rem 0 0;border-top:3px solid var(--ink)}

/* the chalkboard */
.board{background-color:var(--chalk);background-image:radial-gradient(640px 300px at 18% 8%,rgba(255,255,255,.08),transparent 70%),radial-gradient(520px 280px at 90% 95%,rgba(255,255,255,.06),transparent 70%);
  color:var(--chalk-ink);border:14px solid #c6cbcf;border-radius:6px;box-shadow:inset 0 0 0 2px #8d9499,inset 0 0 60px rgba(0,0,0,.35),0 0 0 2px #7d848a,0 18px 30px -18px rgba(0,0,0,.6);padding:clamp(1.5rem,4vw,3rem)}
.board-top{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.4rem}
.oval{flex:none;display:inline-block;padding:.6rem 2.2rem .7rem;border:2px solid rgba(238,241,231,.85);border-radius:999px;outline:2px dotted rgba(238,241,231,.7);outline-offset:-9px;font:300 clamp(1.4rem,2.6vw,2rem)/1.05 var(--body);letter-spacing:.14em;text-transform:uppercase;text-align:center}
.board h2{font:400 clamp(2rem,4vw,2.8rem)/1.05 var(--body);font-variation-settings:normal;letter-spacing:.01em}
.board-top p{margin-top:.5rem;font-size:1.12rem;color:#d6ddd2;max-width:34em}
.board-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 3rem;margin-top:2.2rem;padding-top:1.8rem;border-top:2px dashed rgba(238,241,231,.35)}
.board h3{font:500 clamp(1.7rem,3vw,2.2rem)/1.1 var(--body);text-transform:none;letter-spacing:.01em;color:#fff}
.chalkq{margin-top:1rem}
.chalkq blockquote{font-size:1.1rem;line-height:1.5;color:#e3e9df}
.chalkq figcaption{margin-top:.3rem;font-size:.92rem;color:#aebbab}

/* order tickets on a rail */
.rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 1.4rem;align-items:start}
.slot{position:relative;padding-top:15px}
.slot::before{content:"";position:absolute;top:0;left:-.7rem;right:-.7rem;height:9px;border-radius:5px;background:linear-gradient(#f4f6f7,#9da4a9 70%,#7b8287);box-shadow:0 2px 3px rgba(0,0,0,.25)}
.ticket{position:relative;background:var(--paper);padding:1.6rem 1.15rem 1.7rem;font:400 .98rem/1.5 var(--type);color:#24272a;transform:rotate(var(--tilt,0deg));transform-origin:50% 0;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.2));
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 9px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 9px repeat-x}
.ticket::before{content:"";position:absolute;top:0;left:50%;width:48px;height:13px;margin-left:-24px;background:linear-gradient(#dfe3e6,#8f979c);border-radius:0 0 4px 4px}
.ticket .stars{color:var(--stamp);letter-spacing:.18em}
.ticket blockquote{margin-top:.45rem}
.ticket figcaption{margin-top:.9rem;padding-top:.55rem;border-top:1px dashed rgba(36,39,42,.45);font-weight:700;font-size:.9rem}

/* orange band */
.band{background:var(--orange);border-block:4px solid var(--ink)}
.band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2rem;padding-block:2.6rem}
.band h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.band p{margin-top:.5rem;font-size:1.12rem;font-weight:500;max-width:36em}

/* visit */
.visit{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
.visit-page{align-items:start}
.framed{border:4px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:0 8px 0 var(--ink);background:#000}
.framed img{display:block;width:100%;object-fit:cover}
.facts{display:grid;gap:1.1rem;margin-top:1.4rem;align-content:start}
.split .facts{margin-top:0}
.fact{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding-top:.95rem;border-top:3px solid var(--ink)}
.fact b{font:800 1rem/1.4 var(--cond);text-transform:uppercase;letter-spacing:.06em}
.big-phone{font:900 clamp(1.7rem,3.4vw,2.3rem)/1.1 var(--display);font-variation-settings:"SOFT" 100;text-decoration:none}
.map{display:block;width:100%;aspect-ratio:4/3;border:4px solid var(--ink);border-radius:10px;box-shadow:0 8px 0 var(--ink);background:#cdd2d5}

/* inner page heads */
.page-head{background:var(--orange);border-bottom:4px solid var(--ink);position:relative;isolation:isolate}
.ph-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 2.5rem;padding-block:clamp(2.3rem,5vw,3.6rem)}
.crumbs{font:700 .95rem/1 var(--cond);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.9rem}
.crumbs a{text-decoration-thickness:2px;text-underline-offset:3px}
.page-head .sub{font-size:clamp(1.08rem,1.5vw,1.22rem);font-weight:500;max-width:38em;margin-top:1rem}
.partplate{flex:none;background-color:#dfe3e6;background-image:var(--rv),linear-gradient(165deg,#fafbfb,#c4cacd);border:3px solid var(--ink);border-radius:10px;padding:1.05rem 1.7rem 1rem;box-shadow:0 6px 0 var(--ink);font:400 clamp(1.4rem,2.6vw,2rem)/1.1 var(--stencil);text-align:center;white-space:nowrap}
.partplate small{display:block;font:800 .85rem/1.2 var(--cond);text-transform:uppercase;letter-spacing:.08em;margin-top:.35rem}

/* menu */
.jump{display:flex;flex-wrap:wrap;gap:.55rem;padding-block:1.8rem .4rem}
.chip,.filters button{display:inline-flex;align-items:center;min-height:44px;padding:.45rem 1rem;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font:700 1rem/1 var(--cond);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--ink);cursor:pointer}
.chip:hover,.filters button:hover{background:var(--orange)}
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.8rem}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff}
.msec{padding-block:clamp(2.4rem,5vw,3.6rem);border-top:3px solid var(--ink)}
.jump+.msec{border-top:0;padding-top:1.6rem}
.msec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.6rem 2rem;margin-bottom:1.3rem}
.msec-head p{max-width:36em;font-size:1.08rem;color:var(--muted)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 2rem;align-items:start}
.small-link{margin-top:1rem}
.bracket{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;background:var(--paper);border:3px solid var(--ink);border-radius:10px;padding:clamp(1rem,3vw,1.8rem);box-shadow:0 7px 0 var(--ink)}
.bracket ol{list-style:none;padding:.2rem 0;margin-right:2.4rem;border-right:3px solid var(--ink);columns:2;column-gap:2.4rem}
.bracket li{display:flex;align-items:baseline;gap:.8rem;padding:.32rem 0;break-inside:avoid}
.bracket li::after{content:"";flex:1 1 .5rem;align-self:center;border-top:2px dotted rgba(22,24,26,.3)}
.bracket .n{font:400 1.2rem/1 var(--stencil);color:var(--orange-2);min-width:2.2ch}
.bracket .nm{font:700 1.14rem/1.15 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.price-plate{position:relative;display:grid;gap:1rem;text-align:center;background-color:#dfe3e6;background-image:var(--rv),linear-gradient(165deg,#fafbfb,#c4cacd);border:3px solid var(--ink);border-radius:10px;padding:1.4rem 1.8rem;min-width:11rem}
.price-plate::before{content:"";position:absolute;right:100%;top:50%;width:2.4rem;border-top:3px solid var(--ink)}
.price-plate b{display:block;font:900 3rem/1 var(--display);font-variation-settings:"SOFT" 100}
.price-plate span{display:block;font:800 1rem/1.2 var(--cond);text-transform:uppercase;letter-spacing:.06em;margin-top:.2rem}
.parts{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);border:3px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:0 7px 0 var(--ink)}
.parts th{background:var(--ink);color:#fff;font:700 .95rem/1.2 var(--cond);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:.7rem .9rem}
.parts th.p{text-align:right}
.parts td{padding:.8rem .9rem;border-top:1px solid rgba(22,24,26,.14);vertical-align:top}
.parts tbody tr:first-child td{border-top:0}
.parts .n{font:400 1.2rem/1.2 var(--stencil);color:var(--orange-2);width:4rem;white-space:nowrap}
.parts .p{text-align:right;white-space:nowrap;font:700 1.15rem/1.2 var(--cond);font-variant-numeric:tabular-nums}
.parts .nm{font:700 1.15rem/1.2 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.parts .aka{font-weight:600;color:#5a6066;text-transform:none;letter-spacing:0}
.parts .what{display:block;margin-top:.2rem;font-size:.97rem;color:#3d4246}
.parts tr.hvy td{background:rgba(255,107,26,.1)}
.load{display:inline-flex;gap:3px;vertical-align:middle;margin-left:.55rem}
.load i{width:7px;height:15px;border-radius:2px;background:var(--orange-2)}
.load i.c{background:var(--mustard);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.special{margin-top:1.4rem;background:var(--ink);color:#fff;border-radius:10px;padding:1.5rem 1.6rem;box-shadow:0 7px 0 #000}
.special h3{color:var(--orange);font-size:1.6rem}
.special p{margin-top:.5rem;color:#d6dadd}
.special .price-row{display:flex;gap:1.8rem;margin-top:1rem;font:800 1.1rem var(--cond);text-transform:uppercase;align-items:baseline;color:#fff}
.special .price-row b{font:900 1.8rem/1 var(--display);font-variation-settings:"SOFT" 100;margin-left:.3rem}
.bin{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.9rem}
.photo-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.bin img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:2px solid var(--ink)}
.framed .photo-btn img{display:block;width:100%}

/* teriyaki, breakfast, about */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.stack{display:grid;gap:1.4rem;align-content:start}
.stack .cta{margin-top:.2rem}
.lede-sm{font-size:1.12rem;color:var(--muted)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.status-plate{display:flex;align-items:flex-start;gap:.7rem;background:var(--ink);color:#fff;border-radius:10px;padding:1rem 1.2rem;font:700 1.1rem/1.35 var(--body)}
.prose{display:grid;gap:1.1rem;font-size:1.12rem;max-width:40rem}
.prose h2{margin-top:.8rem;font-size:clamp(1.8rem,3.4vw,2.4rem)}
.prose h2:first-child{margin-top:0}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.collage .tall{grid-column:1/-1}
.collage .tall img{aspect-ratio:4/3;object-position:50% 25%}
.collage .framed img{aspect-ratio:4/3}

/* party platter order slip */
.split-form{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.how{list-style:none;padding:0;counter-reset:how;display:grid;gap:1rem}
.how li{counter-increment:how;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.2rem 1rem;align-items:start}
.how li::before{content:counter(how);grid-row:span 2;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--orange);border:3px solid var(--ink);font:400 1.3rem/1 var(--stencil)}
.how b{font:800 1.2rem/1.2 var(--cond);text-transform:uppercase;letter-spacing:.03em}
.how a{font-weight:700}
.wo{position:relative;background:#FFF6C8;border:3px solid var(--ink);border-radius:6px;box-shadow:0 10px 0 var(--ink);color:#2a251d;overflow:hidden}
.wo-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--ink);color:#fff;padding:1rem 1.4rem}
.wo-head b{font:400 1.75rem/1 var(--stencil);text-transform:uppercase;letter-spacing:.04em}
.wo-head span{font:400 .86rem/1.3 var(--type);color:#c9ced1;text-align:right}
.wo-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem 1.6rem;padding:1.6rem 1.4rem 1.8rem}
.wo label,.wo fieldset{display:grid;gap:.35rem;margin:0;align-content:start}
.wo .wide{grid-column:1/-1}
.wo label>span,.wo legend{font:800 .92rem/1.2 var(--cond);text-transform:uppercase;letter-spacing:.06em;color:#4a4436}
.wo legend{padding:0;margin-bottom:.45rem}
.wo input,.wo select,.wo textarea{width:100%;font:400 1.08rem/1.4 var(--type);color:#1e1a14;background:transparent;border:0;border-bottom:2px solid #2a251d;border-radius:0;padding:.45rem .15rem;min-height:46px}
.wo select{appearance:auto}
.wo textarea{border:2px solid #2a251d;border-radius:4px;min-height:7rem;padding:.6rem .7rem;background:rgba(255,255,255,.45);resize:vertical}
.wo input:focus,.wo select:focus,.wo textarea:focus{outline:none;background:rgba(255,107,26,.13);border-color:var(--orange-2)}
.wo ::placeholder{color:#8a8070}
.wo fieldset{border:0;padding:0;min-width:0}
.pick{display:flex;flex-wrap:wrap;gap:.5rem}
.pick label{display:inline-flex;align-items:center;gap:.45rem;border:2px solid #2a251d;border-radius:999px;padding:.4rem .9rem;font:700 1rem/1 var(--cond);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;background:rgba(255,255,255,.5);min-height:44px}
.pick input{width:auto;min-height:0;margin:0;accent-color:var(--orange-2)}
.pick label:has(input:checked){background:var(--orange)}
.pick label:has(input:focus-visible){outline:3px solid var(--orange-2);outline-offset:2px}
.wo small{font:400 .86rem/1.4 var(--type);color:#6a6150;text-transform:none;letter-spacing:0}
.wo-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;padding:0 1.4rem 1.7rem}
.form-msg{font:700 1.02rem/1.4 var(--body);max-width:30em}
.hp{position:absolute;left:-9999px}
.stamp{position:absolute;right:7%;top:40%;font:400 clamp(2.4rem,7vw,4.2rem)/1 var(--stencil);color:var(--stamp);border:5px solid var(--stamp);border-radius:8px;padding:.15rem .9rem .25rem;text-transform:uppercase;letter-spacing:.06em;opacity:0;transform:rotate(-12deg);pointer-events:none;mix-blend-mode:multiply}
.wo.sent .stamp{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stamp{from{opacity:0;transform:rotate(-12deg) scale(2.3)}to{opacity:.88;transform:rotate(-12deg) scale(1)}}

/* photos */
.gallery{columns:3 260px;column-gap:1rem}
.shot{break-inside:avoid;margin:0 0 1rem;background:var(--paper);border:3px solid var(--ink);border-radius:8px;overflow:hidden}
.shot[hidden]{display:none}
.shot button{display:block;width:100%;padding:0;border:0;background:#000;cursor:zoom-in}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:.6rem .85rem;font:600 .98rem/1.35 var(--body)}

/* reviews */
.score{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:1.4rem 2.4rem;align-items:center;margin-bottom:3rem;padding:1.6rem 1.8rem;background:var(--paper);border:3px solid var(--ink);border-radius:10px;box-shadow:0 7px 0 var(--ink)}
.score-big{font:900 clamp(4rem,10vw,6.4rem)/.9 var(--display);font-variation-settings:"SOFT" 100}
.score-meta .stars{color:var(--stamp);font-size:1.5rem;letter-spacing:.12em}
.score-meta p+p{font:700 1.05rem var(--cond);text-transform:uppercase;letter-spacing:.04em}
.topics-wrap .h3{font-size:1.1rem;margin-bottom:.7rem}
.topics{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.topics li{display:inline-flex;align-items:center;gap:.45rem;border:2px solid var(--stamp);color:var(--stamp);border-radius:4px;padding:.3rem .65rem;font:700 .95rem/1 var(--type);text-transform:uppercase;letter-spacing:.04em;transform:rotate(var(--r,0deg))}
.topics b{font:400 1.05rem/1 var(--stencil);color:var(--ink)}

/* questions */
.faq{display:grid;gap:.85rem;align-content:start}
.faq h2{margin-bottom:.4rem;font-size:clamp(1.8rem,3.4vw,2.4rem)}
.faq details{background:var(--paper);border:3px solid var(--ink);border-radius:8px;box-shadow:0 5px 0 var(--ink)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font:800 1.15rem/1.25 var(--cond);text-transform:uppercase;letter-spacing:.02em;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 1.6rem/1 var(--stencil);color:var(--orange-2)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 1.2rem 1.15rem}
.faq details a{font-weight:700}

/* footer on diamond plate */
.foot{color:#cdd2d5;background-color:#25282b;background-image:var(--plate)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-block:3rem 2.2rem}
.foot h2{font:800 1.05rem/1.2 var(--cond);text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:.7rem}
.foot ul{list-style:none;padding:0;display:grid;gap:.4rem}
.foot a{color:#fff}
.foot-brand p{margin-top:.8rem;max-width:22em}
.roundel{display:block;width:210px;height:auto}
.roundel .ring{font-family:var(--stencil)}
.roundel .sfword{font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100}
.foot-phone{font:900 1.6rem/1 var(--display);font-variation-settings:"SOFT" 100;text-decoration:none}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding-block:1.2rem 1.6rem;border-top:1px solid rgba(255,255,255,.15);font-size:.9rem;color:#a9b0b5}
.callbar{display:none}
.lightbox{max-width:min(94vw,1400px);max-height:92vh;padding:0;border:0;background:transparent;overflow:visible}
.lightbox::backdrop{background:rgba(12,13,14,.92)}
.lightbox img{display:block;max-width:min(94vw,1400px);max-height:86vh;width:auto;height:auto;border-radius:6px;border:5px solid var(--paper)}
.lb-close{position:absolute;top:-3rem;right:0;width:2.6rem;height:2.6rem;border:3px solid var(--ink);border-radius:6px;background:var(--orange);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}

@media (max-width:1140px){
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);padding:.4rem clamp(16px,4vw,32px) 1.2rem;border-bottom:4px solid var(--orange);box-shadow:0 18px 30px -10px rgba(0,0,0,.5)}
  .top.open .nav{display:flex}
  .nav a{font-size:1.3rem;padding:.9rem .4rem;border-bottom:1px solid rgba(255,255,255,.09)}
  .top-call{margin-left:auto}
}
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr}
  .timecard{justify-self:center;max-width:430px}
  .lines{grid-template-columns:1fr;max-width:640px}
  .line-card>img{aspect-ratio:16/9}
  .stations{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hd-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .visit,.split,.split-form,.two{grid-template-columns:1fr}
  .board-grid,.heavy-quotes{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .score{grid-template-columns:auto minmax(0,1fr)}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bin{grid-template-columns:repeat(4,minmax(0,1fr))}
  .topics-wrap{grid-column:1/-1}
}
@media (max-width:760px){
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:.6rem 12px calc(.6rem + env(safe-area-inset-bottom,0px));background:var(--ink);border-top:3px solid var(--orange)}
  .callbar .btn{min-height:48px;box-shadow:none;border-color:#000}
  .foot{padding-bottom:76px}
  .bracket{grid-template-columns:1fr}
  .bracket ol{border-right:0;margin-right:0;columns:1}
  .price-plate{order:-1;grid-template-columns:1fr 1fr;margin-bottom:1.2rem}
  .price-plate::before{display:none}
  .belt-item img{width:176px;height:128px}
  .belt-tag{width:142px;height:112px;padding:.7rem .8rem}
  .belt-tag b{font-size:1.4rem}
  .belt-tag span{font-size:.92rem}
}
@media (max-width:600px){
  .top-call{display:none}
  .menu-btn{margin-left:auto}
  .sign{font-size:1.3rem}
  .stations{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .wo-body{grid-template-columns:1fr;padding-inline:1.1rem}
  .wo-head,.wo-foot{padding-inline:1.1rem}
  .fact{grid-template-columns:1fr;gap:.3rem}
  .parts td,.parts th{padding:.7rem .55rem}
  .parts .n{width:2.8rem}
  .score{grid-template-columns:1fr;padding:1.3rem}
  .rail{grid-template-columns:1fr;gap:2rem}
  .bin{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
  .partplate{padding:.8rem 1.2rem}
  .timecard{padding-inline:1rem}
  .pair{grid-template-columns:1fr 1fr;gap:.7rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .belt-track,.tread,.lamp.on{animation:none}
  .gauge.rev .needle,.wo.sent .stamp{animation-duration:.01s}
  .btn{transition:none}
}