@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url('/fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Noto Serif Devanagari';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('/fonts/notoserifdeva-devanagari.woff2') format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/sourceserif-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---- tokens: mirrored from monorepo/packages/ui/src/tokens.ts ---------
   Light only, as the app is. `orange` is rule/rail only; `orangeText` is
   the text accent (#f5820b fails AA on cream at body size).          ---- */
:root{
  color-scheme:light;
  --page:#f4e9d6;
  --screen:#fdf7ea;
  --ink:#2e2117;
  --ink-soft:#6b5645;
  --orange:#f5820b;
  --orange-text:#a6520a;
  --orange-hover:#8e4508;
  --rule:rgba(46,33,23,0.22);
  --rule-soft:rgba(46,33,23,0.11);
  --flag:#8c2f14;
  --flag-bg:#f7e4dc;

  --display:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --deva:'Noto Serif Devanagari','Nirmala UI',serif;

  --s-2:0.75rem;
  --s-1:0.875rem;
  --s0:1.0625rem;
  --s1:1.25rem;
  --s2:1.5rem;
  --s3:clamp(1.9rem,5.5vw,2.9rem);

  --measure:44rem;
  --gutter:6.5rem;
  --gutter-gap:1.75rem;
  --pad:clamp(1.25rem,5vw,2rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--s0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:0.5rem;z-index:10;background:var(--ink);color:var(--page);padding:0.5rem 0.75rem}

a{color:var(--orange-text);text-underline-offset:0.16em;text-decoration-thickness:from-font}
a:hover{color:var(--orange-hover);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--orange-text);outline-offset:3px}

.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--pad)}

/* ---- masthead -------------------------------------------------------- */
.nav{border-bottom:1px solid var(--ink)}
.nav .wrap{display:flex;flex-wrap:wrap;gap:0.35rem 1.25rem;align-items:baseline;padding-block:0.9rem}
.mark{
  font-family:var(--display);
  font-weight:700;
  font-stretch:118%;
  font-size:var(--s1);
  letter-spacing:0.005em;
  color:var(--ink);
  text-decoration:none;
  margin-right:auto;
}
.nav a:not(.mark){
  font-family:var(--display);
  font-size:var(--s-1);
  font-weight:500;
  font-stretch:104%;
  color:var(--ink-soft);
  text-decoration:none;
  padding-block:0.15rem;
}
.nav a:not(.mark):hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--orange)}
@media (max-width:30rem){
  .nav .wrap{padding-block:0.8rem}
  .mark{flex:0 0 100%;margin-right:0;margin-bottom:0.55rem}
  .nav a:not(.mark){font-size:var(--s-2)}
  .nav .wrap{gap:0 1rem}
}

/* ---- type ------------------------------------------------------------ */
main{padding-block:clamp(2.25rem,7vw,3.75rem) 3rem}
h1{
  font-family:var(--display);
  font-size:var(--s3);
  font-weight:700;
  font-stretch:116%;
  line-height:1.04;
  letter-spacing:-0.005em;
  margin:0 0 1.75rem;
  max-width:16ch;
  text-wrap:balance;
}
h2{
  font-family:var(--display);
  font-size:var(--s2);
  font-weight:600;
  font-stretch:112%;
  line-height:1.2;
  margin:3rem 0 0.85rem;
  text-wrap:balance;
}
h3{font-family:var(--display);font-size:var(--s1);font-weight:600;font-stretch:108%;margin:2rem 0 0.5rem}
p{margin:0 0 1.05rem;max-width:38rem}
.lede{font-size:var(--s1);line-height:1.5}
ul,ol{margin:0 0 1.05rem;padding-left:1.2rem;max-width:38rem}
li{margin-bottom:0.45rem}
strong{font-weight:600}

/* ---- signature: the exchange ----------------------------------------
   No card. Attributions hang in the left margin, turns are separated by
   hairlines. The only tinted surface on the page is the bill, because the
   bill is the one thing that is literally a screen.                 ---- */
