/* ═══════════════════════════════════════════════════════════════════════════
   Homme

   One idea holds the whole surface together: DARK TO ENTER, PAPER TO WORK.
   You sign in from the lamplit room — the same room the front page is set in
   — and once you are through, you are at the lit paper, which is where the
   work of a tax practice has always actually happened.

   Type carries the identity: Newsreader for anything that names a thing, IBM
   Plex Mono for every micro-cap and every figure, a system sans for prose.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* paper — the working world */
  --paper:#faf7ef; --card:#fffdf7; --sunk:#f2eee3;
  --ink:#16160f; --ink-2:#5c594d; --ink-3:#8e8b7c;
  --rule:#e5dfd0; --rule-2:#efeadd;
  --leaf:#1a5636; --leaf-wash:#e8f0ea;
  --stamp:#b0472f; --stamp-wash:#f7e9e4;
  --lamp:#f0d9a8;
  --lift:0 1px 2px rgba(22,22,15,.04), 0 12px 30px -22px rgba(22,22,15,.35);
  --serif:Newsreader,"Iowan Old Style",Palatino,Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:ui-sans-serif,-apple-system,"SF Pro Text",Segoe UI,Roboto,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#12130e; --card:#191b14; --sunk:#15170f;
    --ink:#efece1; --ink-2:#a09d8e; --ink-3:#6f6d60;
    --rule:#282a20; --rule-2:#1f2119;
    --leaf:#79c99f; --leaf-wash:#16221a;
    --stamp:#e08067; --stamp-wash:#241713;
    --lift:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -22px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--paper); color:var(--ink);
  font:15.5px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%}
a{color:var(--leaf)} a:hover{text-decoration:underline}
h1,h2,h3{margin:0}
.muted{color:var(--ink-2)} .small{font-size:.85rem}
.pad{padding:1.25rem}
.center{max-width:44rem; margin:0 auto; text-align:center; padding-top:4rem}
.narrow{max-width:24rem}

/* micro-caps: the one typographic move used on every surface */
.eyebrow,.grp,.num,.tree .group,table.rows th,.stat .k,.pill,.tag,.when,
.mast-note,.bar nav a,button.tiny{
  font-family:var(--mono); letter-spacing:.11em; text-transform:uppercase;
}

/* ── the lamplit room: the front page, and every way in ───────────────── */

body.front,body.signin{
  --void:#080c09; --cream:#f4f1e6; --cream-2:#b9b7a8; --cream-3:#7d7c70;
  background:var(--void); color:var(--cream);
}
.lamp{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 26% at 50% -4%,  rgba(255,240,206,.55), transparent 70%),
    radial-gradient(70% 46% at 50% 2%,   rgba(240,205,142,.40), transparent 72%),
    radial-gradient(110% 62% at 50% 12%, rgba(196,150,86,.22),  transparent 74%),
    radial-gradient(120% 80% at 50% 40%, rgba(52,140,95,.20),   transparent 72%),
    radial-gradient(140% 100% at 50% 100%, rgba(10,20,14,.85),  transparent 60%),
    linear-gradient(to bottom,#101a14 0%,#0a1009 55%,var(--void) 100%);
}
.rules{position:fixed; left:0; right:0; bottom:0; height:38vh; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(244,241,230,.085) 0 1px, transparent 1px 9px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.45) 42%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.45) 42%,transparent 100%);
}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-size:.7rem;
  font-weight:500; line-height:1; margin:0 0 1.5rem; color:var(--cream-3)}
