/* site.css — type, the shell, the glass surfaces, the cursor. Colours come only from tokens.css. */
@font-face{ font-family:"Montserrat"; src:url("../fonts/Montserrat-Variable-latin.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap;
  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:"Montserrat"; src:url("../fonts/Montserrat-Variable-latin-ext.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"JetBrains Mono"; src:url("../fonts/JetBrainsMono-400.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"JetBrains Mono"; src:url("../fonts/JetBrainsMono-500.woff") format("woff"); font-weight:500 800; font-style:normal; font-display:swap; }

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; cursor:none; transition:background .5s var(--ease), color .5s var(--ease); }
html[data-cursor="arrow"] body{ cursor:auto; }
@media (hover:none){ body{ cursor:auto; } }
a{ color:inherit; text-decoration:none; } a:hover{ color:var(--ink); }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:inherit; }
input{ font:inherit; color:inherit; }
.mono{ font-family:var(--font-mono); }
html.phys-hand, html.phys-hand body{ user-select:none; -webkit-user-select:none; }

/* the two canvases: the field under, the objects over */
#stage{ position:fixed; inset:0; overflow:hidden; outline:none; }
#substrateCanvas,#objects{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* glass */
.glass{ background:var(--glass); backdrop-filter:blur(28px) saturate(1.6); -webkit-backdrop-filter:blur(28px) saturate(1.6); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--ink); }
.pill{ position:fixed; bottom:16px; min-height:44px; padding:0 18px; display:flex; align-items:center; gap:10px; border-radius:999px; box-shadow:var(--shadow-soft); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.pill:hover{ transform:translateY(-1px); }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink); flex:none; }
#pillRight .dot{ display:none; } /* Pages is its word alone */
#pillLeft{ left:16px; } #pillRight{ right:16px; }
.pill[hidden]{ display:none; }

/* bottom center: Orson · Home · Console. Three equal columns, each as wide as the widest (Console). */
#centerNav{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); display:grid; grid-template-columns:repeat(3, 1fr); align-items:center; gap:2px; padding:4px; border-radius:999px; box-shadow:var(--shadow-soft); font-family:var(--font-sans); font-size:12.5px; font-weight:500; letter-spacing:0; }
#centerNav button{ min-height:36px; min-width:44px; padding:0 16px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; transition:background .25s var(--ease), color .25s var(--ease); }
#centerNav button:hover, #centerNav button[aria-expanded="true"]{ background:var(--line-soft); }
#centerNav button.on{ background:var(--ink-fill); color:var(--bg); }
#centerNav button.quiet{ color:var(--ink-faint); }


