/* Basetao Spreadsheet - design tokens.
   brand is decoration only: #D47034 on paper measures about 3.4:1, which fails
   AA for text. brand-text carries words instead. Same split is applied inside
   SVG figures, where no linter would catch it. */
:root{
  --paper:#FBFAF8; --ink:#1C1B1A; --ink-soft:#4A4541;
  --brand:#D47034; --brand-text:#A8502A; --brand-wash:#FBEFE6;
  --dest:#2F5D62; --carrier:#5B5752;
  --rule:#D9D3CB; --wash:#F2EDE6;
  --focus:#1C5FA8;
  --measure:68ch;
  /* Width shared by a stacked figure and the prose next to it. Gate 4 compares
     those two, and a 760 figure against a 68ch paragraph is close enough to
     read as one block; the :has() rule below brings the prose up to match. */
  --measure-wide:760px;
  --step:clamp(2.2rem,5vw,3.4rem);
  --z-skip:50; --z-header:30; --z-toggle:20;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#151413; --ink:#F2EEE9; --ink-soft:#C3BBB2;
    --brand:#E08A52; --brand-text:#F0A878; --brand-wash:#2A211B;
    --dest:#8FC3C8; --carrier:#A9A29A;
    --rule:#3A3531; --wash:#1E1C1A;
    --focus:#8FBDF2;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem; line-height:1.65;
  font-synthesis-weight:none;
}
h1,h2,h3,h4{
  font-family:Archivo,'Hanken Grotesk',system-ui,sans-serif;
  font-weight:700; line-height:1.18; letter-spacing:-0.012em;
  margin:0 0 .5em; text-wrap:balance;
}
h1{font-size:clamp(1.9rem,4.2vw,2.8rem)}
h2{font-size:clamp(1.4rem,2.6vw,1.85rem); margin-top:0}
h3{font-size:1.14rem; font-weight:600}
p,ul,ol,table,figure{margin:0 0 1.05em}
p,li{max-width:var(--measure)}
a{color:var(--brand-text); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:2px}
code,kbd,.mono{font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:.92em}
/* Global backstop. Figures carry intrinsic width/height so they are not
   upscaled; without this, a figure in an unclassed slot renders at its natural
   width and pushes a 390px viewport out to 500. */
main svg,main img{max-width:100%}
main svg{width:auto;height:auto}
.ico{max-width:40px;height:auto}

.frame{width:min(1120px,100% - 2.5rem); margin-inline:auto}
@media (max-width:30rem){.frame{width:min(1120px,100% - 1.5rem)}}

.skip{
  position:absolute; left:0; top:0; z-index:var(--z-skip);
  background:var(--ink); color:var(--paper); padding:.7rem 1rem;
  /* clipped, not shoved to -9999px: a negative offset counts toward
     scrollable overflow and makes every page report a horizontal overflow */
  clip-path:inset(50%); white-space:nowrap;
}
.skip:focus{clip-path:none}

/* header */
.top{border-bottom:1px solid var(--rule); background:var(--paper)}
.toprow{display:flex; align-items:center; gap:1rem; min-height:68px}
.brandmark{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit}
.brandmark img{width:34px;height:34px;display:block;flex:0 0 auto}
.brandmark b{font-family:Archivo,sans-serif; font-size:1.02rem; font-weight:700; letter-spacing:-.01em}
.brandmark span{display:block; font-size:.76rem; color:var(--ink-soft); font-weight:400}
.mainnav{margin-left:auto}
.mainnav ul{display:flex; gap:.15rem; list-style:none; margin:0; padding:0; flex-wrap:nowrap}
.mainnav a{
  display:block; padding:.72rem .6rem; min-height:44px; line-height:1.6;
  text-decoration:none; color:var(--ink); font-size:.925rem; border-radius:4px;
}
.mainnav a:hover{background:var(--wash)}
.mainnav a[aria-current="page"]{color:var(--brand-text); box-shadow:inset 0 -2px 0 var(--brand)}
.navtoggle{display:none}
@media (max-width:62rem){
  .navtoggle{
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:auto; min-width:44px; min-height:44px; padding:.5rem .8rem;
    background:none; border:1px solid var(--rule); border-radius:5px;
    color:var(--ink); font:inherit; font-size:.9rem; cursor:pointer;
  }
  .mainnav{
    margin-left:0; flex-basis:100%; display:none;
    border-top:1px solid var(--rule); padding:.5rem 0 .8rem;
  }
  .toprow{flex-wrap:wrap}
  .mainnav[data-open="true"]{display:block}
  .mainnav ul{flex-wrap:wrap; gap:.1rem}
  .mainnav a{padding:.72rem .55rem}
}

