/* LUMINIZE — the house's own surface. Built on the issue tokens: cream ground,
   Cormorant for anything read aloud, Manrope tracked for the furniture only,
   radius zero, gold as a rule and never a fill. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Manrope:wght@400;500;600&display=swap');

html[data-register="aurora"]  { --paper:#F4F9FD; --paper-2:#E9F2FA; --ink:#17283A; --soft:#3A5062; --muted:#6685A0; --gold:#B7A667; --gold-d:#93813C; --rule:#D2E5F2; --desk:#C3D9EC; --veil:20,42,64; --grade:sepia(.14) hue-rotate(165deg) saturate(1.07) brightness(1.03); }
html[data-register="daylight"],:root{ --paper:#FAF8F3; --paper-2:#F3EFE6; --ink:#0C1E16; --soft:#334A3F; --muted:#5C7065; --gold:#C5A059; --gold-d:#9A7A3A; --rule:#E1E7E2; --desk:#D6DAD4; --veil:12,30,22; --grade:grayscale(.34) contrast(1.05) brightness(1.03) saturate(.9); }
html[data-register="solstice"]{ --paper:#FDF8E4; --paper-2:#F7EFD3; --ink:#3A3117; --soft:#5C4F28; --muted:#877949; --gold:#C79A3C; --gold-d:#A2782A; --rule:#EDE3C4; --desk:#E6DBB6; --veil:58,49,23; --grade:sepia(.26) saturate(1.1) brightness(1.04); }
html[data-register="dusk"]    { --paper:#FBF4EA; --paper-2:#F4E8DA; --ink:#33201A; --soft:#5A3C2E; --muted:#7A5B4C; --gold:#D69A4C; --gold-d:#B0713C; --rule:#EDDFCE; --desk:#E0CDB8; --veil:51,32,26; --grade:sepia(.16) saturate(1.24) contrast(1.07); }
html[data-register="vespers"] { --paper:#3A2E22; --paper-2:#463829; --ink:#F2E3C8; --soft:#DCC9A6; --muted:#B39B78; --gold:#D9AE6A; --gold-d:#C79753; --rule:#55432F; --desk:#241C14; --veil:36,28,20; --grade:sepia(.55) saturate(.85) contrast(1.02); }
html[data-register="midnight"]{ --paper:#111620; --paper-2:#171E2A; --ink:#EFE8D8; --soft:#CFC7B4; --muted:#8E97A6; --gold:#D9B472; --gold-d:#C39A56; --rule:#2A3140; --desk:#080B11; --veil:5,8,14; --grade:contrast(1.14) brightness(.9) saturate(1.04); }
html[data-register="nocturne"]{ --paper:#0E1712; --paper-2:#131F18; --ink:#EDE6D2; --soft:#C9C2AA; --muted:#7E8C80; --gold:#C7A468; --gold-d:#AC8B4C; --rule:#243128; --desk:#070B08; --veil:7,13,9; --grade:sepia(.14) hue-rotate(75deg) saturate(.82) contrast(1.13) brightness(.87); }

:root{
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.165,.84,.44,1);
  --on-photo:#FBF8F0;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink); font-family:var(--serif);
  font-weight:300; font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  transition:background 700ms var(--ease), color 700ms var(--ease);
}
img{ display:block; max-width:100%; filter:var(--grade); }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }

/* ── the furniture ── */
.tag{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.2em;
      text-transform:uppercase; color:var(--muted); }
.tag.gold{ color:var(--gold-d); }
.hair{ height:1px; background:var(--rule); border:0; margin:0; }
.mono-mark{ width:26px; height:26px; stroke:var(--gold); fill:none; stroke-width:1; opacity:.7; }

h1,h2,h3,h4{ font-weight:300; margin:0; line-height:1.14; letter-spacing:-.005em; }
h1{ font-size:clamp(34px,5.2vw,62px); }
h2{ font-size:clamp(26px,3.2vw,40px); }
h3{ font-size:clamp(21px,2.2vw,28px); }
p{ margin:0 0 1.05em; color:var(--soft); }
.lede{ font-size:1.16em; color:var(--soft); font-style:italic; }
.quiet{ color:var(--muted); }

/* ── chrome ── */
.top{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule);
}
.top .in{ max-width:1240px; margin:0 auto; padding:14px 26px; display:flex; align-items:center; gap:28px; }
.wordmark{ font-size:15px; letter-spacing:.34em; text-transform:uppercase; font-weight:300; white-space:nowrap; }
.nav{ display:flex; gap:22px; margin-left:auto; }
.nav[hidden]{ display:none; }
.nav a{ font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
        color:var(--muted); padding-bottom:3px; border-bottom:1px solid transparent;
        transition:color 400ms var(--ease), border-color 400ms var(--ease); }
