/* North · the booking page (North OS, Reservations), dressed as a page of north-restaurant.com (8 Oct 2026).
   Every value is the website's (north-website DESIGN.md and its shipped CSS): Stone ground, the nav in Jade Deep on Stone,
   Instrument Serif headings with one italic Jade word, a Thai line beside each, the Jade Deep pill for the one action,
   a Dark footer with Lime heads (Lime type on Dark only). No decorative rules; Thai is never letter-spaced or uppercased.
   Fonts load relative to this file, so the sheet works under /book/a/css/ on north-restaurant.com and /css/ elsewhere. */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/instrument-serif.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/instrument-serif-italic.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:400 500;font-display:swap;src:url("../fonts/manrope.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Thai";font-weight:400;font-display:swap;src:url("../fonts/plex-thai-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Thai";font-weight:500;font-display:swap;src:url("../fonts/plex-thai-500.woff2") format("woff2")}

:root{
  --dark:#171a13;--stone:#eae7e3;--band:#e3dfd8;--on-dark:#e4e7de;--on-dark-2:#9aa292;--ink:#22231f;--ink-2:#565b4e;
  --hair-dark:#2e3428;--hair:#d8d4cc;--jade:#2e8b6a;--jade-deep:#257156;--lime:#b9e24a;--error:#9b2a1f;
  --serif:"Instrument Serif","IBM Plex Sans Thai",serif;--label:"Manrope","IBM Plex Sans Thai",sans-serif;
  --text:"Inter","IBM Plex Sans Thai",system-ui,sans-serif;--thai:"IBM Plex Sans Thai","Noto Sans Thai",sans-serif;
  --u:clamp(0.72px,calc(100vw / 1440),1.34px);--gutter:clamp(20px,calc(75 * 100vw / 1440),100px);
  --ease:cubic-bezier(.16,1,.3,1);color-scheme:light
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--stone);color:var(--ink);font:400 16px/1.6 var(--text);-webkit-font-smoothing:antialiased}
:lang(th){letter-spacing:0}
html[lang="th"] body{font-family:var(--thai)}
a{color:inherit}
:focus-visible{outline:2px solid var(--jade-deep);outline-offset:3px}
[hidden]{display:none!important}

/* ---- the website's nav, on Stone ---- */
.bk-bar{display:flex;align-items:center;gap:calc(36 * var(--u));height:76px;padding:0 var(--gutter)}
.bk-mark{display:flex;align-items:center;flex:none;min-height:44px}
.bk-mark img{display:block;height:26px;width:auto}
.bk-nav{margin-inline:auto}
.bk-nav ul{display:flex;align-items:center;gap:calc(30 * var(--u));margin:0;padding:0;list-style:none}
.bk-nav a{display:block;padding-block:12px;text-decoration:none;color:var(--jade-deep);font:500 max(11px,calc(10.5 * var(--u)))/1 var(--label);letter-spacing:.14em;text-transform:uppercase;transition:color .3s var(--ease)}
.bk-nav a:lang(th){font:500 max(13px,calc(14 * var(--u)))/1 var(--thai);letter-spacing:0;text-transform:none}
.bk-nav a:hover,.bk-lang:hover{color:var(--ink)}
.bk-lang{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;color:var(--jade-deep);text-decoration:none;font:500 max(13px,calc(14 * var(--u)))/1 var(--thai)}
.bk-lang:lang(en){font:500 12px/1 var(--label);letter-spacing:.14em}

/* ---- the page ---- */
.bk{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:clamp(28px,calc(56 * var(--u)),80px) var(--gutter) clamp(72px,calc(128 * var(--u)),168px)}
.bk-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,calc(64 * var(--u)),88px)}
.bk-main,.bk-intro,.bk-solo{min-width:0}
.bk-solo{max-width:40rem}
@media (min-width:960px){
  .bk-layout{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:calc(96 * var(--u));align-items:start}
  .bk-intro{position:sticky;top:clamp(28px,calc(56 * var(--u)),80px)}
  .bk-layout.is-done{grid-template-columns:minmax(0,1fr)}
  .bk-layout.is-done .bk-main{max-width:40rem}
}