.exchange{margin:0 0 1rem;border-top:1px solid var(--ink)}
.turn{
  display:grid;
  grid-template-columns:1fr;
  gap:0.15rem var(--gutter-gap);
  padding-block:1.15rem;
  border-bottom:1px solid var(--rule-soft);
}
.turn:last-child{border-bottom:1px solid var(--ink)}
.who{
  font-family:var(--body);
  font-style:italic;
  font-size:var(--s-1);
  color:var(--ink-soft);
  margin:0;
  line-height:1.4;
}
.what{min-width:0}
.what > :last-child{margin-bottom:0}
.utterance{font-size:var(--s1);line-height:1.5;margin:0;max-width:34rem;text-wrap:pretty}
.deva{font-family:var(--deva);font-size:clamp(1.3rem,4.6vw,1.6rem);line-height:1.75;font-weight:500}
.turn-app .utterance{color:var(--ink-soft)}
.placed{
  font-family:var(--display);
  font-weight:700;
  font-stretch:112%;
  font-size:var(--s1);
  color:var(--orange-text);
  margin:0;
}

@media (min-width:64rem){
  .exchange{margin-left:calc(-1 * (var(--gutter) + var(--gutter-gap)))}
  .turn{grid-template-columns:var(--gutter) 1fr}
  .who{text-align:right;padding-top:0.3rem}
}

/* ---- the bill -------------------------------------------------------- */
.bill{
  width:100%;
  max-width:20.5rem;
  margin:1rem 0 0;
  border-collapse:collapse;
  background:var(--screen);
  border:1px solid var(--rule-soft);
  font-variant-numeric:tabular-nums lining-nums;
  font-size:var(--s-1);
  text-align:left;
}
.bill caption{
  font-family:var(--body);
  font-style:italic;
  font-size:var(--s-1);
  color:var(--ink-soft);
  text-align:left;
  padding:0 0 0.4rem;
}
.bill th,.bill td{padding:0.5rem 0.85rem;font-weight:400;border-bottom:1px solid var(--rule-soft)}
.bill th{font-family:var(--deva);font-size:1.0625rem;line-height:1.6;font-weight:500}
.bill .qty{color:var(--ink-soft);white-space:nowrap;width:1%;text-align:right;padding-inline:0.35rem}
.bill .amt{text-align:right;white-space:nowrap;width:1%}
.bill tr:last-child th,.bill tr:last-child td{border-bottom:0}
.bill .sum th,.bill .sum td{border-top:1px solid var(--ink);padding-top:0.7rem;padding-bottom:0.7rem}
.bill .sum th{font-family:var(--display);font-stretch:110%;font-weight:600;font-size:var(--s-1)}
.bill .sum .amt{font-family:var(--body);font-size:var(--s2);font-weight:600;line-height:1}

.note{
  font-family:var(--body);
  font-style:italic;
  font-size:var(--s-1);
  color:var(--ink-soft);
  margin:0.9rem 0 2rem;
  max-width:34rem;
}

/* ---- status ---------------------------------------------------------- */
.facts{margin:0 0 1.25rem;border-top:1px solid var(--ink)}
.facts div{
  display:grid;
  grid-template-columns:1fr;
  gap:0.15rem var(--gutter-gap);
  padding-block:0.85rem;
  border-bottom:1px solid var(--rule-soft);
}
.facts dt{
  font-family:var(--display);
  font-size:var(--s-2);
  font-weight:600;
  font-stretch:110%;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:0.2rem;
}
.facts dd{margin:0;max-width:34rem}
@media (min-width:48rem){.facts div{grid-template-columns:9rem 1fr}}

/* ---- placeholders ---------------------------------------------------- */
.todo{
  font-family:var(--display);
  font-size:0.88em;
  font-weight:600;
  font-stretch:100%;
  color:var(--flag);
  background:var(--flag-bg);
  padding:0.05em 0.35em;
  overflow-wrap:break-word;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ---- colophon -------------------------------------------------------- */
.foot{border-top:1px solid var(--ink);margin-top:3.5rem}
.foot .wrap{padding-block:1.5rem 2.5rem}
.foot p{font-size:var(--s-1);color:var(--ink-soft);margin:0 0 0.35rem;line-height:1.55;max-width:38rem}
.foot nav{display:flex;flex-wrap:wrap;gap:0.35rem 1.15rem;margin-bottom:0.85rem}
.foot nav a{font-family:var(--display);font-size:var(--s-1);font-weight:500;font-stretch:104%;color:var(--ink-soft);text-decoration:none}
.foot nav a:hover{color:var(--orange-hover);text-decoration:underline}

/* ---- legal ----------------------------------------------------------- */
.doc h2{font-size:var(--s1);font-stretch:108%;margin-top:2.5rem}
.doc .updated{font-family:var(--display);font-size:var(--s-1);font-stretch:104%;color:var(--ink-soft);margin-bottom:2rem}