/* Opening revision, October 6, 2026. Scoped to the expanded portfolio. */
.opening-revised{padding-top:64px;min-height:620px;gap:40px}
.opening-revised h1{font-size:clamp(54px,6.5vw,88px);line-height:1.05;letter-spacing:-.055em;margin:0}
.opening-revised .opening-disciplines{font-size:12px;line-height:1.9;max-width:36ch;color:var(--muted);margin:23px 0 0}
.opening-revised .opening-deck{max-width:35ch;font-size:16px;line-height:1.75;margin-top:28px}
.opening-revised .intro-alternatives{max-width:40ch;margin-top:22px;font-size:11px;color:var(--muted)}
.opening-revised .intro-alternatives summary{cursor:pointer;line-height:1.6;text-decoration:underline;text-underline-offset:4px}
.opening-revised .intro-alternatives ol{padding-left:19px;margin:16px 0;line-height:1.7}
.opening-revised .intro-alternatives li+li{margin-top:14px}
.opening-revised .intro-alternatives p{font-size:10px}
@media(max-width:800px){.opening-revised{padding-top:48px;gap:24px;min-height:0}.opening-revised .opening-deck{max-width:42ch}.opening-revised .opening-disciplines{max-width:48ch}}
@media(max-width:500px){.opening-revised h1{font-size:58px}.opening-revised .opening-disciplines{font-size:11px;max-width:33ch}.opening-revised .opening-deck{font-size:15px}.opening-revised .opening-composition{margin-top:22px}}

.opening-revised .opening-disciplines{display:flex;flex-wrap:wrap;gap:0 14px;max-width:48ch}.opening-revised .opening-disciplines span{white-space:nowrap}