.eyebrow i{width:.4rem; height:.4rem; background:var(--lamp); display:inline-block}
.eyebrow.bad i{background:#e08067}
body.front .lede,body.signin .lede{color:var(--cream-2)}
.fineprint{font-size:.82rem; margin:0; color:var(--cream-3)}

.frame{position:relative; z-index:1; max-width:64rem; margin:0 auto; padding:0 2rem}
@media (max-width:560px){ .frame{padding:0 1.15rem} }
.mast{display:flex; align-items:center; justify-content:space-between; padding:1.9rem 0}
.mark{font-family:var(--serif); font-size:1.5rem; font-weight:400; letter-spacing:-.01em;
  color:var(--cream); text-decoration:none}
.mark::after{content:""; display:inline-block; width:.28rem; height:.28rem; border-radius:50%;
  background:var(--lamp); margin-left:.32rem; vertical-align:.42em}
.mark:hover{text-decoration:none}
.mast nav a{font-size:.72rem; font-weight:500; color:var(--cream-2); text-decoration:none;
  transition:color .15s}
.mast nav a:hover{color:var(--cream); text-decoration:none}

.hero{text-align:center; padding:5.5rem 0 4rem; display:grid; justify-items:center}
@media (max-width:640px){ .hero{padding:3.5rem 0 3rem} }
.hero h1,.signin-card h1{font-family:var(--serif); font-weight:300; letter-spacing:-.022em;
  color:var(--cream); text-wrap:balance}
.hero h1{font-size:clamp(3.1rem,7.6vw,5.6rem); line-height:1.02; margin:0 0 1.5rem}
.lede{font-size:1.05rem; line-height:1.6; margin:0 auto; max-width:31rem}

.frontdoor{display:flex; margin:2.4rem auto .85rem; width:min(26rem,100%);
  background:rgba(244,241,230,.06); border:1px solid rgba(244,241,230,.16);
  border-radius:999px; padding:.32rem; gap:.32rem;
  backdrop-filter:blur(8px); transition:border-color .18s, background .18s}
.frontdoor:focus-within{border-color:rgba(244,241,230,.42); background:rgba(244,241,230,.09)}
.frontdoor input[type=email]{flex:1; min-width:0; margin:0; border:0; background:none;
  color:var(--cream); padding:.72rem 1.05rem; font:.97rem var(--sans); border-radius:999px;
  width:auto}
.frontdoor input[type=email]:focus{outline:none}
.frontdoor input::placeholder{color:var(--cream-3)}
.frontdoor button{padding:.72rem 1.5rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--cream); color:var(--void); font:500 .72rem/1 var(--mono);
  letter-spacing:.13em; text-transform:uppercase; transition:transform .12s, background .15s}