.nav a:hover{ color:var(--ink); }
.nav a.on{ color:var(--ink); border-bottom-color:var(--gold); }

.reg{ display:flex; gap:0; border:1px solid var(--rule); }
.reg button{ background:none; border:0; padding:5px 9px; cursor:pointer;
  font-family:var(--sans); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); transition:color 400ms var(--ease); }
.reg button + button{ border-left:1px solid var(--rule); }
.reg button[aria-pressed="true"]{ color:var(--gold-d); }

main{ max-width:1240px; margin:0 auto; padding:0 26px 16vh; }

/* ── the room head ── */
.room{ padding:9vh 0 0; }
.room-head{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:26px;
  padding-bottom:22px; border-bottom:1px solid var(--rule); margin-bottom:40px; }
.room-head h2{ margin-top:8px; }
.room-head .lede{ max-width:56ch; margin-top:12px; }

/* ── the empty state: spacious, and it says so ── */
.empty{ padding:14vh 0; text-align:center; }
.empty p{ font-size:1.25em; font-style:italic; color:var(--muted); max-width:44ch; margin:0 auto; }

/* ── the grid of marks ── */
.grid{ display:grid; gap:1px; background:var(--rule);
       grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); border:1px solid var(--rule); }
.cell{ background:var(--paper); padding:0; display:flex; flex-direction:column;
       transition:background 400ms var(--ease); }
.cell:hover{ background:var(--paper-2); }
.cell .shot{ aspect-ratio:3/4; overflow:hidden; background:var(--paper-2); }
.cell .shot img{ width:100%; height:100%; object-fit:cover; object-position:50% 0%; }
.cell .body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:7px; flex:1; }
.cell .ttl{ font-size:21px; line-height:1.22; }
.cell .sub{ font-size:13px; color:var(--muted); font-family:var(--sans); letter-spacing:.06em; }
.cell .note{ font-size:15px; color:var(--soft); font-style:italic; }
.cell .foot{ margin-top:auto; padding-top:12px; display:flex; gap:14px; align-items:center; }

/* ── issue cards ── */
.issues{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
         grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); }
.issue-card{ background:var(--paper); display:flex; flex-direction:column; }
.issue-card .cover{ position:relative; aspect-ratio:1/1.4142; overflow:hidden;
  background:var(--paper-2); display:block; flex:0 0 auto; }
.issue-card .cover img{ width:100%; height:100%; object-fit:cover; object-position:50% 0%; }
.issue-card .cover .veil{ position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(var(--veil),.56) 0%, rgba(var(--veil),.34) 22%,
    rgba(var(--veil),0) 48%, rgba(var(--veil),.42) 100%); }
.issue-card .mast{ position:absolute; inset:auto 0 auto 0; top:11%; text-align:center; color:var(--on-photo); }
.issue-card .mast .m{ font-size:13px; letter-spacing:.34em; text-transform:uppercase; }
.issue-card .mast .t{ font-size:26px; margin-top:12px; padding:0 12%; line-height:1.16; }
.issue-card .mast .d{ font-family:var(--sans); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  margin-top:14px; opacity:.8; }
.issue-card .meta{ padding:16px 20px 20px; display:flex; justify-content:space-between;
  align-items:baseline; gap:16px; flex-wrap:wrap; margin-top:auto; }

/* ── the action ── */
.act{ background:none; border:1px solid var(--rule); border-left:2px solid var(--gold);
  padding:16px 24px; cursor:pointer; font-family:var(--serif); font-size:19px; font-weight:300;
  color:var(--ink); text-align:left; transition:border-color 400ms var(--ease), background 400ms var(--ease); }
.act:hover{ background:var(--paper-2); border-color:var(--gold); }
.act[disabled]{ opacity:.5; cursor:default; }
.act.small{ font-size:15px; padding:9px 15px; border-left-width:1px; }
.link{ font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); cursor:pointer; background:none; border:0; padding:0;
  transition:color 400ms var(--ease); }
.link:hover{ color:var(--gold-d); }

/* ── fields: the cursor falls into a serif ── */
.field{ display:block; margin:0 0 22px; }
.field .tag{ display:block; margin-bottom:7px; }
input[type=text],input[type=url],input[type=password],input[type=search],textarea,select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:9px 0; font-family:var(--serif); font-size:24px; font-weight:300; border-radius:0;
  transition:border-color 400ms var(--ease); }