/* Keep the animated backdrop from washing out the introductory copy. */
[data-theme=dark] .opening-revised{background:#17201bf5}

/* Shared opening / Phone That Cares surface; section-aware sticky chrome. */
html[data-theme=light]{--opening-surface:#f4f0e6;--opening-ink:#293b30;--opening-muted:#58685f}
html[data-theme=dark]{--opening-surface:#252d24;--opening-ink:#e6ecdf;--opening-muted:#afbfab}
html[data-theme] body,html[data-theme] .opening-revised,html[data-theme] .phone-scene{background:var(--opening-surface)}
.opening-revised h1{font-size:clamp(36px,4vw,52px);font-weight:400;letter-spacing:-.035em;line-height:1.15}
html[data-theme] .mast,html[data-theme] .project-nav,html[data-theme] .provenance{
 background:var(--header-surface,var(--opening-surface));color:var(--header-ink,var(--opening-ink));
 border-color:var(--header-line,#6879623d);backdrop-filter:none;
}
html[data-theme] .mast .contact-link,html[data-theme] .project-nav a,html[data-theme] .project-nav a span,html[data-theme] .mast .mode-switch button{color:var(--header-muted,var(--opening-muted))}
html[data-theme] .project-nav a.active,html[data-theme] .project-nav a.active span{color:var(--header-ink,var(--opening-ink));border-color:currentColor}
html[data-theme] .mast .mode-switch button[aria-pressed=true]{background:var(--header-ink,var(--opening-ink));color:var(--header-surface,var(--opening-surface))}
html[data-theme] .project-nav-shell.can-scroll:after{background:linear-gradient(90deg,transparent,var(--header-surface,var(--opening-surface)) 45%);color:var(--header-ink,var(--opening-ink))}
.project-nav-shell{top:var(--mast-height,79px)}

/* Text-led introduction: approach, experience, current practice. */
.opening-editorial{grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr);align-items:start;min-height:0;padding-top:80px;padding-bottom:28px;column-gap:8vw;row-gap:52px}
.opening-editorial .opening-disciplines{display:block;margin-top:22px;font-size:12px;line-height:1.9}
.opening-editorial .opening-disciplines span{display:block}
.opening-editorial .opening-prose{max-width:58ch;padding-top:3px;font-size:15px;line-height:1.8;min-width:0}
.opening-editorial .opening-prose p{margin:0 0 24px}
.opening-editorial .opening-prose em{font-style:italic}
.opening-editorial .opening-prose>.text-link{margin-top:8px;font-size:11px}
.opening-editorial .opening-base{margin-top:0}
@media(max-width:800px){.opening-editorial{grid-template-columns:1fr;gap:32px;padding-top:48px}.opening-editorial .opening-disciplines{display:flex;gap:0 16px;max-width:none;margin-top:16px}.opening-editorial .opening-prose{max-width:60ch;padding-top:0}.opening-editorial .opening-base{margin-top:8px}}
@media(max-width:500px){.opening-editorial{padding-top:38px;gap:30px}.opening-editorial .opening-prose{font-size:14px;line-height:1.75}.opening-editorial .opening-disciplines{font-size:11px}.opening-editorial .opening-prose p{margin-bottom:22px}}

/* Glossed phrases in the intro: hover, focus, or tap for a short note. */
.opening-prose .gloss{position:relative;cursor:help;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);outline:none;border-radius:3px}
.opening-prose .gloss:hover,.opening-prose .gloss:focus-within{text-decoration-color:currentColor}
.opening-prose .gloss:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.gloss-card{position:absolute;left:var(--gloss-shift,0px);top:calc(100% + 8px);z-index:30;width:min(290px,calc(100vw - 32px));padding:12px 14px 13px;border-radius:8px;background:var(--opening-surface,#f4f0e6);color:var(--opening-ink,#293b30);border:1px solid #6879623d;box-shadow:0 10px 30px #0000001f,0 2px 6px #00000014;font-size:13px;line-height:1.55;font-style:normal;text-align:left;white-space:normal;cursor:auto;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .14s,transform .14s,visibility 0s .14s}
.gloss-card::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.gloss:hover>.gloss-card,.gloss:focus-within>.gloss-card{opacity:1;visibility:visible;transform:none;transition:opacity .14s,transform .14s}
.gloss-card img{display:block;width:100%;height:120px;object-fit:cover;border-radius:4px;margin-bottom:10px}
.gloss-body{display:block;color:var(--opening-muted,#58685f)}
.gloss-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:11px;letter-spacing:.02em}
.gloss-links a{color:var(--opening-ink,#293b30);text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.gloss-card{transition:none}}

/* No sticky masthead: name lives in the opening; controls scroll away with it. */
.opening-editorial{position:relative}
.page-controls{position:absolute;top:22px;right:4vw;z-index:5}
html[data-theme] .page-controls .mode-switch button{color:var(--opening-muted)}
html[data-theme] .page-controls .mode-switch button[aria-pressed=true]{background:var(--opening-ink);color:var(--opening-surface)}
.page-controls .appearance-toggle{color:var(--opening-ink)}
.project-nav-shell{top:0!important}
.opening-revised h1 .opening-name{display:block;font-size:.42em;letter-spacing:-.01em;line-height:1.3;margin-bottom:.15em;color:var(--opening-muted)}
.opening-editorial .opening-prose{padding-top:6px}

/* Cart process photos inside "View the process". */
.cart-process-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.cart-process-grid img{width:100%;height:220px;object-fit:cover;display:block}
@media(max-width:500px){.cart-process-grid img{height:150px}.page-controls{top:14px}}

/* Intro top row: name, first line of prose, and theme toggle share one top edge. */
.opening-editorial{padding-top:112px;row-gap:72px}
.opening-revised h1 .opening-name{line-height:1;margin:0 0 .35em}
.opening-editorial .opening-prose{padding-top:0;margin-top:calc((1em - 1lh) / 2)}
.page-controls{top:112px}
/* Base row spans to the project nav's edges (4vw), not the intro's. */
.opening-editorial .opening-base{margin-left:calc(4vw - 8vw);margin-right:calc(4vw - 8vw)}
@media(max-width:800px){.opening-editorial{padding-top:64px;row-gap:40px}.page-controls{top:62px}.opening-editorial .opening-base{margin-left:0;margin-right:0}}

/* Paragraph spacing for multi-paragraph PTC blurbs. */
.offscreen-story p+p,#argos-companion h3~p+p{margin-top:.9em}

/* ArgOS intro copy. */
#argos-concept .argos-lead{font-size:clamp(20px,2vw,26px);line-height:1.35;letter-spacing:-.02em;max-width:30ch;margin:14px 0 0}
#argos-concept .argos-intro{max-width:62ch;margin-top:18px}
#argos-concept .argos-intro p{margin:0 0 .9em}
#argos-concept .subscene-title>.argos-lead,#argos-concept .subscene-title>.argos-intro{grid-column:2}
@media(max-width:800px){#argos-concept .subscene-title>.argos-lead,#argos-concept .subscene-title>.argos-intro{grid-column:1/-1}}
#argos-concept .argos-story>p+p{margin-top:.9em}
@media(min-width:1001px){#argos-concept .argos-experience{grid-template-columns:minmax(0,.7fr) auto minmax(0,1.3fr)!important}}
#argos-concept .argos-story{max-width:520px}
#argos-concept .argos-story>p{max-width:56ch;margin-bottom:0}
#argos-concept .argos-story>p:last-of-type{margin-bottom:22px}
#argos-concept .argos-moves{list-style:none;padding:0;margin:0 0 24px;font-size:12px;color:var(--muted);max-width:56ch}
#argos-concept .argos-moves li{padding:9px 0;border-top:1px solid var(--line,#6879623d);line-height:1.6}
#argos-concept .argos-moves li:last-child{border-bottom:1px solid var(--line,#6879623d)}
#argos-concept .argos-moves b{display:block;font-weight:400;color:var(--ink,currentColor);font-size:11px;letter-spacing:.02em}