/* panels */
.panel{ position:fixed; bottom:16px; border-radius:22px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; display:flex; flex-direction:column; overflow:hidden; }
.panel[hidden]{ display:none; }
#panelLeft{ left:16px; width:min(360px, calc(100vw - 32px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
#panelLeft .panel-head .title{ flex:1; min-height:36px; display:flex; align-items:center; padding-left:12px; color:var(--ink-muted); }
/* the body holds one height for all three tabs (the tallest, measured in site.js); it scrolls only past the viewport */
#panelLeft .body{ overflow-y:auto; overscroll-behavior:contain; }
.panel-head{ display:flex; align-items:center; gap:10px; padding:10px 10px 10px 12px; }
.tabs{ flex:1; display:flex; padding:3px; border-radius:999px; background:var(--line-soft); border:1px solid var(--line-soft); }
.tabs button{ flex:1; min-height:30px; border-radius:999px; color:var(--ink-muted); transition:all .3s var(--ease); }
.tabs button.on{ background:var(--paper); color:var(--ink); box-shadow:var(--shadow-soft); }
.close{ width:36px; height:36px; border-radius:50%; background:var(--line-soft); color:var(--ink-muted); display:grid; place-items:center; transition:color .25s var(--ease); flex:none; }
.close:hover{ color:var(--ink); } .close i{ width:10px; height:1px; background:currentColor; display:block; }
/* Pages: a glass side panel from the right, nearly full height, on the same 16px margins as every glass surface */
#panelRight{ top:16px; right:16px; bottom:16px; width:min(400px, calc(100vw - 32px)); transform:translateX(calc(100% + 24px)); visibility:hidden; transition:transform .35s var(--ease), visibility 0s linear .35s; }
#panelRight.open{ transform:none; visibility:visible; transition:transform .35s var(--ease), visibility 0s; }
@media (prefers-reduced-motion:reduce){ #panelRight, #panelRight.open{ transition:none; } }
#panelRight .panel-head .title{ flex:1; min-height:36px; display:flex; align-items:center; padding-left:12px; color:var(--ink-muted); } /* the panel's name, on the close's line, as the Panel's tabs are */
#panelRight .panel-head .home{ flex:0 0 auto; margin-right:auto; padding:0 12px; border-radius:999px; transition:color .25s var(--ease), background .25s var(--ease); } #panelRight .panel-head .home:hover{ color:var(--ink); background:var(--line-soft); } /* Home, where the menu's name was: a way back from anywhere */
#panelRight .pages{ flex:1; display:flex; flex-direction:column; gap:14px; padding:18px 12px 14px; min-height:0; }
#panelRight .pages a{ color:color-mix(in srgb, var(--ink) 68%, var(--bg)); min-height:74px; padding:0 14px; border-radius:16px; display:flex; justify-content:space-between; align-items:center; transition:background .25s var(--ease), color .25s var(--ease); }
#panelRight .pages a:hover{ background:var(--line-soft); } #panelRight .pages a.on{ background:var(--line-soft); }
#panelRight .pages a b{ font-family:var(--font-sans); font-weight:700; font-size:clamp(30px, 3.4vw, 46px); line-height:1; letter-spacing:-.025em; }
#panelRight .pages a.legal b{ font-size:15px; font-weight:500; letter-spacing:0; } #panelRight .pages a.legal{ min-height:44px; } #panelRight .pages a small{ font-size:10px; color:var(--ink-faint); }
#panelRight .flyer{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:3; } /* the monarch lives over the whole menu, words and all (js/pages-flyer.js) */
#panelRight .flyer-tag{ position:absolute; left:0; top:0; z-index:4; pointer-events:none; padding:5.5px 8px 5px; background:#8a6fc0; color:#080808; animation:tagIn .28s var(--ease) both; } /* Sharmila's name, a project tag in the house lavender */
#panelRight .flyer-tag[hidden]{ display:none; } #panelRight .flyer-tag b{ display:block; font:600 11.5px/1.2 var(--font-sans); letter-spacing:1.15px; text-transform:uppercase; white-space:nowrap; }
#panelRight .pages a.legal{ margin-top:auto; color:var(--ink-faint); } #panelRight .pages a.legal:hover, #panelRight .pages a.legal.on{ color:var(--ink-muted); }

/* right rail (Home) */
#rail{ position:fixed; right:24px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:14px; align-items:flex-end; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; }
#rail button{ display:flex; align-items:center; gap:10px; min-height:28px; color:var(--ink-muted); transition:color .25s var(--ease); }
#rail button:hover{ color:var(--ink); } #rail button.on{ color:var(--ink); }
#rail i{ display:block; width:8px; height:1px; background:var(--ink-faint); } #rail button.on i{ width:18px; background:var(--ink); }
#rail .nm{ display:none; } #rail button.on .nm{ display:inline; } #rail button.on .num{ display:none; }

/* object label (Home) and work card */
#label{ position:fixed; left:0; top:0; transform:translate(-999px,-999px); padding:6px 10px 5px; border:1px solid var(--ink); background:var(--bg); color:var(--ink); font-family:var(--font-mono); font-size:10.5px; line-height:1.3; letter-spacing:.02em; white-space:nowrap; transition:background .25s var(--ease), color .25s var(--ease), opacity .3s var(--ease); }
#label.on{ background:var(--ink); color:var(--bg); }
#card{ position:fixed; left:0; top:0; width:min(300px, calc(100vw - 32px)); border-radius:18px; padding:16px 18px 14px; display:flex; flex-direction:column; gap:10px; transition:opacity .3s var(--ease); }
#card[hidden]{ display:none; }
#card .t{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; } #card .t b{ font-family:var(--font-sans); font-weight:600; font-size:15px; letter-spacing:.01em; } #card .t small{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); }
#card .b{ font-family:var(--font-sans); font-size:12.5px; line-height:1.55; color:var(--ink-muted); text-wrap:pretty; }
#card .l{ display:flex; gap:6px; flex-wrap:wrap; } #card .l a{ font-family:var(--font-mono); font-size:10.5px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; transition:border-color .25s var(--ease); } #card .l a:hover{ border-color:var(--ink); }
#card .p{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; color:var(--ink-faint); }
#pageHint{ position:fixed; left:24px; top:22px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-muted); pointer-events:none; }

/* Home, top left: the welcome, in Montserrat Black and the mode's ink */
#welcome{ position:fixed; left:24px; top:20px; margin:0; display:flex; flex-direction:column; font-family:var(--font-sans); font-weight:900; font-size:clamp(17px, 1.95vw, 28px); line-height:1.1; letter-spacing:-.005em; color:var(--ink); pointer-events:none; transition:color .5s var(--ease); }

/* the held pages: one quiet line, centred */
#held{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:max-content; max-width:calc(100vw - 48px); margin:0; text-align:center; font-family:var(--font-sans); font-weight:400; font-size:15px; line-height:1.5; color:var(--ink-muted); pointer-events:none; }

/* status, top right: the WellesOS status corner (time on top, date and weather below), bare text in negative space */
.status-float{ position:fixed; top:20px; right:24px; pointer-events:none; }
.status{ display:grid; grid-template-columns:auto auto; column-gap:8px; row-gap:5px; align-items:end; font-family:var(--font-mono); }
.status .clock{ justify-self:end; font-size:15px; font-weight:400; letter-spacing:.04em; color:var(--ink-muted); font-variant-numeric:tabular-nums; line-height:1; }
.status .val{ justify-self:end; font-size:15px; color:var(--ink-muted); letter-spacing:.04em; line-height:1; }
.status .ampm{ justify-self:start; font-size:.78em; color:var(--ink-faint); letter-spacing:.06em; line-height:1; }
.status .blink{ animation:blink 1s infinite; }
@keyframes blink{ 0%,49.9%{ opacity:1 } 50%,100%{ opacity:0 } }
.still .status .blink{ animation:none; }
@media (prefers-reduced-motion:reduce){ .status .blink{ animation:none; } }
.status .blink-once{ animation:blinkOnce 1s 1; }
@keyframes blinkOnce{ 0%{ opacity:1 } 50%{ opacity:0 } 100%{ opacity:1 } }
@media (max-width:820px){ .status-float{ display:none; } } /* as WellesOS: the status corner is a desktop surface */

/* Orson's quiet state and the contact card */
#orsonNote{ position:fixed; left:50%; bottom:72px; transform:translateX(-50%); width:min(360px, calc(100vw - 32px)); border-radius:18px; padding:14px 18px; display:flex; flex-direction:column; gap:6px; }
#orsonNote[hidden]{ display:none; }
#orsonNote .e{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
#orsonNote .m{ font-family:var(--font-sans); font-size:13px; line-height:1.5; color:var(--ink-muted); }
#orsonNote .m[hidden]{ display:none; }
#orsonNote .ask input{ width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; padding:8px 0 7px; font:400 15px/1.3 var(--font-sans); color:var(--ink); outline:none; }
#orsonNote .ask input::placeholder{ color:var(--ink-faint); }
#orsonNote .ask input:focus{ border-bottom-color:var(--ink-muted); }
/* the door's sheet: glass, up from the bottom, one question at a time */
#door{ position:fixed; left:50%; bottom:84px; z-index:60; width:min(380px, calc(100vw - 32px)); border-radius:22px; padding:16px 20px 18px; display:flex; flex-direction:column; gap:12px; opacity:0; transform:translate(-50%, 18px); transition:opacity .3s var(--ease), transform .35s var(--ease); }
#door.on{ opacity:1; transform:translate(-50%, 0); }
#door[hidden]{ display:none; }
#door header{ display:flex; justify-content:space-between; align-items:center; }
#door .e{ font:400 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
#door .x{ font:400 10.5px/1 var(--font-mono); color:var(--ink-muted); display:flex; gap:8px; align-items:center; }
#door .x kbd{ font:inherit; padding:4px 6px; border:1px solid var(--line); border-radius:6px; color:var(--ink-faint); }
#door h2{ margin:0; font:800 30px/1 var(--font-sans); letter-spacing:-.02em; color:var(--ink); }
#door .step{ display:flex; align-items:flex-end; gap:12px; }
#door .step[hidden]{ display:none; }
#door label{ flex:1; display:flex; flex-direction:column; gap:6px; }
#door label span{ font:400 10px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
#door input{ border:0; border-bottom:1px solid var(--line); background:transparent; padding:6px 0; font:400 16px/1.3 var(--font-sans); color:var(--ink); outline:none; letter-spacing:.02em; }
#door input:focus{ border-bottom-color:var(--ink-muted); }
#door button[type=submit]{ min-height:36px; padding:0 16px; border-radius:999px; background:var(--ink-fill); color:var(--bg); font:500 13px/1 var(--font-sans); }
#door button[type=submit]:disabled{ opacity:.5; }
#door .note{ margin:0; min-height:1.4em; font:400 12.5px/1.4 var(--font-sans); color:var(--ink-muted); }
/* private mode's mark: quiet, under the status corner */
#privateMark{ position:fixed; top:64px; right:16px; z-index:20; display:flex; gap:10px; align-items:center; font:400 10px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
#privateMark[hidden]{ display:none; }
#privateMark span{ color:#F97079; }
#privateMark button{ color:var(--ink-muted); letter-spacing:.06em; text-transform:none; font-size:10.5px; } #privateMark button:hover{ color:var(--ink); }
#contactCard{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(440px, calc(100vw - 32px)); border-radius:22px; padding:26px 26px 22px; display:flex; flex-direction:column; gap:14px; }
#contactCard .e{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
#contactCard .m{ font-family:var(--font-sans); font-size:15px; line-height:1.5; }
#contactCard .f{ display:flex; flex-direction:column; gap:6px; }
#contactCard .f span{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--ink-muted); }
#contactCard input, #contactCard textarea{ font:400 14px/1.45 var(--font-sans); color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:12px; padding:10px 12px; outline:none; resize:vertical; transition:border-color .25s var(--ease); cursor:text; }
#contactCard input:focus, #contactCard textarea:focus{ border-color:var(--ink); }
#contactCard .hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
#contactCard .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#contactCard .send{ font:500 12px/1 var(--font-sans); letter-spacing:.02em; padding:11px 18px; border-radius:999px; background:var(--ink-fill); color:var(--bg); transition:opacity .25s var(--ease); }
#contactCard .send:disabled{ opacity:.45; }
#contactCard .note{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-muted); min-height:14px; }
#contactCard a.mail{ font-family:var(--font-mono); font-size:12px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; align-self:flex-start; transition:border-color .25s var(--ease); } #contactCard a.mail:hover{ border-color:var(--ink); }

/* phones: nothing wider than the screen; pills shrink to their dots */
@media (max-width:640px){
  .pill{ padding:0 14px; min-width:44px; } .pill .txt{ display:none; } #pillRight .dot{ display:block; } /* phones: the word gives way to the dot */
  #centerNav button{ padding:0 12px; } #centerNav .txt{ font-size:12px; }
  #rail{ right:12px; } #pageHint{ font-size:9.5px; right:24px; }
  #welcome{ left:20px; top:18px; font-size:18px; }
}

/* the WellesOS cursor, verbatim; selectors rehomed from html[data-cursor] (unchanged) */
  
  .cursor{
    position:fixed; top:0; left:0; width:16px; height:16px; border-radius:50%;
    background:var(--cursor); box-shadow:0 0 0 1px var(--cursor-ring), var(--cursor-drop);
    transform:translate(-50%,-50%); pointer-events:none; z-index:9999; opacity:0;
    transition:width .18s ease, height .18s ease, opacity .22s ease, box-shadow .2s ease;
  }
  .cursor.show{ opacity:1; }
  .cursor.hot{ width:28px; height:28px; box-shadow:0 0 0 1px var(--accent-line), 0 3px 14px color-mix(in srgb, var(--accent) 18%, transparent); }
  .cursor.down{ width:12px; height:12px; }
  @media (hover:none){ .cursor{ display:none; } }

  /* Appearance → Cursor / Background — variants toggled by data-attributes on
     <html> (set in WellesSettings._apply). Defaults (circle / dot-grid) use the
     base rules above, so no override is needed for them. */
  html[data-cursor="dot"] .cursor{ width:7px; height:7px; box-shadow:0 0 0 1px var(--cursor-ring); }
  html[data-cursor="dot"] .cursor.hot{ width:13px; height:13px; }
  html[data-cursor="dot"] .cursor.down{ width:5px; height:5px; }
  html[data-cursor="ring"] .cursor{ background:transparent; width:20px; height:20px; border:1.5px solid var(--cursor); box-shadow:0 0 0 1px var(--cursor-ring); }
  html[data-cursor="ring"] .cursor.hot{ width:30px; height:30px; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-line); }
  html[data-cursor="ring"] .cursor.down{ width:15px; height:15px; }
  html[data-cursor="arrow"] .cursor{ display:none; }
  html[data-cursor="arrow"] body{ cursor:auto; }

