/* Night-desk magnets — each page is a different object, not one gold form. */
:root{
  --ink:#0b0c10;
  --paper:#f3ead8;
  --brass:#c9a45a;
  --mist:#b4ad9f;
  --line:rgba(243,234,216,.14);
  --accent:var(--brass);
  --slip:var(--paper);
  --slip-ink:#1c1710;
}
html,body{margin:0;background:var(--ink);color:var(--paper);font:16px/1.55 Figtree,system-ui,sans-serif}
*{box-sizing:border-box}
body{min-height:100dvh;touch-action:manipulation}
body[data-magnet="brief"]{--accent:#c9a45a;--slip:#f3ead8;--slip-ink:#1c1710;--ink:#100e0b}
body[data-magnet="reply"]{--accent:#d2b36f;--slip:#121821;--slip-ink:#efe6d4;--ink:#090b10}
body[data-magnet="permit"]{--accent:#8ea8b6;--slip:#0f161c;--slip-ink:#e4eef3;--ink:#080c10}
body[data-magnet="dental"]{--accent:#c48a8a;--slip:#f6ebe8;--slip-ink:#2a1618;--ink:#120d0e}
body[data-magnet="clinic"]{--accent:#7f9b96;--slip:#eef4f1;--slip-ink:#14201c;--ink:#0b100e}
body[data-magnet="agency"]{--accent:#b8b3a6;--slip:#eceae4;--slip-ink:#1a1916;--ink:#10100e}
body[data-magnet="hub"]{--accent:#c9a45a}

.stage{position:relative;overflow:hidden;padding:1.2rem 1.15rem 7.2rem}
.stage::before{
  content:"";position:absolute;inset:-30% -20% auto -20%;height:58vh;
  background:radial-gradient(55% 48% at 18% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%);
  pointer-events:none
}
.nav{position:relative;display:flex;flex-wrap:wrap;gap:.7rem 1.15rem;align-items:center;margin-bottom:2.1rem}
.nav a{color:var(--mist);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;font-weight:600;font-size:.92rem}
.nav a:hover,.nav a:focus-visible{color:var(--paper)}
.word{font-family:"Instrument Serif",Georgia,serif;font-size:1.12rem;color:var(--paper);letter-spacing:-.01em}

.split{position:relative;width:min(1080px,100%);margin:0 auto}
h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(2.15rem,6.4vw,3.65rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 .8rem;max-width:18ch}
.lead{color:color-mix(in srgb, var(--paper) 78%, var(--ink));font-size:1.06rem;max-width:38rem;margin:0 0 1rem}
.es{color:var(--mist);font-size:.95rem;margin:0 0 1.35rem}
.how{margin:0 0 1.5rem;color:color-mix(in srgb, var(--paper) 62%, var(--ink));font-size:.92rem;max-width:36rem}

.slip{
  background:var(--slip);color:var(--slip-ink);
  border-radius:4px;padding:1.4rem 1.35rem 1.25rem;
  box-shadow:0 22px 56px rgba(0,0,0,.42);
  animation:slipIn .5s cubic-bezier(.16,1,.3,1) both
}
@keyframes slipIn{from{opacity:.01;transform:translateY(14px) rotate(-1.4deg)}to{opacity:1;transform:translateY(0) rotate(-.45deg)}}
@media (prefers-reduced-motion:reduce){.slip{animation:none;transform:none}}
.slip h2{font-family:"Instrument Serif",Georgia,serif;font-size:1.5rem;font-weight:400;margin:0 0 .75rem;letter-spacing:-.01em}
.slip p{margin:.85rem 0 0}

/* Brief — ruled ledger */
.ledger{list-style:none;margin:0;padding:0}
.ledger li{padding:.7rem 0 .55rem;border-bottom:1px solid color-mix(in srgb, var(--slip-ink) 14%, transparent)}
.ledger li:last-of-type{border-bottom:0}
.ledger .n{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:.28rem}
.ledger .q{display:block;font-weight:600}
.ledger .rule{display:block;margin-top:.45rem;height:1.35rem;border-bottom:1px solid color-mix(in srgb, var(--slip-ink) 28%, transparent)}
.math{margin:.95rem 0 0;font-size:.92rem;opacity:.78}

/* Reply — phone thread */
.thread{display:grid;gap:.7rem}
.bubble{max-width:94%;padding:.85rem .95rem;border-radius:16px 16px 16px 5px;background:color-mix(in srgb, var(--slip-ink) 9%, var(--slip))}
.bubble.es{margin-left:auto;border-radius:16px 16px 5px 16px;background:color-mix(in srgb, var(--accent) 16%, var(--slip))}
.bubble b{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:.35rem}

/* Permit — municipal clip */
.clip{width:100%;border-collapse:collapse;font:12.5px/1.4 "IBM Plex Mono",ui-monospace,Menlo,monospace}
.clip th,.clip td{text-align:left;padding:.5rem .28rem;border-bottom:1px solid color-mix(in srgb, var(--slip-ink) 16%, transparent);vertical-align:top}
.clip th{font-weight:600;opacity:.62;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.clip a{color:inherit}

/* Dental — appointment card */
.appt{transform:rotate(-.8deg);border-radius:2px;background:
  linear-gradient(180deg, transparent 0, transparent 18px, color-mix(in srgb, var(--slip-ink) 8%, transparent) 18px, transparent 19px) 0 0 / 100% 28px,
  var(--slip)}
.appt .when{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(2.6rem,8vw,3.6rem);line-height:1;margin:.15rem 0 .35rem;letter-spacing:-.02em}
.appt .where{font-size:.88rem;opacity:.7;margin:0 0 .9rem}
.tear{margin:1rem -1.35rem 1rem;border-top:1.5px dashed color-mix(in srgb, var(--slip-ink) 28%, transparent)}

/* Clinic — quiet folder */
.folder{border-radius:2px 14px 4px 4px;box-shadow:0 22px 56px rgba(0,0,0,.36), inset 0 10px 0 color-mix(in srgb, var(--accent) 22%, var(--slip))}
.folder .stamp{display:inline-block;margin:0 0 .8rem;padding:.22rem .5rem;border:1px solid color-mix(in srgb, var(--slip-ink) 28%, transparent);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}

/* Agency — quote hold */
.quote .hold{display:flex;align-items:center;gap:.55rem;margin:.85rem 0 0;font-weight:700}
.quote .box{width:18px;height:18px;border:1.5px solid currentColor;flex:0 0 18px}

.desk{
  width:min(480px,100%);margin:2.2rem auto 0;
  background:#101218;border:1px solid var(--line);border-radius:16px;
  padding:1.25rem 1.15rem 1.3rem
}
.desk h2{font-family:"Instrument Serif",Georgia,serif;font-size:1.45rem;font-weight:400;margin:0 0 .35rem}
.desk .ask{margin:0 0 1rem;color:var(--mist);font-size:.92rem}
form{display:grid;gap:.8rem}
label{font-size:.8rem;color:var(--mist)}
input,select{
  width:100%;min-height:48px;padding:.7rem .85rem;border-radius:10px;
  border:1px solid var(--line);background:#0c0e14;color:var(--paper);
  font:500 16px/1.4 Figtree,system-ui,sans-serif
}
.slip input{
  width:100%;min-height:46px;margin:.25rem 0 .65rem;border-radius:8px;
  border:1px solid color-mix(in srgb, var(--slip-ink) 18%, transparent);
  background:#fff;color:#1c1710;font:500 16px/1.4 Figtree,system-ui,sans-serif
}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:2px}
.cons{display:flex;gap:.7rem;align-items:flex-start;color:var(--mist);font-size:.88rem}
.cons input{width:20px;min-height:20px;margin-top:.2rem}
button.go,a.go{
  min-height:52px;padding:.85rem 1.2rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--accent);color:#0c0b09;font:700 1rem Figtree,sans-serif;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 26%, transparent)
}
button.go:hover,a.go:hover{filter:brightness(1.06)}
#msg{min-height:1.3em;color:var(--accent)}
.fine{margin-top:1.15rem;color:var(--mist);font-size:.86rem}
.fine a{color:var(--paper)}

.rail{
  position:fixed;left:0;right:0;bottom:0;z-index:8;
  padding:.7rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(9,10,13,.94) 30%);
  pointer-events:none
}
.rail a{pointer-events:auto;width:min(520px,100%);margin:0 auto;display:flex}

.index{width:min(760px,100%);margin:0 auto}
.index a{
  display:block;text-decoration:none;color:inherit;
  padding:1.35rem 0;border-bottom:1px solid var(--line)
}
.index a:first-child{padding-top:.2rem}
.index a:hover h2,.index a:focus-visible h2{color:var(--accent)}
.index h2{font-family:"Instrument Serif",Georgia,serif;font-size:1.85rem;margin:0 0 .3rem;font-weight:400;letter-spacing:-.015em}
.index p{margin:0;color:var(--mist);max-width:40rem}
.index a.lead-item h2{font-size:clamp(2.1rem,5vw,2.7rem)}
.index a.lead-item{padding-bottom:1.7rem}

@media (min-width:920px){
  .stage{padding:1.6rem 2rem 3.5rem}
  .split{display:grid;grid-template-columns:1.12fr .88fr;gap:3.2rem;align-items:start}
  .desk{width:auto;margin:2.4rem 0 0}
  .rail{display:none}
}
@media (max-width:919px){
  .split .desk{margin-top:1.8rem}
}