/* the heading block: eyebrow, the English display line with its accented word, the Thai line */
.bk-head{max-width:40rem}
.bk-eyebrow{margin:0;font:500 max(11px,calc(13 * var(--u)))/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--jade-deep)}
.bk-h1{margin:clamp(16px,calc(22 * var(--u)),28px) 0 0;font:400 clamp(40px,calc(58 * var(--u)),76px)/1.06 var(--serif);letter-spacing:-.005em;text-wrap:balance;color:var(--ink)}
.bk-h1 em{font-style:italic;color:var(--jade);margin-right:-.03em}
.bk-deck{margin:clamp(10px,calc(14 * var(--u)),18px) 0 0;font:400 clamp(16px,calc(18 * var(--u)),22px)/1.6 var(--thai);color:var(--ink-2);text-wrap:balance}
/* on /th/ the Thai line is the heading: a touch firmer, still at deck size */
h1.bk-deck{font-weight:500;color:var(--ink)}
.bk-lede{margin:clamp(20px,calc(28 * var(--u)),36px) 0 0;max-width:34em;font:400 clamp(16px,calc(17 * var(--u)),19px)/1.65 var(--text);color:var(--ink-2)}
html[lang="th"] .bk-lede{font-family:var(--thai);line-height:1.8}
/* the circle code in the link (20 Oct 2026): what it gives, under the lede, in North's Jade */
.bk-circle{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;max-width:34em;margin:18px 0 0;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--jade) 12%,transparent);font:400 15px/1.5 var(--text);color:var(--ink)}
.bk-circle b{font:500 12.5px/1 var(--label);letter-spacing:.14em;padding:5px 9px;border-radius:999px;background:var(--jade-deep);color:var(--stone)}
html[lang="th"] .bk-circle{font-family:var(--thai)}