/* opening (first screen) */
.opening{padding:var(--step) 0 1.6rem; border-bottom:1px solid var(--rule)}
.opening .lede{font-size:1.16rem; color:var(--ink-soft); max-width:62ch; margin-bottom:1.5rem}
.openwrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:2.2rem; align-items:start}
@media (max-width:60rem){.openwrap{grid-template-columns:minmax(0,1fr)}}
.openfig{margin:0}
.openfig svg{width:100%;height:auto;background:var(--paper);border:1px solid var(--rule);border-radius:6px}
.openfig figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:.5rem}

/* the search form is the hero's main component: it sits directly under the
   lede, and nothing button-like is allowed to precede it */
.find{margin:0 0 1.1rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:stretch}
.find label{flex:1 0 100%; font-weight:600; font-size:.95rem; margin-bottom:.1rem}
.find input[type=search]{
  flex:1 1 20rem; min-width:0; min-height:52px; padding:.8rem .9rem;
  font:inherit; font-size:1.02rem; color:var(--ink); background:var(--paper);
  border:2px solid var(--ink); border-radius:6px;
}
.find button{
  min-height:52px; padding:.8rem 1.4rem; font:inherit; font-weight:700; font-size:1.02rem;
  color:#fff; background:var(--brand-text); border:2px solid var(--brand-text);
  border-radius:6px; cursor:pointer;
}
.find button:hover{background:var(--ink); border-color:var(--ink)}
.find .hint{flex:1 0 100%; font-size:.86rem; color:var(--ink-soft); margin:.1rem 0 0}

/* narrow strip for secondary links, so they never compete with the search box */
.subnav{display:flex; flex-wrap:wrap; gap:.1rem 1.1rem; padding:.2rem 0 0; margin:0; list-style:none}
.subnav li{margin:0}
/* Short labels fail the touch target on width, not height. A min-height alone
   leaves "Help" about 30px wide, so these need a min-width and centring too. */
.subnav a{
  font-size:.9rem; display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .35rem; min-height:44px; min-width:44px; line-height:1.3;
}
/* A paragraph whose entire content is one link is a block target, not an inline
   one, so it needs the full 44px. Marked explicitly: `p > a:only-child` would
   also match a link that is the only element in a sentence full of text. */
.morelink{margin:0}
.morelink a{
  display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  padding:.35rem 0;
}

/* blocks */
.block{padding:var(--step) 0; border-bottom:1px solid var(--rule)}
.block:last-of-type{border-bottom:0}
.tag{
  font-family:'Spline Sans Mono',monospace; font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--carrier); margin:0 0 .5rem;
}

/* duo: text and figure side by side. Tops and heights are aligned by the grid
   rather than by per-block pixel tweaks. */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:2rem; align-items:stretch}
.duo[data-layout=b]{grid-template-columns:minmax(0,480px) minmax(0,1fr)}
.duo[data-layout=b] .duo-text{order:2}
.duo[data-layout=b] .duo-fig{order:1}
.duo-text>:last-child{margin-bottom:0}
.duo-fig{margin:0; align-self:stretch; display:flex; flex-direction:column}
.duo-fig svg{width:100%; height:auto; border:1px solid var(--rule); border-radius:6px; background:var(--paper)}
/* contain, not cover. The alignment gate's suggested recipe is
   height:100% + object-fit:cover, which is right for photography and wrong
   here: these figures carry text, and cover crops it off at the edges. contain
   keeps the figure box the same height as the text column (so the gate is still
   satisfied) while showing the whole image. The slack is invisible because the
   figure's own background is the page colour. */
