/* Editorial collection, revision 03. One reading rhythm, two type families.
   No legacy card stylesheet is loaded by this page or its guide. */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--page); color:var(--ink); font:var(--type-body); }
h1,h2,h3,p,figure,ul { margin:0; }
button,a { touch-action:manipulation; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
button:disabled { cursor:default; }
img,video { display:block; max-width:100%; }
[hidden] { display:none!important; }
::selection { background:var(--accent); color:var(--page); }
:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
.skip-link { position:fixed; top:12px; left:12px; z-index:10; transform:translateY(-160%); background:var(--ink); color:var(--page); padding:12px 18px; }
.skip-link:focus { transform:none; }
.site-header,.site-main,.site-footer { width:min(var(--site-width),calc(100% - 64px)); margin-inline:auto; }
.site-header,.journal-header { min-height:72px; display:flex; align-items:center; gap:30px; border-bottom:1px solid var(--rule); }
.site-name,.journal-name { display:inline-flex; align-items:center; min-height:44px; margin-right:auto; font:700 23px/1 var(--body); letter-spacing:-.055em; white-space:nowrap; }
.site-name span,.journal-name>span { color:var(--color-link); }
.site-nav,.journal-header>nav { display:flex; align-items:center; gap:28px; }
.site-nav a,.journal-header>nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); font:var(--type-navigation); }
.site-nav a:hover,.journal-header>nav a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:6px; }
.theme-control,.display-controls button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; min-width:44px; background:transparent; padding:6px 0 6px 12px; border:0; color:var(--muted); font:14px/1 var(--body); }
#theme-symbol { font:20px/1 var(--body); }
.theme-control:hover,.display-controls button:hover { color:var(--ink); }
.page-intro { display:grid; grid-template-columns:240px minmax(0,1fr); align-items:center; gap:32px; padding:28px 0 22px; }
.page-intro h1 { font:var(--type-display); letter-spacing:-.035em; }
.project-directory { display:flex; flex-wrap:wrap; justify-content:flex-end; column-gap:28px; margin:0; }
.project-directory a { display:inline-flex; align-items:center; gap:9px; min-height:44px; font-size:14px; color:var(--accent); }
.project-directory a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:5px; }
.directory-number { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:14px 0; border-top:1px solid var(--rule); }
.section-heading h2 { font:500 15px/1.4 var(--body); }
.section-heading>span { color:var(--muted); font-size:12px; }
.project-story { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; padding:24px 0 34px; border-bottom:1px solid var(--rule); scroll-margin-top:28px; }
.project-copy { display:flex; flex-direction:column; align-items:flex-start; padding-top:4px; }
.project-kind { display:flex; gap:9px; align-items:center; font-size:12px; color:var(--muted); margin-bottom:15px; }
.project-number { font-variant-numeric:tabular-nums; }
.project-kind .project-status { flex:none; margin:0 0 0 auto; white-space:nowrap; }
.project-heading { font:var(--type-project); letter-spacing:-.035em; }
.project-description { max-width:38ch; font-size:17px; line-height:1.65; color:var(--soft); margin-top:14px; }
.project-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin-top:25px; }
.card-launch,.button-primary { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:11px 17px; border:1px solid var(--ink); border-radius:var(--radius-small); background:var(--ink); color:var(--page); font:var(--type-action); }
.card-launch:hover,.button-primary:hover { background:var(--accent); border-color:var(--accent); color:var(--page); }
.card-watch,.card-gallery,.button-text { display:inline-flex; align-items:center; justify-content:flex-start; gap:7px; min-height:44px; padding:8px 0; border:0; border-radius:0; background:transparent; color:var(--accent); font:var(--type-action); }
.card-watch:hover,.card-gallery:hover,.button-text:hover { text-decoration:underline; text-underline-offset:5px; }
.project-status { display:inline-flex; gap:7px; align-items:center; margin-top:20px; color:var(--muted); font-size:12px; }
.project-status::before { content:''; display:block; width:5px; height:5px; border-radius:50%; background:var(--color-ready); }
.project-status[data-tone=soon]::before { background:var(--color-soon); }
.project-media { min-width:0; }
.story-frame { position:relative; width:100%; aspect-ratio:var(--media-ratio); background:var(--color-media); border-radius:var(--radius-small); overflow:hidden; }
.story-image { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; }
.story-image img,.story-video { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; }
.story-image:focus-visible { outline-offset:-4px; outline-color:var(--color-media-ink); }
.story-video { background:var(--color-media); }
.story-arrow,.story-expand,.gallery-arrow,.expand-button { position:absolute; z-index:1; display:grid; place-items:center; padding:0; color:var(--color-media-ink); border:1px solid transparent; border-radius:var(--radius-small); background:var(--color-photo-overlay); text-shadow:0 1px 5px var(--color-media); }
.story-arrow,.gallery-arrow { top:50%; transform:translateY(-50%); width:44px; height:74px; font:32px/1 var(--body); }
.story-prev,#gallery-prev { left:6px; }.story-next,#gallery-next { right:6px; }
.story-expand,.expand-button { top:8px; right:8px; width:44px; height:44px; font:23px/1 var(--body); background:var(--color-media-overlay); }
.expand-button span { display:none; }
.story-arrow:hover,.gallery-arrow:hover,.story-expand:hover,.expand-button:hover { background:var(--color-media-overlay); }
.story-frame :focus-visible,.media-stage :focus-visible { outline-color:var(--color-media-ink); }
.story-caption { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:4px 18px; margin-top:9px; color:var(--muted); font-size:12px; line-height:1.5; }
.story-caption-text { min-width:0; }
.story-count { font-variant-numeric:tabular-nums; white-space:nowrap; }
.story-gallery { grid-column:1/-1; justify-self:start; color:var(--muted); min-height:44px; font-size:12px; }
.story-error { position:absolute; inset:auto 10px 10px; padding:10px; background:var(--color-media-overlay); color:var(--color-media-ink); font-size:13px; pointer-events:none; }
.upcoming-projects { margin-top:56px; }
.upcoming-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; }
.upcoming-story { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:20px; align-items:start; padding:24px 0 30px; border-bottom:1px solid var(--rule); scroll-margin-top:28px; }
.upcoming-story .project-copy { padding-top:0; }.upcoming-story .project-status { margin:0 0 10px; }
.upcoming-heading { font:500 24px/1.25 var(--serif); letter-spacing:-.025em; }
.title-button { text-align:left; padding:0; border:0; background:transparent; font:inherit; min-height:44px; }
.title-button:hover { color:var(--accent); }
.upcoming-description { font-size:14px; line-height:1.6; color:var(--soft); margin-top:9px; }
.upcoming-image { display:block; width:100%; aspect-ratio:var(--media-ratio); padding:0; border:0; border-radius:var(--radius-small); background:var(--color-media); overflow:hidden; }
.upcoming-image img { width:100%; height:100%; object-fit:contain; }
.upcoming-story .project-actions { margin-top:10px; gap:0 18px; }
.upcoming-story .card-gallery,.upcoming-story .card-watch { font-size:13px; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:34px; padding:16px 0 30px; font-size:12px; color:var(--muted); }
.site-footer a { display:inline-flex; align-items:center; min-height:44px; }
.site-footer a:hover { color:var(--accent); }
.noscript { max-width:760px; margin:30px auto; padding:20px; }.noscript a { color:var(--accent); text-decoration:underline; }
/* The gallery is a larger version of the same media figure, with its real proportions. */
body.viewer-open { overflow:hidden; }
#project-view { width:min(1100px,calc(100% - 48px)); max-height:calc(100dvh - 40px); padding:0; border:1px solid var(--rule); border-radius:var(--radius-small); background:var(--page); color:var(--ink); overflow:auto; }
#project-view::backdrop { background:rgba(20,20,20,.82); backdrop-filter:blur(4px); }
.viewer-header { display:flex; align-items:center; justify-content:flex-end; padding:5px 24px; border-bottom:1px solid var(--rule); }
#viewer-category { display:none; }
.quiet-button { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:6px 0; border:0; background:transparent; color:var(--muted); font-size:13px; }
.quiet-button:hover { color:var(--ink); }
.viewer-layout { padding:24px 30px 28px; }
.viewer-summary { margin-bottom:22px; }
.status-label { color:var(--muted); font-size:12px; }
.viewer-summary h2 { margin-top:6px; font:var(--type-project); letter-spacing:-.03em; }
.viewer-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin-top:15px; }
.media-stage { position:relative; width:min(100%,calc(58dvh * var(--media-ratio))); aspect-ratio:var(--media-ratio); margin-inline:auto; background:var(--color-media); border-radius:var(--radius-small); overflow:hidden; }
.media-stage>img,.media-stage>video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.media-caption { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-top:12px; color:var(--muted); font-size:12px; line-height:1.5; }
#viewer-count { font-variant-numeric:tabular-nums; white-space:nowrap; }
.viewer-thumbs { display:flex; gap:8px; margin-top:16px; padding:4px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; }
.media-thumb { position:relative; flex:0 0 76px; width:76px; min-height:52px; aspect-ratio:4/3; padding:3px; border:1px solid var(--rule); border-radius:var(--radius-small); background:var(--color-media); }
.media-thumb img { width:100%; height:100%; object-fit:contain; }
.media-thumb[aria-pressed=true] { border:2px solid var(--accent); padding:2px; }
.thumb-play { position:absolute; inset:0; display:grid; place-items:center; color:var(--color-media-ink); background:var(--color-photo-overlay); }
.viewer-details { max-width:70ch; margin-top:22px; color:var(--soft); font-size:15px; }
.viewer-details ul { margin-top:16px; padding-left:20px; }.viewer-details li { margin-top:5px; }
.viewer-details .coming-note { margin-top:18px; color:var(--color-soon); }
.viewer-hint { margin-top:20px; color:var(--muted); font-size:12px; }
.media-error { position:absolute; inset:0; display:grid; place-content:center; gap:12px; padding:18px; background:var(--color-media-overlay); color:var(--color-media-ink); text-align:center; }
.media-error .button { justify-self:center; color:var(--color-media-ink); }
#project-view.is-expanded { width:calc(100% - 24px); max-height:calc(100dvh - 24px); }
.is-expanded .viewer-summary,.is-expanded .viewer-details { display:none; }
.is-expanded .viewer-layout { padding:15px; }
.is-expanded .media-stage { width:min(100%,calc((100dvh - 230px) * var(--media-ratio))); }
/* Shared guide specimens use the same two-family hierarchy and action components. */
.guide { padding-inline:32px; }
.journal-header { max-width:var(--site-width); margin-inline:auto; }.display-controls { display:flex; }
.entry-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.entry-title-group { display:flex; align-items:baseline; gap:14px; }
.entry-title-group h3 { font:var(--type-project); letter-spacing:-.03em; }
.entry-number { color:var(--muted); font-size:12px; }
.entry-under { display:flex; justify-content:space-between; gap:24px; }.entry-copy { color:var(--soft); }.entry-copy .project-type { display:block; margin-top:7px; color:var(--muted); font-size:12px; }
.card-actions,.preview-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; }
.media-play { position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:9px 13px; border:0; border-radius:var(--radius-small); color:var(--color-media-ink); background:var(--color-media-overlay); font:var(--type-action); }
.media-play:hover { background:var(--color-media-ink); color:var(--color-media); }
.media-play svg { flex:none; }.footer-links { display:flex; gap:20px; }
@media(max-width:1000px) { .page-intro { display:block; }.project-directory { justify-content:flex-start; margin-top:12px; }.project-story { gap:34px; }.upcoming-list { gap:0 32px; }.upcoming-story { grid-template-columns:minmax(0,1fr) 110px; gap:16px; } }
@media(max-width:760px) {
 .site-header,.site-main,.site-footer { width:calc(100% - 40px); }
 .site-header { min-height:68px; gap:20px; }.site-name { font-size:22px; }.site-nav { gap:20px; }
 .theme-control { padding-left:0; }.theme-control #theme-label { display:none; }
 .page-intro { padding:22px 0 16px; }.page-intro h1 { font-size:42px; }
 .project-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; margin-top:12px; }
 .project-directory a { font-size:13px; }.section-heading { padding:13px 0; }
 .project-story { grid-template-columns:1fr; gap:20px; padding:18px 0 28px; }
 .project-kind { margin-bottom:10px; }.project-heading { font-size:32px; }.project-description { font-size:16px; max-width:44ch; margin-top:10px; }
 .project-actions { margin-top:18px; }
 .story-caption { font-size:12px; gap:2px 16px; }.story-gallery { min-height:44px; }
 .story-arrow,.gallery-arrow { height:70px; }.story-expand { top:6px; right:6px; }
 .upcoming-projects { margin-top:34px; }.upcoming-list { display:block; }
 .upcoming-story { grid-template-columns:minmax(0,1fr) 112px; gap:22px; padding:22px 0; }.upcoming-heading { font-size:24px; }
 .site-footer { margin-top:18px; padding-block:12px 22px; }
 #project-view { width:calc(100% - 20px); max-height:calc(100dvh - 20px); }.viewer-header { padding-inline:18px; }.viewer-layout { padding:20px 18px; }
 .viewer-summary h2 { font-size:30px; }.viewer-actions { margin-top:13px; gap:8px 20px; }
 .media-caption { font-size:12px; gap:12px; }.viewer-details { font-size:14px; }
 .guide { padding-inline:20px; }.journal-header { gap:16px; flex-wrap:wrap; padding-block:8px; }.journal-header>nav { gap:18px; }.journal-name { font-size:22px; }
 .entry-under { display:block; }.entry-under .card-actions { margin-top:15px; }
}
@media(max-width:420px) { .site-nav a:first-child,.site-nav a[href="#coming-soon"] { display:none; }.site-header { gap:18px; }.upcoming-story { grid-template-columns:minmax(0,1fr) 90px; gap:18px; }.upcoming-description { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
.project-directory a>span:last-child { text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:5px; }
.project-directory a:hover>span:last-child { text-decoration-color:currentColor; }