/* ── hover tag, leader lines, the open project ───────────────────────────── */
#ui-lines{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; color:var(--ink-muted); z-index:4; overflow:visible; }
/* the project's tag: Renoir's tag card (TagCard.tsx, the ink ground): square corners, the project's colour as the fill, the name
   in dark semibold capitals; padding 5.5/8 and 3/8 of the type size, tracking 0.8/8, line 1.2 */
#tag{ position:fixed; left:0; top:0; z-index:5; pointer-events:none; display:block; padding:5.5px 8px 5px; background:var(--tag, var(--accent)); color:#080808; border-radius:0; animation:tagIn .28s var(--ease) both; }
#tag[hidden], #project[hidden]{ display:none; }
#tag b{ display:block; font:600 11.5px/1.2 var(--font-sans); letter-spacing:1.15px; text-transform:uppercase; white-space:nowrap; }
@keyframes tagIn{ from{ opacity:0; translate:-6px 0; } to{ opacity:1; translate:0 0; } }
#project{ position:fixed; inset:0; z-index:5; pointer-events:none; }
/* a soft fall of the ground behind the sheet, so the words sit on the field without a card */
#project::before{ content:""; position:absolute; top:0; right:0; bottom:0; width:min(620px, 48vw); background:linear-gradient(to right, transparent, color-mix(in srgb, var(--bg) 82%, transparent) 30%, var(--bg) 70%); opacity:0; transition:opacity .6s var(--ease); }
#project.on::before{ opacity:1; }
#project .pj-col{ pointer-events:auto; position:absolute; right:40px; top:0; bottom:0; width:min(440px, 34vw); padding:64px 0 96px; display:flex; flex-direction:column; justify-content:flex-start; gap:18px; overflow-y:auto; scrollbar-width:none; }
#project .pj-col > :first-child{ margin-top:auto; } #project .pj-col > :last-child{ margin-bottom:auto; } /* centred when it fits, scrolls from the top when it doesn't (never clipped above) */
#project .pj-col::-webkit-scrollbar{ display:none; }
#project .pj-col > *{ opacity:0; translate:0 10px; transition:opacity .5s var(--ease), translate .6s var(--ease); }
#project.on .pj-col > *{ opacity:1; translate:0 0; }
#project.on .pj-col > :nth-child(2){ transition-delay:.05s; } #project.on .pj-col > :nth-child(3){ transition-delay:.1s; } #project.on .pj-col > :nth-child(4){ transition-delay:.16s; } #project.on .pj-col > :nth-child(5){ transition-delay:.22s; } #project.on .pj-col > :nth-child(n+6){ transition-delay:.28s; }
#project header{ display:flex; justify-content:space-between; align-items:center; }
#project .pj-count{ font:400 10.5px/1 var(--font-mono); letter-spacing:.1em; color:var(--ink-faint); }
#project .pj-close{ font:400 10.5px/1 var(--font-mono); letter-spacing:.06em; color:var(--ink-muted); display:flex; gap:8px; align-items:center; }
#project .pj-close kbd{ font:inherit; padding:4px 6px; border:1px solid var(--line); border-radius:6px; color:var(--ink-faint); }
#project .pj-close:hover{ color:var(--ink); }
#project .pj-kind{ font:400 10.5px/1.3 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--pj); margin-top:6px; }
#project .pj-head{ display:flex; flex-direction:column; gap:10px; }
#project h2{ margin:-2px 0 0; font:800 clamp(34px, 3.6vw, 56px)/.98 var(--font-sans); letter-spacing:-.025em; color:var(--ink); }
#project .pj-sub{ margin:-4px 0 0; font:700 clamp(19px, 1.8vw, 26px)/1.1 var(--font-sans); letter-spacing:-.015em; color:var(--ink); } /* Renoir alone: its line under its name */
#project .pj-facts{ margin:2px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:9px; row-gap:2px; font:500 13.5px/1.4 var(--font-sans); color:var(--ink); }
#project .pj-facts i{ font-style:normal; color:var(--pj); }
#project .pj-about{ margin:0; font:400 13.5px/1.6 var(--font-sans); color:var(--ink-muted); max-width:44ch; }
#project .pj-media{ display:flex; flex-direction:column; gap:10px; }
#project .pj-tabs{ display:flex; gap:16px; border-bottom:1px solid var(--line); }
#project .pj-tabs button{ font:400 10px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); padding:0 0 8px; margin-bottom:-1px; border-bottom:1px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease); }
#project .pj-tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--pj); }
#project .pj-tabs button:hover{ color:var(--ink); }
#project .pj-pane[hidden]{ display:none; }
#project .pj-strip{ --per:1; display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - (var(--per) - 1) * 10px) / var(--per)); gap:10px; overflow:hidden; }
#project .pj-strip.tall{ --per:3; }
@media (max-height:820px){ #project .pj-strip.tall{ --per:4; } }
#project .pj-shot{ display:block; padding:0; }
#project .pj-shot img{ display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; transition:border-color .3s var(--ease); }
#project .pj-strip.tall .pj-shot img{ border-radius:12px; }
#project .pj-shot:hover img{ border-color:var(--pj); }
#project .pj-pager{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; font:400 10px/1 var(--font-mono); letter-spacing:.08em; color:var(--ink-faint); }
#project .pj-pager button{ font:400 12px/1 var(--font-mono); color:var(--ink-muted); padding:4px 2px; } #project .pj-pager button:hover:not(:disabled){ color:var(--ink); } #project .pj-pager button:disabled{ opacity:.3; cursor:default; }
/* the live window: the real site, running, at desktop size scaled into a frame */
#project .pj-live{ display:block; width:100%; border:1px solid var(--line); border-radius:10px; overflow:hidden; text-align:left; background:var(--bg); transition:border-color .3s var(--ease); }
#project .pj-live:hover{ border-color:var(--pj); }
#project .bar{ display:flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-bottom:1px solid var(--line); font:400 10px/1 var(--font-mono); color:var(--ink-muted); }
#project .bar i{ width:7px; height:7px; border-radius:50%; border:1px solid var(--line); }
#project .bar b{ font-weight:400; margin-left:8px; color:var(--ink); } #project .bar em{ font-style:normal; margin-left:auto; color:var(--pj); display:flex; align-items:center; gap:6px; }
#project .bar em::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--pj); animation:livePulse 2s ease-in-out infinite; }
@keyframes livePulse{ 50%{ opacity:.25; } }
#project .pj-live .vp{ display:block; position:relative; aspect-ratio:16 / 10; overflow:hidden; }
#project .pj-live .pj-live-hint{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; font:400 11px/1 var(--font-mono); letter-spacing:.06em; font-style:normal; color:var(--ink-muted); }
#project .pj-live.loaded .pj-live-hint{ display:none; }
#project .pj-live iframe{ position:absolute; left:0; top:0; width:400%; height:400%; border:0; transform:scale(.25); transform-origin:0 0; pointer-events:none; background:var(--bg); }
/* the Map (js/renoir-map.js): Renoir's world of cinema in the live window's frame; the bar reads what is under the pointer */
#project .pj-map{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg); }
#project .pj-map .bar b{ flex:1; min-width:0; margin-left:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-muted); transition:color .2s var(--ease); }
#project .pj-map .bar b.on{ color:var(--ink); }
#project .pj-map-reset{ flex:none; font:400 10px/1 var(--font-mono); letter-spacing:.06em; color:var(--ink-muted); padding:6px 0 6px 12px; transition:color .2s var(--ease), opacity .2s var(--ease); }
#project .pj-map-reset:hover:not(:disabled){ color:var(--ink); } #project .pj-map-reset:disabled{ opacity:.35; cursor:default; }
#project .pj-map .vp{ display:block; position:relative; aspect-ratio:16 / 10; }
#project .pj-map canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab; outline:none; } /* one finger up or down still scrolls the sheet; across, or two fingers, move the map */
#project .pj-map canvas.held{ cursor:grabbing; }
#project .pj-map canvas:focus-visible{ box-shadow:inset 0 0 0 1px var(--pj); }
#project .pj-credit{ margin:8px 0 0; font:400 9px/1.55 var(--font-mono); letter-spacing:.02em; color:var(--ink-faint); }
/* the screens: a strip of the real work */
/* the spec: a few true facts, not paragraphs */
#project .pj-fold{ border-bottom:1px solid var(--line); padding:0 0 10px; }
#project .pj-fold summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; font:400 10px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); padding:4px 0; }
#project .pj-fold summary::-webkit-details-marker{ display:none; }
#project .pj-fold summary::after{ content:"+"; color:var(--ink-faint); } #project .pj-fold[open] summary::after{ content:"−"; }
#project .pj-fold code{ display:block; margin:10px 0 6px; font:400 12px/1.5 var(--font-mono); color:var(--pj); }
#project .pj-fold p{ margin:0; font:400 13px/1.55 var(--font-sans); color:var(--ink-muted); }
#project .pj-links{ display:flex; gap:18px; flex-wrap:wrap; }
#project .pj-links a{ font:500 13px/1 var(--font-sans); color:var(--ink); padding-bottom:4px; border-bottom:1px solid var(--pj); transition:opacity .25s var(--ease); }
#project .pj-links a:hover{ opacity:.7; } #project .pj-links a span{ color:var(--pj); }
#project .pj-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:6px; }
#project .pj-nav button{ font:400 10.5px/1.3 var(--font-mono); letter-spacing:.04em; color:var(--ink-muted); text-align:left; max-width:48%; }
#project .pj-nav button:last-child{ text-align:right; } #project .pj-nav button:hover{ color:var(--ink); }
/* the three takes: press one and the object takes that look */
#project .pj-insets{ pointer-events:auto; position:absolute; left:28px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:34px; }
#project .pj-inset{ position:relative; width:132px; height:132px; border:1px solid var(--line); border-radius:4px; background:color-mix(in srgb, var(--bg) 70%, transparent);
  opacity:0; translate:-12px 0; transition:opacity .5s var(--ease) calc(.12s + var(--i) * .1s), translate .6s var(--ease) calc(.12s + var(--i) * .1s), border-color .3s var(--ease); }