.duo-fig img{
  width:100%; height:100%; object-fit:contain; object-position:center top;
  border:1px solid var(--rule); border-radius:6px; background:var(--paper);
}
.duo-fig figcaption{font-size:.82rem; color:var(--ink-soft); margin-top:.5rem}
@media (max-width:60rem){
  .duo,.duo[data-layout=b]{grid-template-columns:minmax(0,1fr)}
  .duo[data-layout=b] .duo-text,.duo[data-layout=b] .duo-fig{order:0}
}
/* A stacked figure is compared against the text block beside it, so it shares
   the prose measure instead of running full bleed. Capped at its own intrinsic
   width too, because upscaling a raster is what makes it look cheap. */
.wide-fig{margin:0 0 1.2rem; max-width:var(--measure-wide)}
/* Bring the prose in a block that stacks a wide figure up to the same width.
   Degrades safely: without :has() the paragraph stays at 68ch, which is still
   inside the alignment tolerance. */
.block:has(.wide-fig) > .frame > p,
.block:has(.wide-fig) > .frame > ul,
.block:has(.wide-fig) > .frame > ol,
.block:has(.wide-fig) > .frame > .faq{max-width:var(--measure-wide)}
.block:has(.wide-fig) > .frame > p > *{max-width:none}
.wide-fig img{width:100%;height:auto;border:1px solid var(--rule);border-radius:6px;background:var(--paper)}
.wide-fig figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:.5rem; max-width:68ch}
/* Text screenshots are capped at their intrinsic width and scroll inside their
   own box on narrow screens, rather than being scaled down until the words in
   the picture stop being readable. */
.shot{margin:0 0 1.2rem; max-width:100%; overflow-x:auto}
.shot img{display:block; height:auto; border:1px solid var(--rule); border-radius:6px}
.shot figcaption{font-size:.82rem; color:var(--ink-soft); margin-top:.5rem}

/* end marks: colour, shape and a two-letter code, never colour alone */
.endmark{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'Spline Sans Mono',monospace; font-size:.78rem; font-weight:600;
  white-space:nowrap; text-decoration:none; border-bottom:0;
}
.endmark::before{content:""; width:.72rem; height:.72rem; flex:0 0 auto}
.endmark-cn{color:var(--brand-text)}
.endmark-cn::before{background:currentColor}
.endmark-ca{color:var(--carrier)}
.endmark-ca::before{border:2px solid currentColor}
.endmark-dest{color:var(--dest)}
.endmark-dest::before{background:currentColor; clip-path:polygon(0 0,100% 0,100% 65%,65% 100%,0 100%)}
.endmark abbr{text-decoration:none; border-bottom:1px dotted currentColor; cursor:help}
.endlegend{display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; padding:.9rem 1rem; margin:0 0 1.2rem;
  border:1px solid var(--rule); border-radius:6px; background:var(--wash); list-style:none}
.endlegend li{margin:0; max-width:none; font-size:.9rem}
.endlegend .endmark{margin-right:.4rem}

/* clause rows: one official rule, quoted, with the end that owns it */
.clauses{list-style:none; margin:0 0 1.2rem; padding:0; border-top:1px solid var(--rule)}
.clause{margin:0; max-width:none; padding:.95rem 0; border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:.3rem 1.2rem}
.clause-end{grid-row:span 2}
.clause-head{font-weight:600}
.clause-quote{font-family:'Spline Sans Mono',monospace; font-size:.9rem; color:var(--ink-soft);
  border-left:2px solid var(--rule); padding-left:.8rem; margin:.35rem 0 .35rem}
.clause-src{font-size:.82rem; color:var(--ink-soft); margin:0}
@media (max-width:40rem){
  .clause{grid-template-columns:minmax(0,1fr)}
  .clause-end{grid-row:auto}
}

/* facing: what the page says, next to who actually decides */
.facing{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0 0 1.2rem;
  border:1px solid var(--rule); border-radius:6px; overflow:hidden}
