/* =========================================================
   SOLETHU EDITORS — shared design tokens
   One design system, two chapters of the same building:
   the public site (/) and The Suite (/suite/).
   Do not fork these values per-page — extend, don't duplicate.
   ========================================================= */

:root{
  --paper:#FAFAF8; --ink:#141412; --pencil:#8B8781; --hairline:#DDDBD5;
  --black:#050505; --studio:#16120E; --studio-ink:#D8D2C8;
  --voice:'Newsreader',Georgia,serif; --machine:'IBM Plex Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--black);color:var(--ink);font-family:var(--voice);font-weight:400;font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--paper)}

.m{font-family:var(--machine);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pencil);font-weight:400}
.safe{max-width:660px;margin:0 auto;padding:0 26px}
.wide{max-width:960px;margin:0 auto;padding:0 26px}
img{display:block;filter:grayscale(1)}

/* black frames — the beat between chapters, used on both pages */
.bf{background:var(--black);height:36vh}

/* chapter slate — the clapperboard line that opens every room.
   .room is the Suite's heading class; it is the same object as .chtitle
   under a different name, so both pages read as one typographic system. */
.slate{border-top:1px solid var(--ink);padding-top:13px;display:flex;gap:24px;margin-bottom:52px;flex-wrap:wrap}
.chtitle, .room{font-weight:300;font-size:clamp(34px,5.4vw,58px);line-height:1.08;margin-bottom:60px}
.chtitle em, .room em{font-style:italic}

/* a paper chapter — the room lit for reading, as opposed to a black frame.
   .ch is the public site's name for it; .roomsec is the Suite's. Same rule. */
.ch, .roomsec{background:var(--paper);padding:110px 0 130px}

/* the cut — a single black flash used whenever the visitor is moved
   somewhere else without a page reload: a chapter jump, a scroll-to-room. */
#cut{position:fixed;inset:0;background:var(--black);z-index:90;opacity:0;pointer-events:none}
#cut.go{opacity:1}

/* the slate line used at the top of the Suite's door, and echoed at the
   public site's own door — same microcopy rhythm on both sides of the threshold */
.sslate{font-family:var(--machine);font-size:clamp(10px,1.5vw,13px);letter-spacing:.16em;text-transform:uppercase;line-height:2.4;margin-bottom:9vh}

/* a row — one line item in a list of things (a project, a stage of work,
   a document). Used throughout Selected Work, Working Together, and every
   room of the Suite. The hairline above each row is the same device as
   the slate's rule above a chapter title, repeated at a smaller scale. */
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding:26px 0;border-top:1px solid var(--hairline);text-decoration:none;color:inherit}
.row .t{font-size:19px;font-weight:400;margin-bottom:6px}
.row .d{font-size:15px;font-weight:300;color:var(--pencil);line-height:1.5}
.row .meta{white-space:nowrap;text-align:right;flex-shrink:0;padding-top:2px}
.row.reserved{opacity:.55}
a.row{cursor:pointer}
a.row:hover .t{text-decoration:underline}
@media(max-width:640px){.row{flex-direction:column;gap:6px}.row .meta{text-align:left}}

/* reveal-on-scroll primitive — used sparingly; a room's contents settle
   into place as you enter, rather than announcing themselves. */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* link back / breadcrumb between the two chapters of one building */
.doorlink{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.doorlink:hover{border-color:currentColor}

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