/* ── DEEP READ — the room, recomposed 2026-09-12 with the YOU room's law (css/room-you.css, DESIGN-CONSTITUTION.md §1, §2, §6). Her faults with this room: the score was restated here when it already opens Today, Decide and You, and the parts ran on as one column with nothing separating them. She asked for compartments, all in view, each opening on a click. The opening what the room is. The number is not repeated. The compartments six, in a two-column grid, each closed on the one line it found. Open, it takes the full width and gives its prose with its numbers beside them. The evidence the sixth compartment, then the one exit. Loaded after arete-system.css and constitution.css, so this file is the last word on #view-deep. js/35-deepread.js writes #dr-col; js/02 still writes #deep-body, which now stands open as the last panel. ── */ #view-deep{ padding:var(--room-pad,24px) 28px 88px; } #view-deep .dr{ width:100%; max-width:var(--room-max,1180px); margin:0 auto; } /* ── THE OPENING: what the room is, and no restatement of the score ───────── */ #view-deep .dr-top{ display:block; max-width:52ch; margin:0 0 34px; } #view-deep .dr-st{ font-family:var(--f-disp); font-weight:500; font-size:clamp(30px,2.6vw,40px); line-height:1.05; letter-spacing:-.025em; color:rgb(var(--ink)); margin:10px 0 0; text-shadow:none; text-wrap:balance; max-width:22ch; } #view-deep .dr-st em{ font-family:var(--f-em); font-style:italic; font-weight:500; font-size:1.06em; color:#dff4ff; } html[data-theme="light"] #view-deep .dr-st em{ color:#0e4d78; } #view-deep .dr-lede{ font:400 clamp(17px,1.35vw,19px)/1.5 var(--f-body); color:rgb(var(--ink2)); max-width:44ch; margin:16px 0 0; } #view-deep .dr-m__l{ font:400 13.5px/1.4 var(--f-body); color:rgb(var(--ink3)); margin:0; } /* ── THE PANELS ──────────────────────────────────────────────── Organised on her reference (the ELIUS board): one dominant panel with two stacked beside it, a row of two equals under them, and one wide panel to close. Every panel holds its finding in view and offers one way further in. What the reference does in neon, Areté does in one glass and one light: no rings, no pills, no bars, no colour standing in for a word. ── */ #view-deep .dr-col{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; align-items:stretch; max-width:none; margin:0; } #view-deep .dr-c{ display:flex; flex-direction:column; min-width:0; padding:22px 24px 20px; border:1px solid var(--hair); border-radius:14px; background:linear-gradient(150deg, rgba(255,255,255,.038), rgba(255,255,255,.013) 46%, rgba(255,255,255,0)); box-shadow:inset 0 1px 0 rgba(255,255,255,.055); transition:border-color .22s ease; } #view-deep .dr-c:hover{ border-color:rgba(127,211,255,.16); } #view-deep .dr-c--hero{ grid-column:span 7; grid-row:span 2; justify-content:center; } #view-deep .dr-c--side{ grid-column:span 5; } #view-deep .dr-c--half{ grid-column:span 6; } #view-deep .dr-c--wide{ grid-column:1 / -1; margin-top:16px; } #view-deep .dr-c__l{ font:400 13px/1.4 var(--f-body); color:rgb(var(--ink3)); margin:0; } #view-deep .dr-c__h{ font-family:var(--f-disp); font-weight:500; font-size:clamp(19px,1.5vw,23px); line-height:1.12; letter-spacing:-.02em; color:rgb(var(--ink)); margin:6px 0 0; text-wrap:balance; } #view-deep .dr-c--hero .dr-c__h{ font-size:clamp(23px,1.9vw,28px); } #view-deep .dr-c__sum{ font:400 15px/1.5 var(--f-body); color:rgb(var(--ink2)); margin:8px 0 0; max-width:46ch; } #view-deep .dr-c--hero .dr-c__sum{ font:400 clamp(17px,1.35vw,19px)/1.55 var(--f-body); color:rgb(var(--ink)); max-width:42ch; margin-top:12px; } /* what the panel holds in view */ #view-deep .dr-c__k{ margin-top:16px; } /* the dominant panel stands two rows tall, so its contents sit in the middle of it rather than leaving a hole under them */ #view-deep .dr-c--hero .dr-c__k{ display:flex; flex-direction:column; gap:10px; } #view-deep .dr-c__k .dr-rows{ margin-top:4px; } #view-deep .dr-c__k .dr-note{ margin:0; padding:10px 0; border-top:1px solid var(--hair); font-size:15px; } /* the one visual: the ground, and a point for each channel that could be read */ #view-deep .dr-field{ display:block; width:100%; height:auto; overflow:visible; margin:4px 0 6px; } #view-deep .dr-field__v{ font:400 13px var(--f-body); fill:rgb(var(--ink)); } #view-deep .dr-field__k{ font:400 12px var(--f-body); fill:rgb(var(--ink3)); } #view-deep .dr-spark{ display:block; width:100%; max-width:300px; height:auto; overflow:visible; margin:2px 0 8px; } /* one figure per section, each drawn from that section's own data and never carrying a value on its own: the number it stands for is always in the text beside it. */ #view-deep .dr-swell, #view-deep .dr-chain{ display:block; width:100%; height:auto; overflow:visible; margin:2px 0 10px; } #view-deep .dr-swell, #view-deep .dr-chain{ max-width:380px; } #view-deep .dr-edge-fig{ display:block; width:100%; max-width:420px; height:auto; overflow:visible; margin:6px 0 0; } #view-deep .dr-fig__k{ font:400 12px var(--f-body); fill:rgb(var(--ink3)); } /* the way further in: one quiet line at the foot of the panel, a chevron that turns */ #view-deep .dr-c__f{ margin-top:auto; padding-top:14px; } #view-deep .dr-c__o{ list-style:none; display:inline-flex; align-items:center; gap:10px; min-height:44px; font:500 14px var(--f-body); color:rgb(var(--ink2)); cursor:pointer; user-select:none; } #view-deep .dr-c__o::-webkit-details-marker{ display:none; } #view-deep .dr-c__o::marker{ content:''; } #view-deep .dr-c__o:hover{ color:rgb(var(--ink)); } #view-deep .dr-c__o:focus-visible{ outline:2px solid var(--focus,#7FD3FF); outline-offset:3px; border-radius:6px; } #view-deep .dr-c__mark{ width:8px; height:8px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s ease; } #view-deep .dr-c__f[open] .dr-c__mark{ transform:rotate(-135deg) translate(-2px,-2px); } @media (prefers-reduced-motion:reduce){ #view-deep .dr-c, #view-deep .dr-c__mark{ transition:none; } } #view-deep .dr-c__b{ padding-top:6px; } #view-deep .dr-p{ margin:0 0 14px; font:400 17px/1.6 var(--f-body); color:rgb(var(--ink2)); } #view-deep .dr-p:last-child{ margin-bottom:0; } /* the evidence beside the prose: hairline rows, label left, value right */ #view-deep .dr-rows{ margin:0; } #view-deep .dr-row{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; min-height:44px; padding:10px 0; border-top:1px solid var(--hair); } #view-deep .dr-row:first-child{ border-top:0; } #view-deep .dr-row__l{ font:400 14px/1.5 var(--f-body); color:rgb(var(--ink3)); } #view-deep .dr-row__v{ font:400 14px/1.5 var(--f-body); color:rgb(var(--ink)); text-align:right; font-variant-numeric:tabular-nums; } /* the folds: quiet 14px summaries, no marker */ #view-deep .dr-s__f, #view-deep .dr-fold{ margin-top:18px; } #view-deep .dr-s__f > summary, #view-deep .dr-fold > summary{ list-style:none; display:inline-flex; align-items:center; min-height:44px; font:500 14px var(--f-body); color:rgb(var(--ink2)); cursor:pointer; user-select:none; } #view-deep .dr-s__f > summary::-webkit-details-marker, #view-deep .dr-fold > summary::-webkit-details-marker{ display:none; } #view-deep .dr-s__f > summary::marker, #view-deep .dr-fold > summary::marker{ content:''; } #view-deep .dr-s__f > summary:hover, #view-deep .dr-fold > summary:hover{ color:rgb(var(--ink)); } #view-deep .dr-s__f > summary:focus-visible, #view-deep .dr-fold > summary:focus-visible{ outline:2px solid var(--focus,#7FD3FF); outline-offset:3px; border-radius:6px; } #view-deep .dr-s__fin{ padding-top:6px; } #view-deep .dr-note{ margin:0 0 12px; font:400 16px/1.6 var(--f-body); color:rgb(var(--ink2)); max-width:46ch; } #view-deep .dr-note:last-child{ margin-bottom:0; } #view-deep .dr-note__l{ color:rgb(var(--ink)); } /* ── INSIDE A PANEL ───────────────────────────────────────────── */ #view-deep .dr-c__b .dr-p{ font-size:16px; } /* ── THE WRITTEN READING ─────────────────────────────────────── The longest thing Areté says about her, and it was set at 13.5px inside a fold inside a card. It now stands open at reading size: two columns of flowing text, a hairline where a border used to be, and the numeral as a quiet mark. ── */ #view-deep .dr-c--read{ margin-top:40px; } #view-deep .dr-body{ margin-top:26px !important; } /* one column when it is open, because seven long sections in two columns is a layout, not a read. The measure is the website's, at reading size. */ #view-deep .dr-secs{ display:block; max-width:66ch; } #view-deep .dr-sec{ padding:34px 0 10px; border-top:1px solid var(--hair); } #view-deep .dr-sec:first-child{ border-top:0; padding-top:10px; } #view-deep .dr-sec__n{ font:400 13px/1 var(--f-body) !important; letter-spacing:0 !important; color:rgb(var(--ink3)) !important; margin:0 0 10px !important; display:block !important; } #view-deep .dr-sec__n span{ font:inherit !important; letter-spacing:0 !important; color:inherit !important; } #view-deep .dr-sec__h{ font-family:var(--f-disp) !important; font-weight:500 !important; font-size:clamp(20px,1.6vw,24px) !important; line-height:1.14 !important; letter-spacing:-.02em !important; color:rgb(var(--ink)) !important; margin:0 0 14px !important; text-wrap:balance; } #view-deep .dr-sec__p{ font:400 18px/1.75 var(--f-body) !important; color:rgb(var(--ink2)) !important; margin:0 !important; max-width:none; } #view-deep .dr-sec__p em{ font-family:var(--f-em); font-style:italic; font-weight:400; font-size:1.1em; color:#CFF3FF; } html[data-theme="light"] #view-deep .dr-sec__p em{ color:#0B1E33; } /* the double edge, in the same voice: no box, no caps, nothing under 13px */ #view-deep .dr-edge{ border:0 !important; background:none !important; padding:26px 0 0 !important; margin:8px 0 0 !important; border-top:1px solid var(--hair) !important; } #view-deep .dr-edge h3, #view-deep .dr-edge .overline{ text-transform:none !important; letter-spacing:0 !important; font-family:var(--f-body) !important; font-weight:400 !important; font-size:13px !important; } #view-deep .dr-edge h3{ font-size:15px !important; color:rgb(var(--ink)) !important; } #view-deep .dr-edge p{ font:400 17px/1.7 var(--f-body) !important; color:rgb(var(--ink2)) !important; max-width:66ch; } #view-deep .dr-edge span{ font-size:15px !important; letter-spacing:0 !important; } #view-deep .dr-edge .font-mono{ font-family:var(--f-body) !important; font-size:13px !important; } #view-deep .dr-stamp{ margin:14px 0 0; font:400 13px/1.5 var(--f-body) !important; letter-spacing:0 !important; color:rgb(var(--ink3)) !important; } #view-deep #deep-arch{ font:400 13px/1.5 var(--f-body) !important; color:rgb(var(--ink3)) !important; text-shadow:none !important; } #view-deep .dr-foot{ margin:34px 0 0; display:flex; gap:22px; align-items:center; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--hair); } /* ── PHONE: the opening, then the six compartments in one column ─────────── */ @media (max-width:1023px){ #view-deep{ padding:16px 20px 64px; } #view-deep .dr-col{ grid-template-columns:minmax(0,1fr); gap:14px; } #view-deep .dr-c--hero, #view-deep .dr-c--side, #view-deep .dr-c--half, #view-deep .dr-c--wide{ grid-column:1 / -1; grid-row:auto; } #view-deep .dr-c{ padding:18px 18px 16px; } #view-deep .dr-secs{ max-width:none; } #view-deep .dr-sec__p{ font-size:17px !important; } #view-deep .dr-top, #view-deep .dr-note, #view-deep .dr-lede, #view-deep .dr-st{ max-width:none; } #view-deep .dr-row{ flex-direction:column; align-items:flex-start; gap:2px; padding:10px 0; } #view-deep .dr-row__v{ text-align:left; } } /* ═══ THE DEEP READ, PREMIUM PASS (her 09-17 "so cheap"): no cards. One column of parts on the field, read like a page: a small grey label, a Syne heading, one sentence, then the figure or the rows, then the fold as a quiet word. Air between parts instead of borders. The written reading is the last and largest part. Backup .PREPREMIUM-20260917. ═══ */ #view-deep .dr{ max-width:820px; } #view-deep .dr-top{ max-width:56ch; margin:0 0 56px; } #view-deep .dr-col{ display:block; } #view-deep .dr-c, #view-deep .dr-c--hero, #view-deep .dr-c--side, #view-deep .dr-c--half, #view-deep .dr-c--wide{ display:block; padding:0; border:0; border-radius:0; background:none; box-shadow:none; margin:0 0 64px; } #view-deep .dr-c:hover{ border-color:transparent; } #view-deep .dr-c__l{ font:400 13px/1.4 var(--f-body); color:rgb(var(--ink3)); letter-spacing:.01em; } #view-deep .dr-c__h, #view-deep .dr-c--hero .dr-c__h{ font:500 clamp(24px,2vw,30px)/1.12 var(--f-disp); letter-spacing:-.022em; margin-top:8px; } #view-deep .dr-c__sum, #view-deep .dr-c--hero .dr-c__sum{ font:400 16px/1.6 var(--f-body); color:rgb(var(--ink2)); max-width:52ch; margin-top:10px; } #view-deep .dr-c__k{ margin-top:22px; } #view-deep .dr-row{ padding:12px 0; border-bottom:1px solid var(--hair); } #view-deep .dr-row:last-child{ border-bottom:0; } #view-deep .dr-row__l, #view-deep .dr-row__v{ font-size:15px; } #view-deep .dr-c__f{ padding-top:18px; } #view-deep .dr-c__o{ font:500 14px var(--f-body); color:var(--ice); } #view-deep .dr-c__o:hover{ color:#dff4ff; } #view-deep .dr-c__mark{ display:none; } #view-deep .dr-c__b{ padding-top:14px; } #view-deep .dr-p{ font-size:16px; line-height:1.65; max-width:56ch; } #view-deep .dr-c--read{ margin-top:16px; padding-top:40px; border-top:1px solid var(--hair); } #view-deep .dr-c--read .dr-c__h{ font-size:clamp(28px,2.4vw,36px); } @media (max-width:1023px){ #view-deep .dr-c{ margin-bottom:44px; } }