.facing>div{padding:1.1rem 1.15rem}
.facing-official{background:var(--wash); border-right:1px solid var(--rule)}
.facing h3{margin-bottom:.4rem; font-size:.95rem; text-transform:uppercase;
  letter-spacing:.05em; font-family:'Spline Sans Mono',monospace; color:var(--carrier)}
.facing blockquote{margin:0 0 .6rem; font-family:'Spline Sans Mono',monospace; font-size:.9rem}
.facing p:last-child{margin-bottom:0}
@media (max-width:48rem){
  .facing{grid-template-columns:minmax(0,1fr)}
  .facing-official{border-right:0; border-bottom:1px solid var(--rule)}
}

/* lane: the three-segment route bar. An ordered list, so the reading order is
   the route order even without the visual treatment. */
.lane{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem;
  list-style:none; margin:0 0 1.3rem; padding:0; counter-reset:lane}
.lane li{margin:0; max-width:none; padding:1rem 1.05rem; border:1px solid var(--rule);
  border-radius:6px; background:var(--paper)}
.lane .lane-stop{border-color:var(--dest); background:var(--brand-wash)}
.lane h3{font-size:1rem; margin-bottom:.3rem}
.lane p{font-size:.9rem; color:var(--ink-soft); margin:0}
.lane-state{display:inline-block; margin-top:.55rem; font-family:'Spline Sans Mono',monospace;
  font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em}
@media (max-width:52rem){.lane{grid-template-columns:minmax(0,1fr)}}

/* tiles: the 16 category entries, one group, no narrative wedged between them */
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem;
  list-style:none; margin:0 0 1.2rem; padding:0}
.tiles li{margin:0; max-width:none}
.tile{display:flex; flex-direction:column; gap:.45rem; height:100%;
  padding:.95rem 1rem 1.05rem; border:1px solid var(--rule); border-radius:7px;
  background:var(--paper); text-decoration:none; color:inherit; min-height:44px}
.tile:hover{border-color:var(--brand-text); background:var(--brand-wash)}
.tile svg{width:38px;height:38px;color:var(--brand)}
.tile b{font-family:Archivo,sans-serif; font-size:1rem; font-weight:700}
.tile span{font-size:.86rem; color:var(--ink-soft)}
.tile .dest-badge{font-family:'Spline Sans Mono',monospace; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--carrier); margin-top:auto}
@media (max-width:62rem){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:46rem){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* brief: the home page's module summaries */
.brief{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 2rem; margin:0}
.brief>div{min-width:0}
.brief h3{margin-bottom:.3rem}
.brief p{margin-bottom:.4rem}
@media (max-width:52rem){.brief{grid-template-columns:minmax(0,1fr)}}

/* actions */
.act{display:inline-flex; align-items:center; min-height:44px; padding:.6rem 1.1rem;
  border-radius:6px; text-decoration:none; font-weight:600}
.act-main{background:var(--brand-text); border:2px solid var(--brand-text); color:#fff}
.act-main:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.act-quiet{border:1px solid var(--rule); color:var(--ink)}
.act-quiet:hover{border-color:var(--ink); color:var(--ink)}
.actrow{display:flex; flex-wrap:wrap; gap:.7rem; margin:0 0 1rem}

/* tables degrade to cards on narrow screens */
/* Tables share the wide measure rather than running full bleed, so a table and
   a figure stacked in the same block line up on both edges. */
.sheet{width:100%; max-width:var(--measure-wide); border-collapse:collapse; margin:0 0 1.2rem; font-size:.95rem}
.sheet th,.sheet td{text-align:left; padding:.65rem .7rem; border-bottom:1px solid var(--rule); vertical-align:top}
.sheet th{font-family:Archivo,sans-serif; font-size:.88rem; background:var(--wash)}
.sheet caption{text-align:left; font-size:.86rem; color:var(--ink-soft); padding-bottom:.5rem}
@media (max-width:46rem){
  .sheet,.sheet tbody,.sheet tr,.sheet td{display:block; width:100%}
  .sheet thead{display:none}
  .sheet tr{border:1px solid var(--rule); border-radius:6px; margin-bottom:.8rem; padding:.3rem .6rem}
  .sheet td{border-bottom:1px solid var(--rule); padding:.55rem .1rem}
  .sheet tr td:last-child{border-bottom:0}
  .sheet td::before{content:attr(data-label); display:block; font-family:Archivo,sans-serif;
    font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--carrier)}
}

/* FAQ as a definition list rather than headings. The question form belongs to
   this pattern, and keeping it out of h2/h3 means the no-question-headings rule
   needs no exceptions. */
.faq{margin:0 0 1.2rem; border-top:1px solid var(--rule)}
.faq dt{
  font-family:Archivo,sans-serif; font-weight:700; font-size:1.08rem;
  line-height:1.3; padding:1rem 0 .35rem; max-width:var(--measure);
}
.faq dd{margin:0 0 .2rem; padding:0 0 1rem; border-bottom:1px solid var(--rule); max-width:var(--measure)}

.note{border:1px solid var(--rule); border-left:3px solid var(--brand); border-radius:6px;
  background:var(--wash); padding:1rem 1.15rem; margin:0 0 1.2rem}
.note>:last-child{margin-bottom:0}
.note h3{margin-bottom:.35rem}
.srcline{font-size:.84rem; color:var(--ink-soft)}

/* the shipping check tool */
.tool{border:1px solid var(--rule); border-radius:8px; padding:1.2rem 1.25rem; margin:0 0 1.3rem;
  background:var(--wash)}
.tool fieldset{border:0; margin:0 0 1rem; padding:0; min-width:0}
.tool legend{font-family:Archivo,sans-serif; font-weight:700; font-size:1rem; padding:0; margin-bottom:.5rem}
.tool select{min-height:44px; padding:.5rem .6rem; font:inherit; max-width:100%;
  border:1px solid var(--ink); border-radius:5px; background:var(--paper); color:var(--ink)}
.checks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem .9rem;
  list-style:none; margin:0; padding:0}