.frontdoor button:hover{background:#fff; filter:none}
.frontdoor button:active{transform:translateY(1px)}

/* the way in */
.signin-card{position:relative; z-index:1; max-width:29rem; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:2rem 1.5rem}
.signin-card .mark{margin-bottom:3.25rem}
.signin-card h1{font-size:clamp(2.2rem,5vw,3rem); line-height:1.05; margin:0 0 1rem}
.signin-card .lede{margin:0; text-align:left; max-width:100%}
.signin-card .frontdoor{margin:1.9rem 0 .85rem; width:100%}
.btn{display:inline-block; padding:.72rem 1.5rem; border-radius:999px; background:var(--cream);
  color:var(--void); font:500 .72rem/1 var(--mono); letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; margin:1.5rem 0 .9rem}
.btn:hover{background:#fff; text-decoration:none}

/* ── the working surfaces: lit paper ──────────────────────────────────── */

.bar{display:flex; gap:1rem; align-items:center; padding:.85rem 1.25rem;
  border-bottom:1px solid var(--rule); background:var(--card)}
.bar b{font-family:var(--serif); font-size:1.15rem; font-weight:500; letter-spacing:-.01em}
.bar nav{margin-left:auto}
.bar nav a{margin-left:1rem; font-size:.66rem; font-weight:500; color:var(--ink-3);
  text-decoration:none}
.bar nav a:hover,.bar nav a.on{color:var(--ink); text-decoration:none}
.bar form{margin-left:.75rem}

button{padding:.6rem 1.05rem; border:0; border-radius:.5rem; background:var(--leaf);
  color:#fbfaf5; font:500 .68rem/1 var(--mono); letter-spacing:.11em;
  text-transform:uppercase; cursor:pointer; transition:filter .12s, transform .12s}
button:hover{filter:brightness(1.12)} button:active{transform:translateY(1px)}
button.link{background:none; color:var(--ink-3); padding:.35rem}
button.link:hover{color:var(--ink); filter:none}
button.ghost{background:none; border:1px solid var(--rule); color:var(--ink-2)}
button.ghost:hover{color:var(--ink); filter:none}
button.tiny{padding:.18rem .5rem; font-size:.58rem; background:var(--sunk); color:var(--ink-3);
  margin-left:.45rem; border:1px solid var(--rule)}
button.tiny:hover{color:var(--ink); filter:none}

input[type=email],input[type=text],input[type=number],input[type=date],input[name=body],
select,textarea{
  width:100%; padding:.6rem .75rem; border:1px solid var(--rule); border-radius:.5rem;
  background:var(--card); color:var(--ink); font:15px/1.5 var(--sans)}
textarea{font:13px/1.65 var(--mono); background:var(--sunk)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--leaf); outline-offset:1px}
.newrow{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.5rem 0 1.4rem}
.newrow input,.newrow select{flex:1; min-width:8rem; width:auto}
.newrow button{flex:0}
form.inline{display:inline}
.mt{margin-top:.85rem}

.pill{display:inline-block; padding:.2rem .5rem; border-radius:.3rem; background:var(--sunk);
  border:1px solid var(--rule); font-size:.58rem; font-weight:500; color:var(--ink-2)}

table.rows{width:100%; border-collapse:collapse; font-size:.93rem}
table.rows th{text-align:left; font-size:.58rem; font-weight:500; color:var(--ink-3);
  padding:.8rem 1.25rem; border-bottom:1px solid var(--rule)}
table.rows td{padding:.72rem 1.25rem; border-bottom:1px solid var(--rule-2);
  font-variant-numeric:tabular-nums}
table.rows tr:hover td{background:var(--card)}
table.rows a{font-weight:550; text-decoration:none; color:var(--ink)}
table.rows a:hover{color:var(--leaf)}

.flash{padding:.7rem 1.25rem; font-size:.9rem; border-bottom:1px solid var(--rule)}
.flash.ok{background:var(--leaf-wash); color:var(--leaf)}
.flash.bad{background:var(--stamp-wash); color:var(--stamp)}

/* kustomer: a file tree and a chat, and nothing else */
body.split{display:grid; grid-template-columns:17.5rem 1fr; height:100vh}
@media (max-width:720px){ body.split{grid-template-columns:1fr; grid-template-rows:auto 1fr} }
.tree{border-right:1px solid var(--rule); background:var(--card); overflow:auto; padding:1.1rem 0}
.tree-head{font-family:var(--serif); font-size:1.15rem; font-weight:500; padding:0 1.15rem .7rem}
.tree .group{font-size:.58rem; font-weight:500; color:var(--ink-3); padding:1.05rem 1.15rem .3rem}
.tree ul{list-style:none; margin:0; padding:0}
.tree li{position:relative; padding:.32rem 1.15rem .32rem 2.1rem; font-size:.9rem; line-height:1.4}
.tree li::before{position:absolute; left:1.15rem; top:.32rem}
.tree li.have::before{content:"\2713"; color:var(--leaf); font-weight:700}
.tree li.want::before{content:"\25CB"; color:var(--ink-3)}
.tree li.want{color:var(--ink-2)}
.tree li.na{color:var(--ink-3); opacity:.6}
.tree li.na::before{content:"\2013"}
.tree li a{color:inherit; text-decoration:none}
.tree li a:hover{color:var(--leaf)}
.uploader{padding:1.2rem 1.15rem 0}
.btn.block{display:block; text-align:center; margin:0; background:var(--leaf); color:#fbfaf5;
  border-radius:.5rem; padding:.68rem 1rem}
.btn.block:hover{background:var(--leaf); filter:brightness(1.12)}

.chat{display:flex; flex-direction:column; min-height:0}
.chat-log{flex:1; overflow:auto; padding:1.6rem; display:flex; flex-direction:column; gap:.6rem}
.small-log{max-height:23rem; border:1px solid var(--rule); border-radius:.55rem;
  background:var(--sunk); padding:.9rem; gap:.5rem}
.msg{max-width:33rem; padding:.6rem .85rem; border-radius:.75rem; background:var(--card);
  border:1px solid var(--rule); font-size:.93rem}
.msg p{margin:0 0 .5rem} .msg p:last-child{margin:0}
.msg.me{align-self:flex-end; background:var(--leaf); color:#fbfaf5; border-color:transparent}
.tag{display:block; font-size:.55rem; opacity:.7; margin-top:.35rem}
.composer{display:flex; gap:.5rem; padding:.9rem 1.6rem; border-top:1px solid var(--rule);
  background:var(--card)}
.composer input{margin:0}
.opts{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.55rem}
.opt{padding:.28rem .6rem; font-size:.6rem; background:var(--sunk); color:var(--ink);
  border:1px solid var(--rule)}

/* pro: the case surface */
main.case{display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:1.25rem;
  align-items:start}
@media (max-width:900px){ main.case{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--rule); border-radius:.6rem;
  padding:1.2rem; box-shadow:var(--lift)}
.card.wide{grid-column:1/-1}
.card h2{font-family:var(--serif); font-size:1.2rem; font-weight:500; margin:0 0 .25rem}
ul.check{list-style:none; padding:0; margin:.7rem 0 0}
ul.check li{display:flex; align-items:center; gap:.5rem; padding:.44rem 0;
  border-bottom:1px solid var(--rule-2); font-size:.92rem}
ul.check li:last-child{border-bottom:0}
ul.check .lab{flex:1}
ul.check li.s-received .lab{color:var(--ink-3); text-decoration:line-through}
ul.check li.s-not_applicable .lab{color:var(--ink-3)}
ol.chron{list-style:none; padding:0; margin:.7rem 0 0; max-height:19rem; overflow:auto;
  font-size:.9rem}
ol.chron li{display:flex; gap:.85rem; padding:.36rem 0; border-bottom:1px solid var(--rule-2)}
ol.chron li:last-child{border-bottom:0}
.chron .when{color:var(--ink-3); font-size:.63rem; white-space:nowrap;
  font-variant-numeric:tabular-nums; padding-top:.2rem}

/* hadmin: the instrument */
.headline{padding:1.9rem 0 .4rem}
.figure .n{font-family:var(--serif); font-size:4.2rem; font-weight:400; letter-spacing:-.03em;
  line-height:1; font-variant-numeric:tabular-nums}
.figure .cap{margin-left:.75rem; color:var(--ink-2)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.8rem;
  margin:1.6rem 0}
.stat{background:var(--card); border:1px solid var(--rule); border-radius:.6rem; padding:.95rem}
.stat .k{display:block; font-size:.58rem; font-weight:500; color:var(--ink-3)}
.stat .v{display:block; font-family:var(--serif); font-size:2rem; font-weight:400;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.25}
.stat .s{display:block; font-size:.76rem; color:var(--ink-3)}
main.pad h2{font-family:var(--serif); font-size:1.25rem; font-weight:500; margin:2.2rem 0 .2rem}
.states{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.6rem}

/* ── apex: the panel, playing itself ──────────────────────────────────── */

.stage{padding:1.5rem 0 4.5rem; display:grid; justify-items:center}
.panel{position:relative; width:min(46rem,100%); background:#fbf8f0; color:#16160f;
  border-radius:.8rem; overflow:hidden;
  box-shadow:0 0 0 1px rgba(244,241,230,.09), 0 2px 6px rgba(0,0,0,.35),
             0 50px 90px -45px rgba(0,0,0,.9), 0 0 120px -40px rgba(240,217,168,.28)}
.panel-chrome{display:flex; align-items:center; gap:.35rem; padding:.62rem .8rem;
  border-bottom:1px solid #e3ddcd; background:#f5f1e6}
.panel-chrome i{width:.46rem; height:.46rem; border-radius:50%; background:#cfc8b6}
.panel-chrome span{margin-left:auto; font:.66rem/1 var(--mono); color:#8d8a7c}
.panel-body{position:relative; display:grid; grid-template-columns:11rem 1fr; min-height:19rem}
@media (max-width:520px){ .panel-body{grid-template-columns:8.6rem 1fr; min-height:16rem} }
.panel .tree{border-right:1px solid #e3ddcd; background:none; padding:.8rem 0; font-size:.77rem}
.panel .tree-head{font-family:var(--sans); font-size:.77rem; font-weight:640;
  padding:0 .85rem .45rem}
.grp{font-size:.58rem; font-weight:500; color:#96937f; padding:.7rem .85rem .3rem}
.row{position:relative; padding:.24rem .85rem .24rem 1.75rem; line-height:1.35}
.row::before{position:absolute; left:.85rem; top:.24rem}
.row.have::before{content:"\2713"; color:#1a5636; font-weight:700}
.row.want{color:#8b8878}
.row.want::before{content:"\25CB"; color:#b6b2a0}
.thread{display:flex; flex-direction:column; gap:.45rem; padding:.9rem}
.bub{max-width:86%; padding:.48rem .68rem; border-radius:.65rem; font-size:.79rem;
  line-height:1.45; background:#efeadd}
.bub.me{align-self:flex-end; background:#1a5636; color:#fbf8f0}
.panel .composer{margin-top:auto; border-top:1px solid #e3ddcd; padding:.6rem 0 0;
  background:none; font-size:.76rem; color:#a3a08f; display:block}
.stamp{position:absolute; right:1.1rem; bottom:1.1rem; display:grid; justify-items:center;
  gap:.15rem; padding:.48rem .9rem; border:2.5px solid #c0503a; border-radius:.28rem;
  color:#c0503a; transform:rotate(-8deg); opacity:.9; mix-blend-mode:multiply}
.stamp-top{font-family:var(--serif); font-size:1.1rem; font-weight:400; letter-spacing:.17em;
  text-transform:uppercase; line-height:1}
.stamp-rule{width:100%; height:1.5px; background:currentColor; opacity:.7}
.stamp-sub{font:.53rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase}

@media (prefers-reduced-motion:no-preference){
  .a1,.a2,.a3,.a4,.b1,.b2,.b3,.b4,.b5,.arrives,.stamp{
    animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards}
  .b1{animation-delay:.5s} .a1{animation-delay:.6s} .a2{animation-delay:.7s}
  .a3{animation-delay:.8s} .a4{animation-delay:.85s} .b2{animation-delay:1.1s}
  .b3{animation-delay:1.9s}
  .arrives{animation:land .55s cubic-bezier(.2,.7,.3,1) 2.15s backwards}
  .b4{animation-delay:2.6s} .b5{animation-delay:2.8s}
  .stamp{animation:thump .45s cubic-bezier(.3,1.5,.5,1) 3.3s backwards}
}
@keyframes rise{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
@keyframes land{0%{opacity:0; transform:translateX(-8px)}
  60%{opacity:1; transform:translateX(1px)} 100%{opacity:1; transform:none}}
@keyframes thump{0%{opacity:0; transform:rotate(-22deg) scale(1.5)}
  70%{opacity:.9; transform:rotate(-6deg) scale(.96)}
  100%{opacity:.9; transform:rotate(-8deg) scale(1)}}

.ledger{display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(244,241,230,.14)}
@media (max-width:760px){ .ledger{grid-template-columns:1fr} }
.col{display:grid; align-content:start; gap:.35rem; padding:1.9rem 1.6rem 2.1rem;
  border-right:1px solid rgba(244,241,230,.09)}
.col:last-child{border-right:0}
@media (max-width:760px){ .col{border-right:0; border-bottom:1px solid rgba(244,241,230,.09)}
  .col:last-child{border-bottom:0} }
@media (min-width:761px){ .col:first-child{padding-left:0} .col:last-child{padding-right:0} }
.num{font-size:.64rem; font-weight:500; color:var(--lamp)}
.col b{font-weight:600; font-size:.97rem; color:var(--cream)}
.col span:last-child{color:var(--cream-2); font-size:.89rem; line-height:1.6}
.foot{display:flex; gap:.5rem; padding:2.2rem 0 2.6rem;
  border-top:1px solid rgba(244,241,230,.09); color:var(--cream-3); font-size:.78rem}
.dot{opacity:.5}

@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ── pro: the working chrome ──────────────────────────────────────────── */
.wordmark{font-family:var(--serif); font-size:1.25rem; font-weight:500; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none}
.wordmark span{font-family:var(--mono); font-size:.55rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-left:.4rem; vertical-align:.35em}
.wordmark:hover{text-decoration:none}
.work{max-width:66rem; margin:0 auto; padding:0 0 4rem}
.worktop{display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  padding:2rem 1.25rem 1.1rem}
.worktop h1{font-family:var(--serif); font-size:2rem; font-weight:400; letter-spacing:-.022em}
.over{font-family:var(--mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin:0}
.say{color:var(--ink-2); font-size:.95rem; line-height:1.6; max-width:44rem; margin:0}
.pad-x{padding:0 1.25rem}
.side{font-size:.85rem; color:var(--ink-3); align-self:center}

/* empty state: hands over the next action instead of pointing at another page */
.blank{max-width:34rem; margin:0 auto; padding:6rem 1.5rem 4rem; text-align:left}
.blank h1{font-family:var(--serif); font-size:2.6rem; font-weight:400; letter-spacing:-.025em;
  margin:.5rem 0 .8rem}
.blank .newrow{margin-top:1.6rem}
.blank .say{margin-bottom:0}

/* the cases list: the ball is either with you or it is not */
table.cases td{padding-top:.85rem; padding-bottom:.85rem}
tr.onyou td:first-child{box-shadow:inset 2px 0 0 var(--stamp)}
.pill.hot{background:var(--stamp-wash); border-color:color-mix(in srgb,var(--stamp) 35%,transparent);
  color:var(--stamp)}
td.r,th.r{text-align:right; font-variant-numeric:tabular-nums}
td.soon{color:var(--stamp); font-weight:600}

/* imports */
.importer{background:var(--card); border:1px solid var(--rule); border-radius:.6rem;
  padding:1.2rem 1.3rem}
.importer.live{margin:0 1.25rem; box-shadow:var(--lift)}
.imp-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem}
.imp-head h2{font-family:var(--serif); font-size:1.35rem; font-weight:500}
.imp-head h3{font-family:var(--serif); font-size:1.05rem; font-weight:500}
.importer code{font:.85em var(--mono); background:var(--sunk); padding:.05rem .3rem;
  border-radius:.25rem}
.importer textarea{margin:.9rem 0 .6rem; min-height:11rem}
.imp-actions{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.yearpick{font-family:var(--mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:.5rem; margin-right:.4rem}
.yearpick input{width:5.5rem; padding:.45rem .5rem}
.note{font-size:.8rem; color:var(--ink-3); margin:.75rem 0 0}
.catalog-head{font-family:var(--serif); font-size:1.15rem; font-weight:500;
  padding:2.4rem 1.25rem .2rem; color:var(--ink-2)}
.catalog{display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:.75rem;
  padding:.8rem 1.25rem 0}
.catalog .importer{opacity:.72}
.from{font-family:var(--mono); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 .45rem}
.catalog .say{font-size:.88rem}

/* the case surface */
.casetop{justify-content:space-between; align-items:flex-start}
.casetop h1{font-size:1.85rem}
.casegrid{display:grid; grid-template-columns:1fr 1fr; gap:.85rem; padding:0 1.25rem}
@media (max-width:860px){ .casegrid{grid-template-columns:1fr} }
.casegrid .card.wide{grid-column:1/-1}
.handoff{background:var(--sunk)}
.handoff-out{display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin:1rem 0 .2rem}
.btn-take{display:inline-block; padding:.62rem 1.1rem; border-radius:.5rem; background:var(--ink);
  color:var(--paper); font:500 .68rem/1 var(--mono); letter-spacing:.11em;
  text-transform:uppercase; text-decoration:none; margin:0}
.btn-take:hover{text-decoration:none; filter:brightness(1.25)}
.handoff .note{margin:0}
.handoff textarea{margin:.4rem 0 .7rem}
.composer.flat{padding:.8rem 0 0; background:none; border-top:1px solid var(--rule); margin-top:.85rem}
.card .imp-head{margin-bottom:.35rem}
.card .imp-head h2{font-size:1.2rem}