#project.on .pj-inset{ opacity:1; translate:0 0; }
#project .pj-inset canvas{ width:130px; height:130px; display:block; }
#project .pj-inset span{ position:absolute; left:0; top:calc(100% + 7px); font:400 9.5px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); transition:color .3s var(--ease); }
#project .pj-inset:hover{ border-color:var(--ink-faint); }
#project .pj-inset.on{ border-color:var(--pj); } #project .pj-inset.on span{ color:var(--pj); }
#project .pj-inset::before, #project .pj-inset::after{ content:""; position:absolute; width:8px; height:8px; border:1px solid var(--pj); }
#project .pj-inset::before{ left:-4px; top:-4px; border-right:0; border-bottom:0; } #project .pj-inset::after{ right:-4px; bottom:-4px; border-left:0; border-top:0; }
/* the lightbox: a screen or the live site, large, in place */
#project .pj-light{ pointer-events:auto; position:absolute; inset:0; z-index:2; display:grid; place-items:center; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:tagIn .3s var(--ease) both; }
#project .pj-light[hidden]{ display:none; }
#project .pj-light figure{ margin:0; display:flex; flex-direction:column; gap:10px; align-items:center; }
#project .pj-light img{ max-width:86vw; max-height:78vh; border-radius:10px; border:1px solid var(--line); }
#project .pj-light figure.tall img{ max-height:84vh; border-radius:22px; }
#project .pj-light figcaption{ display:flex; align-items:center; gap:18px; font:400 10px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); }
#project .pj-light figcaption button{ font:400 13px/1 var(--font-mono); color:var(--ink-muted); padding:6px; } #project .pj-light figcaption button:hover{ color:var(--ink); }
#project .pj-light figure.web{ width:min(1180px, 88vw); height:min(760px, 80vh); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg); gap:0; align-items:stretch; }
#project .pj-light figure.web .bar a{ margin-left:auto; color:var(--pj); }
#project .pj-light figure.web iframe{ flex:1; width:100%; border:0; background:var(--bg); }
@media (max-width:699px){
  #project::before{ display:none; }
  #project .pj-col{ left:12px; right:12px; top:auto; bottom:84px; width:auto; max-height:56vh; padding:18px 18px 16px; justify-content:flex-start; border-radius:20px; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); }
  #project h2{ font-size:30px; }
  #project .pj-light figure.web{ width:94vw; height:72vh; }
}