.checks li{margin:0; max-width:none}
.checks label{display:flex; align-items:center; gap:.45rem; min-height:44px; font-size:.95rem}
.checks input{width:1.1rem; height:1.1rem}
@media (max-width:52rem){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.verdict{border:1px solid var(--rule); border-radius:6px; background:var(--paper); padding:1rem 1.1rem}
.verdict h3{margin-bottom:.4rem}
.verdict dl{margin:0}
.verdict dt{font-family:'Spline Sans Mono',monospace; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--carrier); margin-top:.8rem}
.verdict dd{margin:.2rem 0 0}
.verdict .state{font-family:Archivo,sans-serif; font-weight:700; font-size:1.1rem}
.verdict .state[data-v=blocked]{color:var(--dest)}
.verdict .state[data-v=depends]{color:var(--brand-text)}
.verdict .state[data-v=clear]{color:var(--ink)}
.nojs{font-size:.9rem; color:var(--ink-soft)}

/* footer */
.foot{border-top:1px solid var(--rule); background:var(--wash); margin-top:var(--step);
  padding:var(--step) 0 2rem}
.footcols{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); gap:1.8rem}
@media (max-width:52rem){.footcols{grid-template-columns:minmax(0,1fr)}}
.foot h2{font-size:.9rem; font-family:'Spline Sans Mono',monospace; text-transform:uppercase;
  letter-spacing:.06em; color:var(--carrier); margin-bottom:.6rem}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin:0 0 .35rem}
.foot a{
  display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  padding-right:.4rem; line-height:1.3;
}
.footnote-line{font-size:.88rem; color:var(--ink-soft); margin:1.6rem 0 0; max-width:78ch}

@media (prefers-color-scheme:dark){
  /* In dark mode --brand-text is the LIGHT tone, so white text on it measures
     about 1.99:1. The fill stays; the ink flips. Same for the search button,
     which uses the same pairing. */
  .act-main,.act-main:hover{color:#151413}
  .find button{color:#151413}
  .find button:hover{background:var(--brand-text); border-color:var(--brand-text); color:#151413}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
}