input:focus,textarea:focus{ outline:none; border-bottom-color:var(--gold); }
textarea{ font-size:19px; line-height:1.6; resize:vertical; min-height:120px; }

/* ── the meter: a gold hairline, never a bar ── */
.meter{ height:1px; background:var(--rule); position:relative; margin:10px 0 6px; }
.meter i{ position:absolute; inset:0 auto 0 0; background:var(--gold); display:block; }

/* ── the dim ── */
.dim{ position:fixed; inset:0; z-index:80; background:rgba(var(--veil),.2);
  backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center;
  padding:26px; opacity:0; pointer-events:none; transition:opacity 500ms var(--ease); }
.dim.on{ opacity:1; pointer-events:auto; }
.sheet{ background:var(--paper); border:1px solid var(--rule); width:min(620px,100%);
  max-height:86vh; overflow:auto; padding:44px 46px 40px; }

/* ── the vault table ── */
.rows{ border:1px solid var(--rule); }
.row{ display:grid; grid-template-columns:1.4fr 1fr auto; gap:20px; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--rule); transition:background 400ms var(--ease); }
.row:last-child{ border-bottom:0; }
.row:hover{ background:var(--paper-2); }
.row .t{ font-size:20px; }
.row .u{ font-family:var(--sans); font-size:12px; color:var(--muted); letter-spacing:.04em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .a{ display:flex; gap:14px; }

/* ── the line that holds ── */
.held{ font-style:italic; color:var(--muted); font-size:15px; min-height:1.4em; }
.progress-line{ height:1px; background:var(--rule); position:relative; margin:18px 0; }
.progress-line i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--gold);
  transition:width 900ms var(--ease); }

.cols{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule);
  border:1px solid var(--rule); }
.cols > *{ background:var(--paper); padding:34px 36px; }

@media (max-width:860px){
  .cols{ grid-template-columns:1fr; }
  .nav{ gap:14px; }
  .top .in{ flex-wrap:wrap; gap:14px; }
  .row{ grid-template-columns:1fr auto; }
  .row .u{ display:none; }
}


/* ── the door ── */
.door{ display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 58px); }
.door .plate{ position:relative; overflow:hidden; background:var(--paper-2); }
.door .plate img{ width:100%; height:100%; object-fit:cover; object-position:50% 0%; }
.door .plate .veil{ position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(var(--veil),.5) 0%, rgba(var(--veil),.28) 20%,
    rgba(var(--veil),0) 44%, rgba(var(--veil),.5) 100%); }
.door .plate .mast{ position:absolute; left:0; right:0; top:9%; text-align:center; color:var(--on-photo); }
.door .plate .mast .m{ font-size:14px; letter-spacing:.34em; text-transform:uppercase; font-weight:300; }
.door .plate .mast .d{ font-family:var(--sans); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; margin-top:13px; opacity:.82; }
.door .plate .cap{ position:absolute; left:34px; right:34px; bottom:30px; color:var(--on-photo);
  font-size:19px; font-style:italic; line-height:1.42; }
.door .form{ display:flex; align-items:center; padding:9vh 8% 9vh; }
.door .form > div{ width:100%; max-width:440px; }
@media (max-width:900px){
  .door{ grid-template-columns:1fr; }
  .door .plate{ aspect-ratio:3/2; min-height:0; }
  .door .form{ padding:8vh 26px; }
}

/* ── The Shelf: the zone a file falls into ─────────────────────────────────
   A hairline that thickens, not a dashed box that appears. Radius zero. The
   gold marks the edge and never fills it. */
.drop { position: relative; min-height: 90px; transition: background 400ms cubic-bezier(.165,.84,.44,1); }
.drop::after {
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  border: 1px solid transparent;
  transition: border-color 400ms cubic-bezier(.165,.84,.44,1);
}
.drop.over::after { border-color: var(--gold); }
.drop.over { background: rgba(var(--veil, 51,32,26), .03); }
.rows .row .a .link + .link { margin-left: 14px; }
.row button.t { font: inherit; color: var(--gold-d); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.row button.t:hover { color: var(--ink); }

/* The Quiet — a select that reads as furniture, not a form control. */
.field-inline{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--rule);
  border-radius:0; padding:6px 2px; cursor:pointer; appearance:none; -webkit-appearance:none; }
.field-inline:hover{ border-bottom-color:var(--gold); }
.rows .row .t{ font-family:var(--serif); font-size:17px; color:var(--ink); }