/* ── entrance: nothing just appears ──────────────────────────────────────── */
@keyframes rise{ from{ opacity:0; translate:0 10px; } to{ opacity:1; translate:0 0; } }
html.entering #statusFloat{ animation:rise .9s var(--ease) .5s both; }
html.entering #centerNav{ animation:rise .9s var(--ease) .85s both; }
html.entering #pillLeft{ animation:rise .9s var(--ease) 1.0s both; }
html.entering #pillRight{ animation:rise .9s var(--ease) 1.1s both; }
/* the handoff (site.js): leaving, the interface fades while the camera moves on; arriving, it comes back as the camera
   settles. The field's canvases never fade. The browser holds the frame between the two documents. */
@view-transition { navigation: auto; }
::view-transition-group(root){ animation-duration:.18s; }
html.leaving #stage > :not(canvas){ opacity:0; transition:opacity .2s var(--ease); }
html.handoff #stage > :not(canvas){ animation:handIn .5s var(--ease) .2s both; }
@keyframes handIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ html.entering #statusFloat, html.entering #centerNav, html.entering #pillLeft, html.entering #pillRight{ animation:none; } #tag{ animation:none; } }
.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 line is drawn in dots; readers get it as words */
/* the held chords (js/overlays.js): ⌘⌥ the keys, ⌘⌥⇧ the structure, as in WellesOS */
.cmd-palette{ position:fixed; inset:0; z-index:500; display:flex; align-items:flex-end; justify-content:center; padding:16px 16px 72px; pointer-events:none; opacity:0; transition:opacity .18s ease; } /* above the menu, where Orson's note sits */
body.show-palette .cmd-palette{ opacity:1; }
body.show-palette .cmd-palette-inner{ transform:none; } /* it rises from the menu */
body.palette-open .cmd-palette{ pointer-events:auto; } /* opened from Console: a press outside the card closes it */
.cmd-palette-inner{ border-radius:22px; padding:26px 30px 28px; width:min(720px, 92vw); display:flex; max-height:100%; overflow:auto; transform:translateY(28px); transition:transform .38s var(--ease); flex-direction:column; gap:20px; box-shadow:0 32px 80px rgba(8,8,8,.18), 0 2px 8px rgba(8,8,8,.06); }
@media (prefers-reduced-motion:reduce){ .cmd-palette-inner{ transform:none; transition:none; } }
.cmd-palette-head{ display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--line-soft); padding-bottom:14px; }
.cmd-palette-title{ font:700 19px/1 var(--font-sans); letter-spacing:-.02em; color:var(--ink); }
.cmd-palette-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:20px 28px; }
.cmd-group{ display:flex; flex-direction:column; gap:7px; }
.cmd-group-label{ font:500 9px/1 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; }
.cmd-row{ display:flex; align-items:center; gap:10px; font:400 12.5px/1 var(--font-sans); color:var(--ink-muted); }
.cmd-row kbd{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:21px; padding:0 7px; border:1px solid var(--line); border-radius:6px; box-shadow:0 1px 0 var(--line); font:500 10px/1 var(--font-mono); color:var(--ink); letter-spacing:.04em; white-space:nowrap; flex:none; background:color-mix(in srgb, var(--bg) 70%, transparent); }
.structure{ position:fixed; inset:0; z-index:490; pointer-events:none; display:none; }
body.show-structure .structure{ display:block; }
.st-box, .st-field{ position:absolute; outline:1px dashed color-mix(in srgb, #F97079 70%, transparent); outline-offset:-1px; border-radius:8px; }
.st-field{ inset:8px; outline-color:color-mix(in srgb, var(--ink) 22%, transparent); border-radius:14px; }
.st-box.obj{ outline-color:color-mix(in srgb, #8a6fc0 75%, transparent); }
.st-box span, .st-field span{ position:absolute; top:6px; left:6px; max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 7px; border:1px solid color-mix(in srgb, #F97079 55%, transparent); border-radius:6px; background:color-mix(in srgb, var(--bg) 92%, transparent); color:#F97079; font:500 9px/1 var(--font-mono); letter-spacing:.035em; }
.st-box.above span{ top:auto; bottom:calc(100% + 5px); left:0; max-width:none; overflow:visible; } .st-box.below span{ top:calc(100% + 5px); left:auto; right:0; max-width:none; overflow:visible; } /* small regions: the tag outside, never cut */
.st-box.obj span{ color:#8a6fc0; border-color:color-mix(in srgb, #8a6fc0 55%, transparent); max-width:none; overflow:visible; }
.st-field span{ top:10px; left:50%; transform:translateX(-50%); max-width:none; color:var(--ink-muted); border-color:var(--line); }
/* the interface is always the top layer over the page and its projects (only the door and the held overlays sit above) */
.panel, .pill, #centerNav, #orsonNote{ z-index:40; }

/* Legal: March & Co.'s layout (rows across the full width, a picture and the text side by side, swapping sides each row) with
   this site's type and voice. The page covers the field the way Mathematics does, so the field below stays still and quiet. */
.reading{ pointer-events:auto; position:fixed; inset:0; z-index:5; overflow-y:auto; scrollbar-width:none; padding:96px clamp(16px, 3.1vw, 45px) 150px; font:400 15px/1.65 var(--font-sans); color:var(--ink-muted); } /* the full height, with nothing see-through; the clock floats over it as the nav does */
.reading::-webkit-scrollbar{ display:none; }
.reading{ --g5:#e9e2d3; --g1:#e0ddd4; --g2:#e3ded4; --g3:#dedbd4; --g4:#e0ddd3; --g6:#e6e0d4; --ga:40%; --gb:16%;
  background:url(/assets/legal/grain.png) repeat; background-attachment:local; } /* the mode's own ground; each plate's paper pools around it as light, one continuous layer (js/legal.js), with a grain against banding */
html[data-mode="dark"] .reading, html[data-mode="black"] .reading{ --g5:#625232; --g1:#534b3b; --g2:#574d38; --g3:#4f493b; --g4:#534b39; --g6:#5b4f37; --ga:30%; --gb:12%; } html[data-mode="black"] .reading{ --ga:22%; --gb:9%; }
.reading .lg-row{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(24px, 5.9vw, 85px); align-items:start; scroll-margin-top:80px; }
.reading .lg-row + .lg-row{ margin-top:clamp(64px, 7.5vw, 108px); }
.reading .lg-row.flip .lg-img{ order:2; }
.reading .lg-lede a{ color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.reading .lg-img{ margin:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; align-items:center; } /* the plate sits in the middle of its section */
.reading .lg-head{ align-items:stretch; } .reading .lg-head .lg-img{ justify-content:flex-start; } .reading .lg-head .lg-img img{ position:static; } /* each plate whole, at its own proportions, held in view while its text runs on */
.reading .lg-img img{ display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 230px); border-radius:28px; } .reading .lg-img img.held{ position:sticky; top:var(--tt, 19px); bottom:var(--tb, -35px); } /* and, while a long section runs past, in the middle of the window (--tt, --tb from js/legal.js) */
.reading .lg-ai .lg-text{ align-self:center; } .reading .lg-one{ margin:0; max-width:30ch; font:400 clamp(20px, 1.7vw, 24px)/1.55 var(--font-sans); color:var(--ink); }
.reading .lg-text{ padding:8px clamp(0px, 4.7vw, 68px) 8px; max-width:600px; }
.reading .lg-head .lg-text{ display:flex; flex-direction:column; }
.reading h1{ margin:0; font:800 clamp(44px, 4.4vw, 64px)/.98 var(--font-sans); letter-spacing:-.025em; color:var(--ink); }
.reading .stamp{ margin:16px 0 0; font:400 10.5px/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.reading .lg-lede{ margin:36px 0 0; max-width:440px; font:400 16px/1.7 var(--font-sans); color:var(--ink-muted); }
.reading .legal-index{ margin:36px 0 0; display:flex; flex-wrap:wrap; gap:10px 20px; font:400 10.5px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.reading .legal-index a{ padding-bottom:4px; border-bottom:1px solid var(--line); }
.reading .legal-index a{ color:var(--ink-muted); text-decoration:none; transition:color .2s var(--ease); }
.reading .legal-index a:hover{ color:var(--ink); }
.reading h2{ margin:0 0 20px; font:700 clamp(34px, 3.4vw, 48px)/1.02 var(--font-sans); letter-spacing:-.02em; color:var(--ink); }
.reading h3{ margin:24px 0 6px; font:600 15px/1.4 var(--font-sans); color:var(--ink); }
.reading p{ margin:0 0 12px; }
.reading ul{ margin:0 0 12px; padding-left:18px; }
.reading li{ margin:0 0 6px; }
.reading ul.short{ padding-left:0; list-style:none; border-top:1px solid var(--line-soft); }
.reading ul.short li{ padding:8px 0 8px; border-bottom:1px solid var(--line-soft); }
@media (max-width:799px){ .reading{ padding:96px 16px 140px; } .reading .lg-row{ grid-template-columns:1fr; row-gap:28px; } .reading .lg-row.flip .lg-img{ order:0; }
  .reading .lg-img img{ position:static; } .reading .lg-img img{ max-height:none; border-radius:20px; } .reading .lg-text{ padding:0; } }
/* Legal is a clean page: no field, no objects, the plain ground of the mode */
body[data-page="legal"] #substrateCanvas, body[data-page="legal"] #objects{ display:none; }
body[data-page="legal"]{ background:var(--bg); }
@media (max-width:820px){