/* ── StudioJson · the ledger ───────────────────────────────────
   One sheet, two columns. The left rail is identity and the one
   quiet route to the required disclosures; the right column is a
   register of work. Adding a product means adding a row — that is
   the whole reason this layout was chosen over a hero and cards.

   Every colour is a token so the dark theme is a token swap and
   nothing else. Nothing below sets a colour outside :root.
   ────────────────────────────────────────────────────────────── */

:root{
  --paper:#F6F6F3;
  --ink:#15171A;
  --ink2:#4A4E55;
  /* Measured, not eyeballed. The register's column heads and the
     Legal link sit at 9.5–10px, so none of them qualify for the
     large-text allowance — #7E838B came in at 3.5:1 on this paper.
     This value clears 4.6:1. */
  --faint:#6B7078;
  --rule:#DCDCD5;
  --stamp:#1F3FD1;
  --wash:rgb(31 63 209 / .05);

  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#131416;
    --ink:#E8E9EA;
    --ink2:#A9ADB3;
    --faint:#7E838B;   /* 4.9:1 on the dark ground */
    --rule:#26282C;
    --stamp:#7E9BFF;
    --wash:rgb(126 155 255 / .07);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:clamp(34px,6vw,76px) clamp(24px,5vw,64px) clamp(28px,4vw,48px);
}
img{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--stamp);outline-offset:3px;border-radius:2px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── the sheet ─────────────────────────────────────────────── */
.sheet{
  display:grid;
  grid-template-columns:minmax(180px,215px) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);
  max-width:1000px;
  margin:0 auto;
}
.rail{display:flex;flex-direction:column}

.mark{
  font-family:var(--display);font-weight:800;
  font-size:clamp(23px,2.3vw,28px);letter-spacing:-.035em;line-height:1;
  margin:0;text-decoration:none;color:inherit;display:inline-block;align-self:flex-start;
}
.mark b{color:var(--stamp);font-weight:800}

.rail-blk{margin-top:26px}
.lab{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin:0 0 6px;
}
.rail-blk p{
  margin:0;font-family:var(--mono);font-size:12px;color:var(--ink2);
  font-variant-numeric:tabular-nums;
}
.mail{
  font-family:var(--mono);font-size:12.5px;color:var(--stamp);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--stamp) 35%,transparent);padding-bottom:1px;
}
.mail:hover{border-bottom-color:var(--stamp)}

/* Bottom of the rail. Findable, never in the way. */
.tuck{margin-top:auto;padding-top:38px}
.tuck a{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .16s,border-color .16s;
}
.tuck a:hover{color:var(--stamp);border-bottom-color:color-mix(in srgb,var(--stamp) 40%,transparent)}

/* ── statement ─────────────────────────────────────────────── */
.lede{
  margin:0;font-family:var(--body);font-weight:400;
  font-size:clamp(21px,2.5vw,29px);line-height:1.4;letter-spacing:-.012em;
  max-width:22ch;text-wrap:balance;
}
.lede i{font-style:italic;color:var(--stamp)}
.lede-sub{
  margin:16px 0 clamp(30px,4vw,48px);font-size:15.5px;line-height:1.6;
  color:var(--ink2);max-width:46ch;
}

/* ── the register ──────────────────────────────────────────── */
.reg{border-top:1.5px solid var(--ink)}
.rh,.row{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.95fr) 92px 72px;
  gap:16px;align-items:baseline;
}
.rh{padding:8px 0;border-bottom:1px solid var(--rule)}
.rh span{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);
}
.row{
  padding:19px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:background .16s,padding .16s,margin .16s;
}
a.row:hover{
  background:var(--wash);
  padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px;
}

.nm{display:block;line-height:1.2}
.nm .t{
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px;
}
/* Hierarchy carried by the mark, not by colour: a filled dot is the
   work being pushed, a hollow one is kept and maintained, an outline
   is not out yet. Faro stays quiet without looking like an afterthought. */
.nm .t::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--stamp);flex:0 0 auto}
.nm .k{
  display:block;margin:5px 0 0 15px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.row.quiet .nm .t{color:var(--ink2);font-weight:700;font-size:18px}
.row.quiet .nm .t::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}
.row.open .nm .t{color:var(--faint);font-weight:700}
.row.open .nm .t::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--rule)}

.ds{font-size:16px;color:var(--ink2);line-height:1.45}
.row.open .ds{color:var(--faint);font-style:italic}
.st,.yr{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink2);font-variant-numeric:tabular-nums;
}
.yr{text-align:right;color:var(--faint)}
.arrow{
  display:inline-block;font-family:var(--mono);font-size:13px;color:var(--stamp);
  opacity:0;transform:translateX(-4px);transition:opacity .16s,transform .16s;
}
a.row:hover .arrow,a.row:focus-visible .arrow{opacity:1;transform:translateX(0)}

/* ── footer — the name and the year, nothing else ──────────── */
.foot{
  margin-top:clamp(26px,4vw,42px);padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);display:flex;justify-content:space-between;gap:12px;
}

/* ── /legal ────────────────────────────────────────────────── */
.back{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);text-decoration:none;display:inline-block;margin-top:26px;
  align-self:flex-start;transition:color .16s;
}
.back:hover{color:var(--stamp)}
.ph{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(24px,2.6vw,30px);letter-spacing:-.03em;line-height:1.1;
}
.ph-sub{margin:12px 0 clamp(28px,3.6vw,42px);font-size:15.5px;color:var(--ink2);max-width:46ch}
.info{
  margin:0;border-top:1.5px solid var(--ink);
  display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr);
}
.ph + .info{margin-top:clamp(28px,3.6vw,42px)}
.info dt,.info dd{padding:15px 0;border-bottom:1px solid var(--rule);margin:0}
.info dt{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);padding-top:18px;
}
.info dd{
  font-family:var(--mono);font-size:13px;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.6;
}
.info dd a{
  color:var(--stamp);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--stamp) 35%,transparent);
}
.info dd a:hover{border-bottom-color:var(--stamp)}

/* ── 404 ───────────────────────────────────────────────────── */
.gone .ph-sub{margin-bottom:0}
.gone .home{
  display:inline-block;margin-top:26px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;color:var(--stamp);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--stamp) 35%,transparent);
}
.gone .home:hover{border-bottom-color:var(--stamp)}

/* ── narrow ────────────────────────────────────────────────── */
@media (max-width:760px){
  /* One column, but the Legal link must stay where it belongs: the bottom
     corner. Stacking the rail as-is would float it up next to the contact
     block, near the top of the page. Dissolving the rail into the sheet's
     flex flow lets the tuck be ordered last, after the register. */
  .sheet{display:flex;flex-direction:column;gap:0}
  .rail{display:contents}
  .mark{order:1}
  .rail-blk,.back{order:2}
  main{order:3;margin-top:34px}
  .tuck{order:4;margin-top:34px;padding-top:0}
  .rh{display:none}
  .row{grid-template-columns:1fr auto;gap:4px 12px;padding:16px 0}
  .ds{grid-column:1;font-size:15px}
  .st{grid-column:2;grid-row:1;text-align:right}
  .yr{grid-column:2;grid-row:2}
  .info{grid-template-columns:1fr}
  .info dt{border-bottom:0;padding:16px 0 0}
  .info dd{padding:5px 0 15px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}