/* how else to reach North, under the heading */
.bk-facts{display:grid;gap:18px;margin:clamp(32px,calc(48 * var(--u)),64px) 0 0}
.bk-facts div{display:grid;grid-template-columns:7.5em 1fr;gap:16px}
.bk-facts dt{padding-top:.3em;font:500 11.5px/1.4 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
html[lang="th"] .bk-facts dt{font:500 14px/1.5 var(--thai);letter-spacing:0;text-transform:none}
.bk-facts dd{margin:0;font:400 15px/1.65 var(--text)}
html[lang="th"] .bk-facts dd{font-family:var(--thai)}
.bk-facts a{text-decoration:none;border-bottom:1px solid var(--hair);transition:border-color .3s var(--ease)}
.bk-facts a:hover{border-bottom-color:var(--jade-deep)}

/* ---- the form ---- */
.bk-step{margin:0 0 clamp(40px,calc(56 * var(--u)),72px)}
.bk-step>.bk-eyebrow{margin-bottom:22px}
html[lang="th"] .bk-step>.bk-eyebrow{letter-spacing:0;text-transform:none;font:500 15px/1.4 var(--thai)}

.bk-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin:0 -2px;scrollbar-width:none;scroll-snap-type:x proximity}
.bk-days::-webkit-scrollbar{display:none}
.bk-day{flex:none;display:grid;gap:4px;min-width:66px;padding:12px 10px;border:1px solid var(--hair);border-radius:0;background:transparent;font:500 11.5px/1.2 var(--label);letter-spacing:.06em;color:var(--ink-2);text-align:center;cursor:pointer;scroll-snap-align:start;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
html[lang="th"] .bk-day{font-family:var(--thai);letter-spacing:0;font-size:13px}
.bk-day b{display:block;font:400 26px/1 var(--serif);color:var(--ink)}
.bk-day:hover{border-color:var(--ink-2)}
/* the chosen day, sitting and time: Jade Deep with Stone type, like the website's Book pill (Indy, 8 Oct 2026: "change
   this to jade"). Jade Deep, not Jade, because Jade holds no type above 3.8:1; Lime stays on Dark only */
.bk-day[aria-checked="true"]{background:var(--jade-deep);border-color:var(--jade-deep);color:var(--stone)}
.bk-day[aria-checked="true"] b{color:var(--stone)}
.bk-date{display:inline-flex;align-items:center;gap:12px;margin:10px 0 24px;font:500 13px/1.3 var(--label);color:var(--ink-2)}
html[lang="th"] .bk-date{font-family:var(--thai)}
.bk-date input{min-height:44px;padding:6px 16px;border:1px solid var(--hair);border-radius:999px;background:transparent;font:400 15px/1.3 var(--text);color:var(--ink)}

.bk-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:18px}
.bk-seg{display:inline-flex;padding:3px;border:1px solid var(--hair);border-radius:999px}
.bk-seg:empty{display:none}
.bk-seg button{min-height:40px;padding:0 20px;border:0;border-radius:999px;background:transparent;font:500 11.5px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
html[lang="th"] .bk-seg button{font:500 14px/1 var(--thai);letter-spacing:0;text-transform:none}
.bk-seg button[aria-checked="true"]{background:var(--jade-deep);color:var(--stone)}
.bk-party{display:inline-flex;align-items:center;gap:12px}
.bk-label{font:500 11.5px/1.3 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
html[lang="th"] .bk-label{font:500 14px/1.3 var(--thai);letter-spacing:0;text-transform:none}
.bk-step-btn{width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;background:transparent;font:400 20px/1 var(--text);color:var(--ink);cursor:pointer;transition:border-color .2s var(--ease)}
.bk-step-btn:hover{border-color:var(--ink-2)}
.bk-party output{min-width:28px;text-align:center;font:400 28px/1 var(--serif)}
.bk-hint{margin:0 0 14px;font:400 14px/1.6 var(--text);color:var(--ink-2)}
html[lang="th"] .bk-hint{font-family:var(--thai)}

.bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;min-height:56px}
.bk-time{display:grid;align-content:center;gap:4px;min-height:58px;padding:9px 6px;border:1px solid var(--hair);border-radius:0;background:transparent;font:500 15px/1.2 var(--label);color:var(--ink);text-align:center;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.bk-time small{font:400 11.5px/1.2 var(--text);color:var(--ink-2)}
html[lang="th"] .bk-time small{font-family:var(--thai);font-size:12.5px}
.bk-time:hover{border-color:var(--ink-2)}
.bk-time[aria-checked="true"]{background:var(--jade-deep);border-color:var(--jade-deep);color:var(--stone)}
.bk-time[aria-checked="true"] small{color:var(--stone)}
.bk-time[disabled]{border-style:dashed;color:var(--ink-2);opacity:.6;cursor:not-allowed}
.bk-time[disabled]:hover{border-color:var(--hair)}
.bk-times .bk-note{grid-column:1/-1;margin:0;padding:14px 0;color:var(--ink-2);font-size:15px}

.bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.bk-field{display:grid;gap:8px;min-width:0;font:500 11.5px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
html[lang="th"] .bk-field{font:500 14px/1.4 var(--thai);letter-spacing:0;text-transform:none}
.bk-field input,.bk-field select,.bk-field textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--hair);border-radius:0;background:#fff;font:400 16px/1.4 var(--text);letter-spacing:0;text-transform:none;color:var(--ink);transition:border-color .2s var(--ease)}
html[lang="th"] .bk-field input,html[lang="th"] .bk-field textarea,html[lang="th"] .bk-field select{font-family:var(--thai)}
.bk-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.bk-field textarea{resize:vertical}
.bk-field input:hover,.bk-field select:hover,.bk-field textarea:hover{border-color:var(--ink-2)}
.bk-field input:focus,.bk-field select:focus,.bk-field textarea:focus{outline:0;border-color:var(--jade-deep);box-shadow:0 0 0 1px var(--jade-deep)}
.bk-field.is-bad input,.bk-field.is-bad select{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
.full{grid-column:1/-1}
fieldset.bk-menu{margin:0;padding:0;border:0}
fieldset.bk-menu legend{padding:0;margin-bottom:4px}
fieldset.bk-menu .bk-hint{margin:0 0 6px;letter-spacing:0;text-transform:none}
.bk-radio,.bk-check{display:flex;align-items:flex-start;gap:12px;padding:8px 0;font:400 15.5px/1.5 var(--text);letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
html[lang="th"] .bk-radio,html[lang="th"] .bk-check{font-family:var(--thai)}
.bk-radio input,.bk-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--jade-deep);flex:none}

.bk-private{margin:4px 0 0}
.bk-private a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--hair)}
.bk-private a:hover{text-decoration-color:var(--jade-deep)}
.bk-ts{margin:28px 0 12px;min-height:0}
.bk-err{margin:0 0 16px;padding:12px 0 12px 16px;border-left:2px solid var(--error);color:var(--error);font-size:15px}
.bk-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 32px;border:1px solid var(--jade-deep);border-radius:999px;background:var(--jade-deep);font:500 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);text-decoration:none;cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
html[lang="th"] .bk-btn{font:500 15px/1 var(--thai);letter-spacing:0;text-transform:none}
.bk-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--stone)}
.bk-btn:active{transform:translateY(1px)}
.bk-btn[aria-busy="true"]{opacity:.7;cursor:progress}
.bk-btn--ink{background:var(--ink);border-color:var(--ink)}
.bk-btn--ink:hover{background:var(--jade-deep);border-color:var(--jade-deep)}
.bk-btn--line{background:transparent;border-color:var(--ink-2);color:var(--ink)}
.bk-btn--line:hover{background:var(--ink);border-color:var(--ink);color:var(--stone)}
.bk-linkish{background:none;border:0;padding:0;font:500 14px/1.4 var(--label);color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
html[lang="th"] .bk-linkish{font-family:var(--thai)}
.bk-small{margin:20px 0 0;font-size:14px;color:var(--ink-2)}
.bk-small a{text-underline-offset:4px;text-decoration-color:var(--hair)}
.bk-small a:hover{text-decoration-color:var(--jade-deep)}

/* ---- the confirmation and the manage page ---- */
.bk-done .bk-lede{margin-bottom:clamp(28px,calc(40 * var(--u)),52px)}
.bk-card{display:grid;grid-template-columns:max-content 1fr;gap:14px 24px;margin:clamp(28px,calc(40 * var(--u)),52px) 0 28px;padding:clamp(22px,calc(32 * var(--u)),40px);background:var(--band);font-size:16px}
.bk-done .bk-card{margin-top:0}
.bk-card dt{padding-top:.35em;font:500 11px/1.6 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
html[lang="th"] .bk-card dt{letter-spacing:0;text-transform:none;font:500 14px/1.6 var(--thai)}
.bk-card dd{margin:0}
.bk-card dd b{font:400 24px/1.25 var(--serif);color:var(--jade-deep)}
.bk-mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.04em}
.bk-status{display:inline-block;margin:clamp(20px,calc(28 * var(--u)),36px) 0 0;padding:8px 14px;border-radius:999px;background:var(--band);font:500 11.5px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
html[lang="th"] .bk-status{font:500 14px/1 var(--thai);letter-spacing:0;text-transform:none}
.bk-status--confirmed,.bk-status--arrived{background:var(--jade-deep);color:var(--stone)}
.bk-status--cancelled,.bk-status--declined,.bk-status--no_show{color:var(--ink-2)}
.bk-change summary{list-style:none;cursor:pointer;margin-bottom:24px}
.bk-change summary::-webkit-details-marker{display:none}
.bk-cancel{margin-top:14px}
.bk-confirm{margin-top:14px;padding:20px;background:var(--band)}
.bk-confirm p{margin:0 0 14px}
.bk-msg{margin:20px 0 0;padding:12px 0 12px 16px;border-left:2px solid var(--jade-deep);color:var(--jade-deep);font-size:15px}
.bk-actions{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0}

/* the privacy notice */
.bk-prose>p{max-width:36em;margin:0 0 18px;font:400 clamp(16px,calc(17 * var(--u)),19px)/1.7 var(--text)}
html[lang="th"] .bk-prose>p{font-family:var(--thai);line-height:1.85}
.bk-prose .bk-head{margin-bottom:clamp(28px,calc(40 * var(--u)),52px)}
.bk-prose>p.bk-small{font-size:13.5px;color:var(--ink-2)}
.bk-nb{white-space:nowrap}

/* ---- the website's footer, on Dark ---- */
.bk-foot{background:var(--dark);color:var(--on-dark)}
.bk-foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(24px,calc(40 * var(--u)),56px);max-width:1440px;margin:0 auto;padding:clamp(36px,calc(48 * var(--u)),60px) var(--gutter)}
.bk-foot-mark img{display:block;height:24px;width:auto}
.bk-foot-line{margin:0;font:500 11.5px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.bk-foot-addr{margin:0;font:400 14px/1.6 var(--text);color:var(--on-dark-2)}
html[lang="th"] .bk-foot-addr{font-family:var(--thai)}
.bk-foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 0 auto;font:400 14px/1.6 var(--text)}
html[lang="th"] .bk-foot-links{font-family:var(--thai)}
.bk-foot-links a{color:var(--on-dark);text-decoration:none;border-bottom:1px solid var(--hair-dark);transition:border-color .3s var(--ease)}
.bk-foot-links a:hover{border-bottom-color:var(--lime)}
.bk-foot :focus-visible{outline-color:var(--lime)}

@media (max-width:899px){
  .bk-bar{height:64px;padding:0 20px;gap:10px}
  .bk-mark img{height:24px}
  .bk-nav{display:none}
  .bk-lang{margin-left:auto}
  .bk-foot-links{margin-left:0}
}
@media (max-width:600px){
  .bk-grid{grid-template-columns:1fr}
  .bk-times{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  .bk-facts div{grid-template-columns:6.5em 1fr}
  .bk-card{grid-template-columns:1fr;gap:4px}
  .bk-card dd{margin-bottom:10px}
  .bk-btn[data-submit]{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}