/* ========================================================================== A MILLION SCATTERED PIECES — publication layer Draft 01 · loads AFTER assets/styles.css (v0.6.8) and extends it. Nothing here redefines a v0.6.8 token. New tokens only. ========================================================================== */ /* --- Raleway Dots: AMSP masthead only ------------------------------------ font-display:block, not swap. Every other face in this system uses swap, but the masthead is the dominant composition and a fallback repaint would visibly rewrite it. Layout is protected independently by --mast-reserve below, so the block period cannot shift the page. Subset: A-Z 0-9 space middot em-dash hyphen period. 3.5 KB. --------------------------------------------------------------------------- */ @font-face{ font-family:"Raleway Dots"; src:url("fonts/raleway-dots-400.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:block; } :root{ --mast:"Raleway Dots","Raleway Dots Fallback",sans-serif; /* Advance width of the masthead strings in Raleway Dots, in em. Measured from the subset font. font-size = target width / ratio. */ --mast-ratio-full:14.758; /* A MILLION SCATTERED PIECES */ /* The desktop line is set to 99.3% of the available width, not 100%. At exactly 100% the computed width equals the container to the pixel and subpixel rounding forces a wrap. 0.7% is the smallest reliable headroom. */ --mast-fit:.993; --mast-ratio-l1:5.016; /* A MILLION */ --mast-ratio-l2:5.817; /* SCATTERED */ --mast-ratio-l3:3.395; /* PIECES */ /* Mobile scatter — each line's width as a fraction of the masthead container, and its left offset as a fraction of the same container. l2 and l3 land flush on the right edge; l1 stops short. */ /* Draft 04: all three lines share one left edge. PIECES is no longer offset — the scatter now comes from the size step, not indentation. */ --mast-l1-w:.82; --mast-l1-x:0; --mast-l2-w:.985; --mast-l2-x:0; --mast-l3-w:.69; --mast-l3-x:0; --mast-gut:18px; --mast-lh:1.02; --amsp-max:1180px; --rule:1px; } @media(min-width:700px){:root{--mast-gut:36px}} /* --- utility bar --------------------------------------------------------- Same 50px ink strip the Listening Library uses. The masthead is not in it. --------------------------------------------------------------------------- */ .amsp-nav{background:var(--ink);color:var(--paper);font-family:var(--mono); text-transform:uppercase;letter-spacing:.11em;font-size:10px; border-bottom:1px solid rgba(255,255,255,.25)} .amsp-nav__in{display:grid;grid-template-columns:1fr auto;align-items:center; gap:12px;min-height:50px} .amsp-nav__brand{text-decoration:none;color:var(--signal);font-weight:600} .amsp-nav__links{display:flex;gap:16px;align-items:center} .amsp-nav__links a{text-decoration:none} @media(max-width:699px){.amsp-nav__links{display:none}} /* --- masthead ------------------------------------------------------------ Full-bleed signal field. The h1 sizes itself off its own padded container so the title always resolves to a known fraction of the page width, at 1440 and at 390 alike. cqw is used rather than vw so a visible scrollbar cannot push the title into horizontal overflow. --------------------------------------------------------------------------- */ .masthead{background:var(--signal);padding:30px 0 52px} .masthead__in{container-type:inline-size; padding-left:var(--mast-gut);padding-right:var(--mast-gut)} .masthead__meta{font-family:var(--mono);text-transform:uppercase; letter-spacing:.11em;font-size:11px;line-height:1.45;color:var(--ink); margin:0 0 22px;padding-top:22px; border-top:1px dotted rgba(10,10,10,.5)} .masthead__meta span{white-space:nowrap} .masthead__meta i{font-style:normal;padding:0 .35em} .masthead h1{font-family:var(--mast);font-weight:400;letter-spacing:0; line-height:var(--mast-lh);margin:0;color:var(--ink); text-transform:uppercase} .masthead h1 .l{display:block;white-space:nowrap} /* Mobile / default: three scattered lines. */ .masthead h1 .l1{font-size:calc(100cqw * var(--mast-l1-w) / var(--mast-ratio-l1)); margin-left:calc(100cqw * var(--mast-l1-x))} .masthead h1 .l2{font-size:calc(100cqw * var(--mast-l2-w) / var(--mast-ratio-l2)); margin-left:calc(100cqw * var(--mast-l2-x))} .masthead h1 .l3{font-size:calc(100cqw * var(--mast-l3-w) / var(--mast-ratio-l3)); margin-left:calc(100cqw * var(--mast-l3-x))} /* Reserved height, in case the webfont never paints. Keeps the yellow field and everything below it at a fixed position regardless of font state. */ .masthead h1{min-height:calc( (100cqw * var(--mast-l1-w) / var(--mast-ratio-l1)) * var(--mast-lh) + (100cqw * var(--mast-l2-w) / var(--mast-ratio-l2)) * var(--mast-lh) + (100cqw * var(--mast-l3-w) / var(--mast-ratio-l3)) * var(--mast-lh))} /* Desktop: one horizontal line spanning the full padded width. */ @media(min-width:900px){ .masthead{padding:44px 0 96px} .masthead h1{white-space:nowrap; /* the h1's own size must match the line, or styles.css h1 clamp (150px) sets an oversized line box around 92px glyphs */ font-size:calc(100cqw * var(--mast-fit) / var(--mast-ratio-full)); min-height:calc(100cqw * var(--mast-fit) / var(--mast-ratio-full) * var(--mast-lh))} .masthead h1 .l{display:inline;white-space:normal;margin-left:0; font-size:calc(100cqw * var(--mast-fit) / var(--mast-ratio-full))} .masthead h1 .l2::before,.masthead h1 .l3::before{content:" "} .masthead__meta{margin-bottom:30px} } /* cqw fallback for engines without container queries. */ @supports not (container-type:inline-size){ .masthead h1 .l1{font-size:calc((100vw - 2*var(--mast-gut)) * var(--mast-l1-w) / var(--mast-ratio-l1))} .masthead h1 .l2{font-size:calc((100vw - 2*var(--mast-gut)) * var(--mast-l2-w) / var(--mast-ratio-l2))} .masthead h1 .l3{font-size:calc((100vw - 2*var(--mast-gut)) * var(--mast-l3-w) / var(--mast-ratio-l3))} @media(min-width:900px){ .masthead h1 .l{font-size:calc((100vw - 2*var(--mast-gut)) * var(--mast-fit) / var(--mast-ratio-full))} } } .masthead__sub{margin:34px 0 0;max-width:34em;color:var(--ink)} @media(min-width:900px){.masthead__sub{margin-top:52px}} /* --- editorial sections -------------------------------------------------- */ .amsp-sec__head{margin:0 0 30px} .amsp-sec__head h2{margin:0} /* Placeholder blocks. Deliberately unstyled-looking: dashed, mono, muted. These are structural openings, not content. */ .pending{font-family:var(--mono);text-transform:uppercase;letter-spacing:.09em; font-size:11px;line-height:1.6;color:var(--muted-deep); border:1px dashed var(--muted);padding:16px 18px;margin:0 0 20px} .pending--title{font-size:13px} .pending--figure{display:grid;place-items:center;aspect-ratio:4/3; text-align:center;padding:24px;margin-bottom:26px} .band--signal .pending,.band--rain .pending,.band--mist .pending{color:var(--muted-deep)} .edition{display:grid;gap:34px} @media(min-width:900px){ .edition{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px; align-items:start} } .edition__meta{margin-top:18px} /* Published edition entry (Edition 000) */ .ed-entry{display:grid;gap:22px} @media(min-width:760px){.ed-entry{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:38px;align-items:start}} .ed-entry img{width:100%;height:auto;border:1px solid var(--ink)} .ed-entry h3{margin:0 0 10px} /* --- listening ----------------------------------------------------------- */ .listening{position:relative} .listening__cat{position:absolute;z-index:1;pointer-events:none;user-select:none; left:calc(var(--gut) * -1.6);bottom:0;width:clamp(190px,22vw,330px)} .listening__cat img{width:100%;height:auto} .listening>.wrap{position:relative;z-index:2} @media(max-width:899px){.listening__cat{display:none}} .archive-grid{display:grid;gap:18px} @media(min-width:760px){.archive-grid{grid-template-columns:repeat(2,1fr)}} .listening__more{margin-top:28px} /* --- archive list -------------------------------------------------------- */ .arch{border-top:var(--rule) solid var(--ink);margin-top:6px} .arch__row{display:grid;gap:4px 24px;padding:18px 0; border-bottom:var(--rule) solid var(--line)} @media(min-width:760px){ .arch__row{grid-template-columns:96px minmax(0,1fr) 150px;align-items:baseline} } .arch__n{font-family:var(--mono);font-size:11px;text-transform:uppercase; letter-spacing:.11em;color:var(--muted)} .arch__t{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.3;margin:0} .arch__t a{text-decoration-thickness:1px} .arch__s{font-family:var(--mono);font-size:10px;text-transform:uppercase; letter-spacing:.09em;color:var(--muted)} /* --- following ----------------------------------------------------------- */ .follow{display:grid;gap:26px} .follow>*{min-width:0} @media(min-width:860px){.follow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}} .follow__note{font-family:var(--mono);font-size:10px;text-transform:uppercase; letter-spacing:.09em;line-height:1.7;color:#a7a99e; border:1px dashed #6d6f67;padding:16px 18px} .follow a.direct{font-family:var(--display);font-weight:700; font-size:clamp(19px,3vw,30px);line-height:1.25;display:inline-block; max-width:100%;overflow-wrap:anywhere} /* --- footer -------------------------------------------------------------- */ .amsp-foot{background:var(--ink);color:var(--paper);padding:52px 0 40px} .amsp-foot__grid{display:grid;gap:26px} @media(min-width:760px){.amsp-foot__grid{grid-template-columns:1fr auto;align-items:end}} .amsp-foot a{color:var(--signal)} .amsp-foot .credits{padding:26px 0 0;border-top:1px solid rgba(255,255,255,.25); margin-top:30px} .amsp-foot__mark{font-family:var(--mast);font-size:20px;letter-spacing:0; text-transform:uppercase;color:var(--paper);line-height:1.2} @media(prefers-reduced-motion:reduce){ .room-card{transition:none} .room-card:hover{transform:none} } /* Draft 02 — Edition 001 visual/content pass */ .edition--intro{align-items:center} .author-portrait-wrap{max-width:440px;margin-inline:auto} .author-portrait{display:block;width:min(100%,420px);aspect-ratio:1/1;object-fit:cover;object-position:50% 44%;border-radius:50%;border:2px solid var(--ink);background:var(--paper)} .portrait-caption{font-family:var(--mono);text-transform:uppercase;letter-spacing:.09em;margin:14px 0 0;text-align:center} .intro-letter__lead{font-family:var(--display);font-size:clamp(24px,3.5vw,42px);line-height:1.18;margin-top:0} .ecosystem-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--ink);border:1px solid var(--ink);margin-top:58px} .ecosystem-mini a{display:flex;flex-direction:column;gap:5px;background:var(--paper);padding:18px 20px;text-decoration:none;color:var(--ink);min-height:94px} .ecosystem-mini a:hover{background:var(--signal)} .ecosystem-mini strong{font-family:var(--display);font-size:17px} .ecosystem-mini span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-deep)} .tech-grid{display:grid;gap:1px;background:var(--ink);border:1px solid var(--ink)} .tech-grid article{background:var(--signal);padding:26px} .tech-grid h3{margin:0 0 12px;font-size:clamp(20px,2.4vw,28px)} .tech-grid p{margin:0} @media(min-width:900px){.tech-grid{grid-template-columns:repeat(3,1fr)}} /* ========================================================================== DRAFT 04 LAYER Loads last. Overrides the Draft 02/03 rules above rather than editing them, so the diff against Draft 03 stays readable. ========================================================================== */ /* --- 1. Sticky compact header -------------------------------------------- The utility bar IS the compact masthead. It sticks from first paint, so the behaviour works with JavaScript disabled. The JS in site-draft04.js only adds .mast-past, which upgrades the bar's presence once the large masthead has scrolled away. No layout shift either way: the bar is the same 50px height in both states. --------------------------------------------------------------------------- */ .amsp-nav{position:sticky;top:0;z-index:60; transition:background-color .28s ease,box-shadow .28s ease} .amsp-nav__brand{transition:font-size .28s ease,letter-spacing .28s ease} .mast-past .amsp-nav{box-shadow:0 1px 0 rgba(240,226,15,.55)} .mast-past .amsp-nav__brand{font-family:var(--mono);font-size:11px; letter-spacing:.11em;text-transform:uppercase;font-weight:700} @media(prefers-reduced-motion:reduce){ .amsp-nav,.amsp-nav__brand{transition:none} } /* --- 2. Large arrival masthead (desktop) --------------------------------- Poster state on first arrival. The h1 keeps its container-query sizing; only the field around it grows. min-height is capped in vh so it cannot push the first section off a short laptop screen. --------------------------------------------------------------------------- */ @media(min-width:900px){ .masthead{padding:72px 0 104px;min-height:min(70vh,680px); display:flex;align-items:center} .masthead__in{width:100%} .masthead__meta{font-size:12px;margin-bottom:40px} .masthead__sub{margin-top:60px;font-size:clamp(20px,1.7vw,27px)} } /* Short desktop viewports: drop the vh floor rather than scroll-trap. */ @media(min-width:900px) and (max-height:640px){ .masthead{min-height:0;padding:48px 0 72px} } /* --- 3. Introduction: typographic, no portrait ---------------------------- */ .edition--intro{grid-template-columns:minmax(0,1fr);gap:0} @media(min-width:900px){.edition--intro{grid-template-columns:minmax(0,1fr)}} .intro-letter{max-width:34em} .intro-letter__lead{font-size:clamp(27px,4vw,46px);line-height:1.14; margin:0 0 34px;max-width:16em} .intro-letter p+p{margin-top:1.35em} @media(min-width:900px){ .edition--intro{padding-block:8px} .intro-letter p:not(.intro-letter__lead){font-size:18px;line-height:1.72} } /* --- 4. Ecosystem destinations: separate places, not tabs ----------------- */ .ecosystem-mini{display:grid;grid-template-columns:minmax(0,1fr); gap:0;background:transparent;border:0;border-top:2px solid var(--ink); margin-top:64px} .ecosystem-mini a{display:grid;gap:6px;background:transparent; padding:26px 0;border-bottom:1px solid var(--line);min-height:0} .ecosystem-mini a:hover,.ecosystem-mini a:focus-visible{background:transparent} .ecosystem-mini a:hover strong,.ecosystem-mini a:focus-visible strong{ text-decoration:underline;text-decoration-thickness:2px; text-underline-offset:.12em} .ecosystem-mini strong{font-family:var(--display);font-weight:700; font-size:clamp(26px,4.4vw,40px);line-height:1.1;letter-spacing:-.02em} .ecosystem-mini span{font-family:var(--mono);font-size:11px;letter-spacing:.1em} @media(min-width:900px){ .ecosystem-mini a{padding:34px 0;grid-template-columns:minmax(0,1fr) 220px; align-items:baseline;gap:24px} } /* --- 5. Chance of Katz project area --------------------------------------- */ .project{display:grid;gap:30px} @media(min-width:900px){ .project{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px; align-items:start} } .project__title{margin:0 0 6px;font-size:clamp(34px,6vw,62px);line-height:1.04; letter-spacing:-.025em} .project__kicker{font-family:var(--mono);font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:var(--muted-deep);margin:0 0 18px} .project__go{margin-top:26px} .project__go a{font-family:var(--display);font-weight:700; font-size:clamp(19px,2.4vw,26px);line-height:1.25;display:inline-block; overflow-wrap:anywhere} .project__aside{border-top:2px solid var(--ink);padding-top:20px} .project__aside dl{margin:0;display:grid;gap:14px} .project__aside dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted-deep);margin:0} .project__aside dd{margin:0;font-size:15px;line-height:1.55} /* --- 6. Tech Watch: compact recurring column ------------------------------ Was a full-height signal field with a 56px display heading. Now a short note: shallower band, heading at body-display scale, three tight items. --------------------------------------------------------------------------- */ .band--signal#tech-watch{padding-block:clamp(34px,4vw,52px)} #tech-watch .amsp-sec__head{margin-bottom:20px; display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px} #tech-watch .amsp-sec__head h2{font-size:clamp(21px,2.2vw,26px); letter-spacing:-.01em;line-height:1.2;order:-1} #tech-watch .eyebrow{margin:0} #tech-watch .tech-grid{gap:1px} #tech-watch .tech-grid article{padding:18px 20px} #tech-watch .tech-grid h3{font-size:clamp(15px,1.5vw,17px);margin:0 0 7px; font-family:var(--body);font-weight:700;letter-spacing:0} #tech-watch .tech-grid p{font-size:14px;line-height:1.6} /* --- 7. Listening threshold ---------------------------------------------- The cat is no longer bled off the left edge. It sits fully inside the band, shifted right of its Draft 03 position, with room beneath it. --------------------------------------------------------------------------- */ .listening{padding-bottom:clamp(120px,16vw,200px)} .listening__cat{left:auto;right:auto;bottom:clamp(72px,6vw,102px); left:clamp(8px,3vw,64px);width:clamp(190px,20vw,300px)} @media(max-width:899px){ /* In flow on small screens: cannot overflow, and the placement reads as deliberate rather than as a decoration that fell off the edge. */ .listening{padding-bottom:clamp(56px,10vw,90px)} .listening__cat{display:block;position:static;width:min(62%,250px); margin:34px 0 0 auto;padding-right:12px} .listening>.wrap{overflow:visible} } .listening__exit{margin-top:30px} .listening__browse{margin-top:18px} /* --- 8. Room cards live in assets/listening-draft04.css (archive scope). */ /* --- 9. Footer: closing identity block ------------------------------------ */ .amsp-foot{padding:clamp(56px,7vw,84px) 0 44px} .amsp-foot__grid{display:grid;gap:44px;grid-template-columns:minmax(0,1fr)} @media(min-width:860px){ .amsp-foot__grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:64px;align-items:start} } .amsp-foot__mark{font-family:var(--mast);text-transform:uppercase; color:var(--paper);line-height:1.06;letter-spacing:0;margin:0 0 26px; font-size:clamp(30px,7.4vw,68px)} /* Contrast: Draft 03 used --muted (#65665F) on ink, which fails AA. --foot-dim is 8.4:1 on #0A0A0A. */ .amsp-foot{--foot-dim:#CFD1C8} .amsp-foot p,.amsp-foot dd{color:var(--foot-dim)} .amsp-foot .small{font-size:14px;line-height:1.65} .amsp-foot a{color:var(--signal);text-underline-offset:.15em} .amsp-foot a:hover{text-decoration-thickness:2px} .amsp-foot__lockup{display:flex;align-items:center;gap:14px; margin:0 0 14px;flex-wrap:wrap} /* Logo slot — reserved at final size so dropping the asset in causes no reflow. See index.html for the replacement instruction. */ .amsp-foot__logo{flex:0 0 auto;width:38px;height:38px;display:grid; place-items:center} .amsp-foot__logo img{width:100%;height:100%;object-fit:contain;display:block} .amsp-foot__logo--lemon{font-size:29px;line-height:1} .amsp-foot__lockup a{font-family:var(--display);font-weight:700;font-size:19px; text-decoration:none} .amsp-foot__lockup a:hover{text-decoration:underline} .amsp-foot__nav{display:grid;gap:2px;margin:0;padding:0;list-style:none} .amsp-foot__nav a{display:inline-block;padding:9px 0;font-size:14px; min-height:44px;line-height:26px} .amsp-foot__label{font-family:var(--mono);font-size:10px;letter-spacing:.11em; text-transform:uppercase;color:var(--foot-dim);margin:0 0 8px} .amsp-foot .credits{color:var(--foot-dim);font-size:12px; padding-top:24px;margin-top:40px} @media(max-width:600px){ .amsp-foot__nav a{padding:11px 0} .amsp-foot .credits{margin-top:32px} } /* --- 10. About page ------------------------------------------------------- */ .about-id{display:flex;align-items:center;gap:18px;margin:0 0 30px; flex-wrap:wrap} /* True circle, identity scale. The source file is untouched and still square at 1400px; the crop is CSS only. */ .about-id__portrait{flex:0 0 auto;width:84px;height:84px;border-radius:50%; object-fit:cover;object-position:50% 44%;border:2px solid var(--ink); background:var(--paper);display:block} .about-id__who{margin:0;font-family:var(--display);font-weight:700; font-size:20px;line-height:1.25} .about-id__where{margin:4px 0 0;font-family:var(--mono);font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--muted-deep)} .about-block{max-width:34em} .about-block h2{font-size:clamp(23px,3vw,30px);margin:44px 0 12px} .about-block h2:first-of-type{margin-top:0} .about-contact{margin-top:40px;border-top:2px solid var(--ink);padding-top:22px} /* About page: the h1 inherits the 150px display clamp from styles.css, which is masthead scale. This is a reference page, not a cover. */ .about-page h1{font-size:clamp(34px,6vw,60px);line-height:1.06; letter-spacing:-.025em;max-width:12em} .amsp-nav__links a[aria-current="page"]{color:var(--signal); text-decoration:underline;text-underline-offset:.25em} /* ========================================================================== DRAFT 04.2 — visual / ecosystem pass ========================================================================== */ /* Header: publication identity + spinning Lemon Juice mark + radio controls */ .amsp-nav__in{grid-template-columns:auto auto 1fr;column-gap:10px} .amsp-nav__lemon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%; text-decoration:none;overflow:visible;justify-self:start} .amsp-nav__lemon img{width:28px;height:24px;object-fit:contain;display:block; animation:amsp-lemon-spin 16s linear infinite;transform-origin:50% 50%} .amsp-nav__lemon:hover img,.amsp-nav__lemon:focus-visible img{ animation:amsp-lemon-reverse 4s linear infinite;filter:brightness(1.05)} @keyframes amsp-lemon-spin{to{transform:rotate(360deg)}} @keyframes amsp-lemon-reverse{to{transform:rotate(-360deg)}} .amsp-nav__links{justify-self:end;gap:7px} .nav-radio{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.42); padding:7px 9px;min-height:30px;line-height:1;text-decoration:none!important;color:var(--paper)!important; background:transparent;transition:background .15s ease,color .15s ease,border-color .15s ease} .nav-radio__dot{width:6px;height:6px;border:1px solid currentColor;border-radius:50%;display:inline-block} .nav-radio:hover,.nav-radio:focus-visible{background:var(--signal);color:var(--ink)!important;border-color:var(--signal)} .nav-radio[aria-current="page"]{background:var(--paper);color:var(--ink)!important;border-color:var(--paper)} .nav-radio[aria-current="page"] .nav-radio__dot{background:var(--signal);border-color:var(--ink)} .nav-radio-wrap{position:relative;display:inline-flex} .nav-radio-tip{ position:absolute;z-index:40;top:calc(100% + 8px);right:0; width:max-content;max-width:min(300px,42vw);padding:7px 9px; border:1px solid rgba(255,255,255,.14);background:rgba(10,10,10,.96); color:rgba(255,255,255,.82);font:500 9px/1.4 var(--mono); letter-spacing:.03em;text-transform:none;white-space:normal; opacity:0;visibility:hidden;transform:translateY(-2px);pointer-events:none; transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s; } .nav-radio-wrap:hover .nav-radio-tip,.nav-radio-wrap:focus-within .nav-radio-tip{ opacity:1;visibility:visible;transform:none;transition-delay:0s; } @media(max-width:699px){.amsp-nav__in{grid-template-columns:1fr auto}.amsp-nav__lemon{width:28px;height:28px}.amsp-nav__links{display:none}} /* Hero: yellow field first, photographic lemon atmosphere above it, type above both */ .masthead{position:relative;isolation:isolate;background-color:var(--signal);overflow:hidden} .masthead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(90deg,rgba(240,226,15,.98) 0%,rgba(240,226,15,.86) 34%,rgba(240,226,15,.36) 68%,rgba(240,226,15,.14) 100%),url("lemon-glow-hero.jpg"); background-size:cover;background-position:64% center;background-repeat:no-repeat;opacity:.86} @media(max-width:699px){.masthead::before{background-image:linear-gradient(180deg,rgba(240,226,15,.88) 0%,rgba(240,226,15,.46) 54%,rgba(240,226,15,.78) 100%),url("lemon-glow-hero.jpg");background-position:54% center;opacity:.72}} /* Ecosystem: two distinct portals, not directory rows */ .ecosystem-mini{margin-top:64px;background:transparent;border:0;display:grid;gap:18px;grid-template-columns:1fr} .ecosystem-mini .ecosystem-portal{min-height:210px;border:2px solid var(--ink);padding:26px 28px;display:flex; flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:9px;position:relative;overflow:hidden; text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease,background .18s ease} .ecosystem-mini .ecosystem-portal:hover,.ecosystem-mini .ecosystem-portal:focus-visible{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)} .ecosystem-portal__rel{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase} .ecosystem-portal strong{font-family:var(--display);font-size:clamp(34px,5vw,62px);line-height:1!important} .ecosystem-portal__desc{font-family:var(--sans);font-size:15px;line-height:1.5;max-width:38em;text-transform:none;letter-spacing:0} .ecosystem-portal__cta{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;margin-top:8px} .portal--lemon{background:var(--signal)} .portal--jay{background:var(--paper)} @media(min-width:850px){.ecosystem-mini{grid-template-columns:1.13fr .87fr;align-items:end}.portal--jay{margin-left:0;transform:translateY(34px)}.ecosystem-mini .portal--jay:hover,.ecosystem-mini .portal--jay:focus-visible{transform:translate(-4px,30px)}} @media(max-width:849px){#practice .ecosystem-mini{grid-auto-rows:1fr}#practice .ecosystem-portal{height:100%}} /* Chance of Katz: game-like portal button without importing another font */ .katz-game-button{display:inline-flex!important;align-items:center;justify-content:center;background:#090909!important;color:#fff!important; border:3px solid #090909!important;padding:15px 18px!important;text-decoration:none!important;font-family:var(--mono)!important; font-weight:600!important;font-size:13px!important;letter-spacing:.07em!important;text-transform:uppercase;box-shadow:7px 7px 0 var(--signal); transition:transform .12s ease,box-shadow .12s ease!important} .katz-game-button:hover,.katz-game-button:focus-visible{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--signal);background:#090909!important;color:var(--signal)!important} /* Recipes & Bad Advice: actual compact comic object */ .recipe-card{border:2px solid var(--ink);padding:22px 24px;background:var(--paper);max-width:500px;box-shadow:6px 6px 0 var(--signal)} .recipe-card__no{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px} .recipe-card h3{font-size:clamp(24px,4vw,38px);margin:0 0 18px} .recipe-card__steps p{margin:0 0 5px;font-size:17px} .recipe-card__serves{border-top:1px solid var(--ink);padding-top:14px;margin:18px 0 0;font-size:15px} /* Prelaunch Listening Room state */ .direct-listen.is-disabled{cursor:default;opacity:.67;background:transparent!important;color:inherit!important;border:1px dashed currentColor;box-shadow:none!important} .room-card--pending{cursor:default} .pending-room-link{display:inline-block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px;padding:12px 0;opacity:.7} /* Footer: real Lemon Juice mark + dandelion photographic atmosphere */ .amsp-foot{position:relative;isolation:isolate;overflow:hidden} .amsp-foot::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.88) 50%,rgba(0,0,0,.52) 100%),url("dandelion-footer.jpg") right center/cover no-repeat;opacity:.92} .amsp-foot__logo{width:138px;height:auto;min-height:40px;display:block} .amsp-foot__logo img{width:138px;height:auto;max-height:48px;object-fit:contain;object-position:left center} .amsp-foot__lockup{align-items:center} /* About: large linked destinations after the explanation */ .about-portals{display:grid;gap:16px;margin:54px 0 24px;width:min(900px,calc(100vw - 2*var(--gut)))} .about-portal{display:flex;flex-direction:column;gap:8px;border:2px solid var(--ink);padding:24px 26px;min-height:180px; text-decoration:none;color:var(--ink);position:relative;transition:transform .18s ease,box-shadow .18s ease} .about-portal:hover,.about-portal:focus-visible{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)} .about-portal__rel{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.11em} .about-portal strong{font-family:var(--display);font-size:clamp(30px,5vw,54px);line-height:1.02} .about-portal__desc{font-size:15px;line-height:1.5;max-width:38em} .about-portal__cta{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:auto} .about-portal--jay{background:var(--paper)} .about-portal--lemon{background:var(--signal)} .about-portal--amsp{background:var(--ink);color:var(--paper)} @media(min-width:850px){.about-portals{grid-template-columns:1fr 1fr}.about-portal--amsp{grid-column:1/-1;min-height:130px}} @media(prefers-reduced-motion:reduce){ .amsp-nav__lemon img,.amsp-nav__lemon:hover img,.amsp-nav__lemon:focus-visible img{animation:none!important} .ecosystem-mini .ecosystem-portal,.about-portal,.katz-game-button{transition:none!important;transform:none!important} } /* ==========================================================================\n DRAFT 04.3 — composition / footer / recipe pass\n ========================================================================== */ @font-face{font-family:"Press Start 2P";src:url("fonts/press-start-2p.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap} /* tighter poster: larger lettering, lemon rides above the glow */ @media(min-width:900px){ .masthead{padding:28px 0 56px} .masthead__meta{padding-top:14px;margin-bottom:20px} .masthead h1{font-size:calc(100cqw * 1.035 / var(--mast-ratio-full));min-height:calc(100cqw * 1.035 / var(--mast-ratio-full) * var(--mast-lh))} .masthead h1 .l{font-size:calc(100cqw * 1.035 / var(--mast-ratio-full))} .masthead__sub{margin-top:30px} .masthead::before{background-size:cover;background-position:62% 38%;opacity:.82} } @media(max-width:899px){.masthead{padding-bottom:38px}.masthead__sub{margin-top:24px}.masthead::before{background-position:55% 28%}} /* ecosystem portals level and equal */ @media(min-width:850px){ .ecosystem-mini{grid-template-columns:1fr 1fr;align-items:stretch} .portal--jay{transform:none!important;margin-left:0!important} .ecosystem-mini .portal--jay:hover,.ecosystem-mini .portal--jay:focus-visible{transform:translate(-4px,-4px)!important} } /* Chance of Katz — actual game type and larger portal */ .katz-game-button{font-family:"Press Start 2P",var(--mono)!important;font-size:clamp(14px,1.8vw,22px)!important;line-height:1.5!important;padding:22px 26px!important;box-shadow:10px 10px 0 var(--signal);max-width:100%} .katz-game-button:hover,.katz-game-button:focus-visible{transform:translate(5px,5px);box-shadow:5px 5px 0 var(--signal)} @media(max-width:699px){.katz-game-button{width:100%;font-size:13px!important;padding:20px 16px!important}} /* recipe image — visual joke first, explanation second */ .recipe-card{max-width:620px} .recipe-card__figure{margin:0 0 18px;border:1px solid var(--ink);overflow:hidden;background:#fff} .recipe-card__figure img{display:block;width:100%;height:auto} /* Footer: clean black field, flowers lower and smaller, vertical information */ .amsp-foot{padding:clamp(58px,7vw,92px) 0 34px;min-height:560px} .amsp-foot::before{inset:auto 0 0 auto;width:min(64vw,960px);height:72%;background:url("dandelion-footer.jpg") right bottom/contain no-repeat;opacity:.72} .amsp-foot__mark{font-size:clamp(46px,8.4vw,104px);max-width:11em;line-height:.95;margin:0 0 44px;position:relative;z-index:2} .amsp-foot__grid{position:relative;z-index:2;align-items:start;gap:54px} @media(min-width:820px){.amsp-foot__grid{grid-template-columns:minmax(0,1.2fr) minmax(220px,.65fr)}} .amsp-foot__publisher-logo{display:inline-block;width:min(220px,55vw);margin:2px 0 16px} .amsp-foot__publisher-logo img{display:block;width:100%;height:auto} .amsp-foot__desc{max-width:36em!important} .amsp-foot__lemon{display:block;width:clamp(92px,10vw,138px);margin:22px 0 12px;text-decoration:none} .amsp-foot__lemon img{display:block;width:100%;height:auto;animation:amsp-lemon-spin 18s linear infinite;transform-origin:center} .amsp-foot__lemon:hover img,.amsp-foot__lemon:focus-visible img{animation:amsp-lemon-reverse 4s linear infinite} .amsp-foot__contacts{display:grid;gap:13px;margin-top:24px;max-width:560px} .amsp-foot__contacts p{margin:0;display:grid;gap:2px} .amsp-foot__contact-label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--foot-dim)} .amsp-foot__contacts a{font-size:14px;overflow-wrap:anywhere} .amsp-foot__nav{gap:0} .amsp-foot__nav a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.24);width:100%;padding:10px 0} .amsp-foot__nav a:hover,.amsp-foot__nav a:focus-visible{color:var(--signal);border-color:var(--signal)} .amsp-foot .credits{position:relative;z-index:2;margin-top:42px} @media(max-width:700px){.amsp-foot{min-height:0}.amsp-foot::before{width:100%;height:42%;opacity:.48}.amsp-foot__mark{font-size:clamp(38px,13vw,68px)}} /* About: portrait and bio arrive near the top */ .about-block>.about-id{margin:20px 0 28px;align-items:center} .about-id__portrait{width:96px;height:96px} .about-id__role{margin:6px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-deep)} .about-id__links{margin:8px 0 0;font-size:13px} @media(prefers-reduced-motion:reduce){.amsp-foot__lemon img,.amsp-foot__lemon:hover img,.amsp-foot__lemon:focus-visible img{animation:none!important}} /* ========================================================================== DRAFT 04.3f — PRE-FREEZE CORRECTIONS (2026-09-06) Four scoped fixes found in the 1440 / 390 render review. Nothing else in the build changes. Each block is independently removable. ========================================================================== */ /* F1 — mobile masthead meta was clipped by .masthead{overflow:hidden}. The middle span (nowrap, 517px) ran 145px past the container and lost "OPENS SEPTEMBER 15". Stacked on small screens instead. */ @media(max-width:899px){ .masthead__meta{display:grid;gap:5px} .masthead__meta span{white-space:normal} .masthead__meta i{display:none} } /* F2 — ecosystem portals. The Draft 04 rules `.ecosystem-mini a` and `.ecosystem-mini span` (0,1,1) outrank `.portal--lemon` and `.ecosystem-portal__desc` (0,1,0), so the yellow field never painted and the descriptions rendered as uppercase mono. `--sans` is also not a token in this system; the sans face is `--body`. */ .ecosystem-mini a.portal--lemon{background:var(--signal)} .ecosystem-mini a.portal--jay{background:var(--paper)} .ecosystem-mini a span.ecosystem-portal__desc{font-family:var(--body);font-size:15px; line-height:1.5;letter-spacing:0;text-transform:none;color:var(--ink)} .ecosystem-mini a span.ecosystem-portal__rel, .ecosystem-mini a span.ecosystem-portal__cta{color:var(--ink)} /* F3 — recipe figure. The source is 1536x2048; at full card width it rendered 568x757 and made Recipes the tallest section on the page. The frame is capped so the column stays a compact recurring object. The final memo asset can drop in at any ratio without touching layout. */ .recipe-card__figure{max-width:300px} /* F4 — footer dandelions. `contain` at 64vw/72% drew a hard-edged rectangle whose top and left seams cut through the Elsewhere links. Now a full-width bottom band: the source photograph is already black at its own top and bottom edges, so at this size and position the flowers read as low horizontal atmosphere with no visible frame. Mask fades the top so the link column stays clean. */ .amsp-foot::before{inset:auto 0 0 0;width:auto;height:min(38%,330px); background:url("dandelion-footer.jpg") 50% 36%/cover no-repeat;opacity:.32; -webkit-mask-image:linear-gradient(to top,#000 44%,transparent 100%); mask-image:linear-gradient(to top,#000 44%,transparent 100%)} @media(max-width:700px){ .amsp-foot::before{width:auto;height:min(26%,240px);opacity:.3} } /* ========================================================================== DRAFT 04.4 — POST-FREEZE POLISH (2026-09-06) Footer, About atmosphere, navigation, scroll cleanup, temporary recipe scale. ========================================================================== */ /* Footer: exact black field to merge with the black-backed dandelion source. */ .amsp-foot{background:#000000} .amsp-foot::before{ -webkit-mask-image:none!important; mask-image:none!important; opacity:.42; height:min(32%,280px); background-position:50% 42%; } @media(min-width:820px){ .amsp-foot__mark{ max-width:none; white-space:nowrap; font-size:clamp(44px,5.15vw,74px); line-height:1; } } @media(max-width:819px){ .amsp-foot__mark{white-space:normal;max-width:8.4em} } /* About: a warm signal wash arrives from the top, while the grid remains visible. */ .about-page{position:relative;isolation:isolate} .about-page::after{ content:"";position:absolute;inset:0 0 auto 0;height:min(720px,72vh); pointer-events:none;z-index:0; background:linear-gradient(to bottom,rgba(240,226,15,.30) 0%,rgba(240,226,15,.14) 34%,rgba(240,226,15,0) 100%); } .about-page>.wrap{position:relative;z-index:1} /* Temporary Apple Salad reference stays intentionally modest until the final reshoot lands. */ .recipe-card__figure{max-width:220px} /* Same-page anchors should clear the persistent 51px masthead. */ main [id]{scroll-margin-top:72px} body{overflow-x:hidden} @media(max-width:699px){main [id]{scroll-margin-top:64px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ========================================================================== DRAFT 04.5 — FOOTER LAYER + ABOUT EYEBROW (2026-09-06) Footer only. Nothing else in the build changes. ========================================================================== */ /* Desktop: the dandelions stop being a cropped background band and become an uncropped picture layer sitting bottom-right on clean #000. Because the photograph carries its own black surround, an uncropped layer has no cut edge and needs no mask or gradient. */ @media(min-width:820px){ .amsp-foot::before{ inset:auto 0 0 auto; width:70%; height:auto; aspect-ratio:2048 / 1152; background:url("dandelion-footer.jpg") 0 0 / 100% 100% no-repeat; background-color:transparent; /* .34 is the highest level at which every footer text run clears WCAG AA 4.5:1 against --foot-dim, measured under real glyph pixels. */ opacity:.34; -webkit-mask-image:none; mask-image:none; } } /* Mobile keeps the Draft 04.4 contained treatment, which already reads clean: at 390 the cover scale shows the photograph's full height, so its own black top edge lands inside the band and there is no seam. */ @media(max-width:819px){ .amsp-foot::before{ inset:auto 0 0 0; width:auto; height:min(32%,280px); aspect-ratio:auto; background:url("dandelion-footer.jpg") 50% 42% / cover no-repeat; opacity:.34; -webkit-mask-image:none; mask-image:none; } } /* About: the eyebrow sits in the densest part of the yellow wash, where --muted measured 4.02:1. --muted-deep clears AA on the tinted field. */ .about-page .eyebrow{color:var(--muted-deep)} /* ==========================================================================\n DRAFT 04.6 — cleaner cover + Edition 001 contents\n ========================================================================== */ /* Cover: no large lemon photograph. Yellow is the image. */ .masthead::before{display:none!important} @media(min-width:900px){ .masthead{min-height:0;padding:34px 0 54px} .masthead__meta{margin-bottom:22px} .masthead h1{display:block;white-space:nowrap;min-height:0!important;font-size:clamp(54px,4.7vw,68px)!important;line-height:.98!important;margin:0} .masthead h1 .l{display:inline!important;white-space:normal!important;font-size:inherit!important;line-height:inherit!important;margin:0!important} .masthead h1 .l2::before,.masthead h1 .l3::before{content:" "} .masthead__sub{margin-top:24px;font-size:clamp(18px,1.45vw,23px);max-width:38em} } /* Edition table of contents — a typographic echo of the Edition 000 poster. */ .edition-contents{background:var(--ink);color:var(--paper);padding:58px 0 68px} .edition-contents .eyebrow{color:var(--signal)} .edition-contents__head{display:grid;grid-template-columns:minmax(180px,.45fr) 1fr;gap:28px;align-items:end;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.42)} .edition-contents__head h2{font-family:var(--mast);font-weight:400;font-size:clamp(42px,5.4vw,76px);line-height:.95;margin:0;color:var(--signal)} .edition-contents__list{display:block} .edition-contents__item{display:grid;grid-template-columns:190px 1px minmax(0,1fr);gap:28px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.34);color:inherit;text-decoration:none} .edition-contents__item::before{content:"";grid-column:2;grid-row:1;width:1px;height:100%;min-height:74px;background:rgba(240,226,15,.72)} .edition-contents__no{grid-column:1;grid-row:1;font-family:var(--mast);font-size:clamp(64px,7.2vw,104px);line-height:.8;color:var(--signal);letter-spacing:0} .edition-contents__copy{grid-column:3;grid-row:1;display:grid;gap:4px;padding-left:6px} .edition-contents__copy strong{font-family:var(--body);font-size:clamp(19px,1.8vw,27px);line-height:1.1;text-transform:uppercase;letter-spacing:.015em;color:var(--signal)} .edition-contents__copy em{font-family:var(--serif);font-size:clamp(19px,1.8vw,28px);line-height:1.2;color:var(--paper);font-weight:400} .edition-contents__item:hover,.edition-contents__item:focus-visible{background:rgba(240,226,15,.06)} .edition-contents__item:focus-visible{outline:2px solid var(--signal);outline-offset:5px} .edition-contents__item--door .edition-contents__copy strong::after{content:" →"} @media(max-width:699px){ .edition-contents{padding:42px 0 52px} .edition-contents__head{grid-template-columns:1fr;gap:8px} .edition-contents__head h2{font-size:50px} .edition-contents__item{grid-template-columns:88px 1px minmax(0,1fr);gap:16px;padding:19px 0} .edition-contents__no{font-size:58px} .edition-contents__copy strong{font-size:15px} .edition-contents__copy em{font-size:17px} } /* ==========================================================================\n DRAFT 04.7 — title/menu/countdown/footer simplification (2026-09-06)\n ========================================================================== */ /* Lemon becomes the first, consistent studio-home cue across publication + listening pages. */ .amsp-nav__in{grid-template-columns:auto minmax(0,1fr) auto!important;column-gap:10px!important} .amsp-nav__lemon{grid-column:1;grid-row:1} .amsp-title-menu{position:relative;min-width:0} .amsp-title-menu summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 22px 8px 0} .amsp-title-menu summary::-webkit-details-marker{display:none} .amsp-title-menu summary::after{content:"⌄";position:absolute;margin-left:8px;color:var(--signal)} .amsp-title-menu[open] summary::after{content:"⌃"} .amsp-title-menu__panel{position:absolute;z-index:50;left:0;top:calc(100% + 8px);width:min(340px,86vw);background:#000;color:var(--paper);border:1px solid rgba(255,255,255,.35);box-shadow:8px 8px 0 rgba(240,226,15,.9);padding:8px} .amsp-title-menu__panel a{display:block;color:var(--paper);text-decoration:none;font-family:var(--mono);font-size:11px;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;padding:10px 11px;border-bottom:1px solid rgba(255,255,255,.16)} .amsp-title-menu__panel a:last-child{border-bottom:0} .amsp-title-menu__panel a:hover,.amsp-title-menu__panel a:focus-visible{background:var(--signal);color:#000} @media(max-width:699px){.amsp-nav__in{grid-template-columns:auto minmax(0,1fr)!important}.amsp-title-menu summary{font-size:10px}.amsp-nav__links{display:none!important}} /* Listening bar inherits the same upper-left signature and section menu. */ .room-nav__home{display:flex!important;align-items:center;gap:10px;min-width:0} .room-nav__lemon{order:0;margin:0!important;flex:0 0 auto} .room-nav__home .amsp-title-menu{order:1} .room-nav__library-link{order:2} @media(max-width:760px){.room-nav__library-link{display:none}} /* Cover title: same letter size across each line on mobile; much larger single line on desktop. */ @media(min-width:900px){ .masthead h1{font-size:clamp(72px,6vw,88px)!important;line-height:.92!important;letter-spacing:0!important} .masthead{padding-top:26px;padding-bottom:42px} .masthead__sub{margin-top:18px} } @media(max-width:899px){ .masthead h1{min-height:0!important;line-height:.92!important} .masthead h1 .l{display:block!important;font-size:min(61px,calc((100vw - 2*var(--mast-gut)) / 5.817))!important;line-height:.92!important;margin:0!important;white-space:nowrap!important} .masthead h1 .l2::before,.masthead h1 .l3::before{content:none!important} } /* What’s inside: one type family throughout. */ .edition-contents__head h2,.edition-contents__no,.edition-contents__copy strong,.edition-contents__copy em{font-family:var(--body)!important} .edition-contents__head h2{font-weight:800;letter-spacing:-.03em;text-transform:none} .edition-contents__no{font-weight:300;letter-spacing:-.05em} .edition-contents__copy strong{font-weight:800} .edition-contents__copy em{font-style:normal;font-weight:450} /* Compact launch utility — a quieter version of the existing Lemon Juice signup countdown. */ .edition-launch{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-top:28px;padding-top:14px;border-top:1px solid rgba(0,0,0,.38)} .edition-launch__signup{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);font-weight:700;text-underline-offset:.2em} @media(max-width:599px){.edition-launch{align-items:flex-start;flex-direction:column}} /* Footer experiment: typography and information only for now. */ .amsp-foot::before{display:none!important} .amsp-foot{min-height:0!important;padding-bottom:40px} /* ========================================================================== DRAFT 04.8 — CONSOLIDATION PASS (2026-09-06) Larger desktop cover; Raleway Dots contents cues; free + supporting CTAs; simplified footer with Published by handoff; safe dandelion return. ========================================================================== */ /* Cover: use the full available desktop width instead of the 04.7 clamp. The font size is derived from the measured full-title advance width, so the line grows to the largest safe size while remaining a single line. */ @media(min-width:900px){ .masthead h1{font-size:calc(100cqw * .994 / var(--mast-ratio-full))!important;line-height:.92!important} .masthead h1 .l{font-size:inherit!important} } /* Contents: restore the publication display face to the navigation devices the user singled out, while keeping descriptive copy calm and readable. */ .edition-contents__head h2, .edition-contents__no{font-family:var(--mast)!important;font-weight:400!important;letter-spacing:0!important} .edition-contents__head h2{text-transform:uppercase} .edition-contents__copy strong{font-family:var(--body)!important;font-weight:800} .edition-contents__copy em{font-family:var(--body)!important;font-style:normal;font-weight:450} /* Launch actions: list signup stays primary; paid support is clearly optional. */ .edition-launch__actions{display:grid;justify-items:end;gap:7px;max-width:360px;text-align:right} .edition-launch__signup{display:inline-block;background:var(--ink);color:var(--signal)!important;text-decoration:none;padding:10px 12px;border:1px solid var(--ink)} .edition-launch__signup:hover,.edition-launch__signup:focus-visible{background:transparent;color:var(--ink)!important} .edition-launch__support{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.075em;color:var(--ink);font-weight:600;text-underline-offset:.2em} .edition-launch__support-note{font-family:var(--mono);font-size:8px;line-height:1.35;letter-spacing:.02em;color:var(--muted-deep)} @media(max-width:599px){.edition-launch__actions{justify-items:start;text-align:left;max-width:none}} /* Footer: no Elsewhere directory. Identity/contact sit on clean black; the former right-hand column now carries the publisher handoff. */ .amsp-foot{background:#000;min-height:560px!important;padding-bottom:46px;position:relative;isolation:isolate;overflow:hidden} .amsp-foot__grid{grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr)!important;gap:54px!important;align-items:start} .amsp-foot__published{display:grid;justify-items:start;align-content:start;position:relative;z-index:2} .amsp-foot__published-name{font-family:var(--display);font-size:clamp(24px,2.4vw,34px);font-weight:700;color:var(--signal)!important;text-decoration:none;margin:2px 0 13px} .amsp-foot__published-name:hover,.amsp-foot__published-name:focus-visible{text-decoration:underline;text-underline-offset:.15em} .amsp-foot__actions{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:28px;align-items:center} .amsp-foot__join,.amsp-foot__support{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase} .amsp-foot__join{color:var(--signal)!important;font-weight:700} .amsp-foot__support{color:var(--paper)!important} /* Reintroduce the photograph using the 04.5 uncropped desktop treatment. Text remains over #000; no `cover` seam crosses desktop content. */ .amsp-foot::before{display:block!important;content:"";position:absolute;z-index:-1;pointer-events:none;-webkit-mask-image:none!important;mask-image:none!important} @media(min-width:820px){ .amsp-foot::before{inset:auto 0 0 auto;width:70%;height:auto;aspect-ratio:2048/1152;background:url("dandelion-footer.jpg") 0 0/100% 100% no-repeat;opacity:.34} } @media(max-width:819px){ .amsp-foot{min-height:0!important} .amsp-foot__grid{grid-template-columns:1fr!important;gap:36px!important} .amsp-foot::before{inset:auto 0 0 0;width:100%;height:min(26%,240px);background:url("dandelion-footer.jpg") 50% 42%/cover no-repeat;opacity:.30} } /* ==========================================================================\n DRAFT 04.9 — STRIPE + FOOTER CLEANUP (2026-09-06)\n Direct Stripe support route; logo + spinning lemon only in publisher handoff;\n smaller undimmed dandelions held at the footer bottom.\n ========================================================================== */ /* Publisher handoff is visual only: the real Lemon Juice logo + spinning lemon. */ .amsp-foot__published{gap:10px;padding-top:8px} .amsp-foot__publisher-logo{width:min(250px,58vw);margin:0} .amsp-foot__lemon{width:clamp(92px,9vw,126px);margin:8px 0 0} /* Dandelions: use the source image without opacity, gradient, mask, filter or darkening. Keep the photograph smaller and pinned low so it does not crowd the contact copy or publisher marks. */ .amsp-foot::before{ opacity:1!important; filter:none!important; -webkit-mask-image:none!important; mask-image:none!important; mix-blend-mode:normal!important; } @media(min-width:820px){ .amsp-foot{min-height:540px!important} .amsp-foot::before{ inset:auto 18px 0 auto!important; width:min(46vw,660px)!important; height:auto!important; aspect-ratio:2048/1152!important; background:url("dandelion-footer.jpg") 0 0/100% 100% no-repeat!important; } .amsp-foot__published{min-height:300px} } @media(max-width:819px){ .amsp-foot::before{ inset:auto 0 0 auto!important; width:min(82vw,520px)!important; height:auto!important; aspect-ratio:2048/1152!important; background:url("dandelion-footer.jpg") 0 0/100% 100% no-repeat!important; } .amsp-foot__published{padding-bottom:150px} } /* ========================================================================== DRAFT 04.10 — STRIPE PRICING TABLE (2026-09-06) Direct Stripe subscription chooser; free publication remains primary. ========================================================================== */ .band--support{background:var(--paper);border-top:1px solid rgba(0,0,0,.22)} .support-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(360px,1.22fr);gap:clamp(32px,5vw,76px);align-items:start} .support-copy{max-width:560px} .support-copy h2{margin-bottom:16px} .support-copy .lede{margin-bottom:14px} .support-pricing{min-width:0;background:#fff;border:1px solid rgba(0,0,0,.22);padding:14px} .support-pricing stripe-pricing-table{display:block;width:100%} @media(max-width:819.98px){.support-grid{grid-template-columns:1fr}.support-pricing{padding:8px}} /* ========================================================================== DRAFT 04.11 — FOOTER RULE + LOWER-LEFT LEMON (2026-09-06) ========================================================================== */ .amsp-foot__mark{ padding-bottom:clamp(18px,2vw,26px); border-bottom:1px solid rgba(255,255,255,.72); margin-bottom:clamp(34px,4vw,48px)!important; } .amsp-foot__publisher .amsp-foot__lemon{ display:block; width:clamp(88px,8vw,118px); margin:clamp(30px,4vw,46px) 0 0; } .amsp-foot__published .amsp-foot__lemon{display:none!important} @media(max-width:700px){ .amsp-foot__mark{padding-bottom:18px;margin-bottom:30px!important} .amsp-foot__publisher .amsp-foot__lemon{width:92px;margin-top:30px} } /* ==========================================================================\n DRAFT 04.12 — HERO / PHOTO WALL / SUPPORT VISUAL PASS (2026-09-06)\n ========================================================================== */ .masthead__publisher-mark{ display:inline-flex; align-items:center; margin-top:clamp(10px,1.4vw,18px); width:clamp(138px,13vw,210px); } .masthead__publisher-mark img{display:block;width:100%;height:auto} .photo-wall{ overflow:hidden; background:#000; border-top:1px solid rgba(0,0,0,.22); border-bottom:1px solid rgba(0,0,0,.22); padding:18px 0; } .photo-wall__viewport{overflow:hidden;width:100%} .photo-wall__track{ display:flex; width:max-content; gap:16px; animation:amsp-photo-wall 38s linear infinite; will-change:transform; } .photo-wall__item{ position:relative; margin:0; width:clamp(300px,35vw,560px); height:clamp(210px,27vw,390px); overflow:hidden; flex:0 0 auto; background:#111; } .photo-wall__item img{width:100%;height:100%;object-fit:cover;display:block} .photo-wall__item--cat img{object-fit:contain;padding:20px;background:#000} .photo-wall__item figcaption{ position:absolute;left:12px;bottom:10px; margin:0;padding:6px 8px; background:#000;color:var(--signal); font:600 11px/1.15 var(--mono); letter-spacing:.06em;text-transform:uppercase; } @keyframes amsp-photo-wall{to{transform:translateX(calc(-50% - 8px))}} @media (prefers-reduced-motion:reduce){ .photo-wall__track{animation:none;overflow-x:auto;max-width:100vw} } @media(max-width:700px){ .photo-wall{padding:10px 0} .photo-wall__track{gap:10px;animation-duration:32s} .photo-wall__item{width:76vw;height:52vw;min-height:180px;max-height:280px} } .band--support{ background:#000 !important; color:var(--signal) !important; border-top:0 !important; } .band--support .eyebrow, .band--support h2, .band--support .lede, .band--support .small{color:var(--signal) !important} .band--support .support-direct a{color:var(--signal);font-weight:700;text-decoration:underline;text-underline-offset:4px} .band--support .support-pricing{background:#fff} /* ========================================================================== DRAFT 04.13 — PHOTO WALL + LISTENING COLOR PASS (2026-09-06) ========================================================================== */ /* Moving wall: all supplied photographs use square crops and carry no visible labels. */ .moving-wall img, .photo-wall img, .wall-track img{ aspect-ratio:1 / 1; object-fit:cover; } .moving-wall figcaption, .photo-wall figcaption, .wall-track figcaption{ display:none !important; } /* Listening Room 001: dark blue field with yellow/orange typography. */ #listening, .listening-threshold, .band--listening{ background:#0B2340 !important; color:#FFC700 !important; } #listening h1, #listening h2, #listening h3, #listening .eyebrow, #listening a, .listening-threshold h1, .listening-threshold h2, .listening-threshold h3, .listening-threshold .eyebrow, .listening-threshold a, .band--listening h1, .band--listening h2, .band--listening h3, .band--listening .eyebrow, .band--listening a{ color:#FFC700 !important; } #listening p, .listening-threshold p, .band--listening p{ color:#FFC700 !important; } #listening hr, .listening-threshold hr, .band--listening hr{ border-color:rgba(255,199,0,.5) !important; } /* Make Lemon Juice logo quieter and right-aligned in the hero/publisher area. */ .hero-publisher img, .masthead-publisher img, .publisher-mark img, .lemon-juice-mark--hero{ width:clamp(92px,8vw,138px) !important; max-width:138px !important; margin-left:auto !important; display:block !important; } /* ========================================================================== DRAFT 04.14 — EXACT IMAGE WALL + LIGHTER LISTENING + EDITION FLOWER ========================================================================== */ /* Moving wall: exact supplied images, square crop without distortion. */ .photo-wall__item{ aspect-ratio:1 / 1; overflow:hidden; } .photo-wall__item img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1 / 1; display:block; } .photo-wall__item figcaption{display:none !important;} /* Lighter atmospheric Listening Room 001 field, retaining #FFC700 signal type. */ #listening, .listening-threshold, .band--listening{ background: linear-gradient(135deg, #DCEBFA 0%, #BFD7EE 42%, #8EB4D8 100%) !important; color:#FFC700 !important; } #listening h1, #listening h2, #listening h3, #listening .eyebrow, #listening a, .listening-threshold h1, .listening-threshold h2, .listening-threshold h3, .listening-threshold .eyebrow, .listening-threshold a, .band--listening h1, .band--listening h2, .band--listening h3, .band--listening .eyebrow, .band--listening a{ color:#FFC700 !important; } #listening p, .listening-threshold p, .band--listening p{ color:#FFC700 !important; } /* Draft 04.15: edition flower removed from masthead; asset retained for future placement. */ /* ========================================================================== DRAFT 04.16 — EDITION INTRO FLOWER PLACEMENT ========================================================================== */ #edition{ position:relative; overflow:hidden; } .edition-intro__flower{ display:block; width:auto; height:clamp(220px,38vw,520px); max-width:min(34vw,420px); margin:clamp(24px,4vw,52px) clamp(20px,5vw,72px) 0 auto; object-fit:contain; object-position:right bottom; pointer-events:none; } @media(max-width:700px){ .edition-intro__flower{ height:clamp(180px,64vw,320px); max-width:58vw; margin:28px 12px 0 auto; } } /* ========================================================================== DRAFT 04.17 — PRE-FREEZE TECHNICAL CORRECTIONS ========================================================================== */ #listening, .listening-threshold, .band--listening{ background:linear-gradient(135deg,#1F5188 0%,#1A4675 45%,#0E2C4D 100%) !important; } #listening h1,#listening h2,#listening h3,#listening .eyebrow,#listening a, .listening-threshold h1,.listening-threshold h2,.listening-threshold h3, .listening-threshold .eyebrow,.listening-threshold a, .band--listening h1,.band--listening h2,.band--listening h3, .band--listening .eyebrow,.band--listening a, #listening p,.listening-threshold p,.band--listening p{ color:#FFC700 !important; } .photo-wall__item{ width:clamp(300px,32vw,440px) !important; height:auto !important; aspect-ratio:1/1 !important; min-height:0 !important; max-height:none !important; } .photo-wall__item img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block; } @media(max-width:700px){ .photo-wall__item{ width:min(76vw,320px) !important; height:auto !important; min-height:0 !important; max-height:none !important; } } @media(prefers-reduced-motion:reduce){ .photo-wall__track{max-width:100% !important} } .masthead__publisher-mark{ display:block !important; width:clamp(96px,9vw,138px) !important; margin-left:auto !important; margin-right:0 !important; } .masthead__publisher-mark img{ width:100% !important; height:auto !important; } #practice{ position:relative; overflow:hidden; } #practice .wrap{ position:relative; z-index:1; } .practice-flower{ position:absolute; left:calc(-1 * clamp(20px,4vw,56px)); bottom:0; height:clamp(200px,26vw,330px); width:auto; pointer-events:none; z-index:0; } @media(max-width:819.98px){ .practice-flower{display:none} } .band--support{ padding-top:clamp(44px,6vw,72px) !important; padding-bottom:clamp(44px,6vw,72px) !important; } .band--support #support-h{ font-size:clamp(32px,4.2vw,58px) !important; line-height:1.02; } .band--support .support-copy .lede{ font-size:clamp(17px,1.6vw,21px) !important; line-height:1.45; } .band--support .support-direct{ display:none; } /* ========================================================================== DRAFT 04.18 — COVER MATCH PASS Match the AMSP cover language already used on Lemon Juice: black field, dotted title, dandelions low, yellow Edition band. ========================================================================== */ .masthead--cover{ background:#000 !important; padding:0 !important; overflow:hidden; } .masthead-cover__field{ position:relative; min-height:clamp(560px,72vw,900px); background:#000; overflow:hidden; } .masthead-cover__title{ position:relative; z-index:2; padding:clamp(34px,5vw,72px) var(--mast-gut) 0; container-type:inline-size; } .masthead--cover h1{ font-family:var(--mast); font-weight:400; text-transform:uppercase; color:var(--paper); margin:0; line-height:.98; letter-spacing:0; } .masthead--cover h1 .l{ display:block; white-space:nowrap; } /* Desktop: large two-line cover, closer to the Lemon Juice reference. */ @media(min-width:900px){ .masthead-cover__field{min-height:760px} .masthead--cover h1{ font-size:clamp(78px,8vw,126px); max-width:12.5em; } .masthead--cover h1 .l1, .masthead--cover h1 .l2, .masthead--cover h1 .l3{ display:inline; font-size:inherit !important; margin:0 !important; } .masthead--cover h1 .l2::before, .masthead--cover h1 .l3::before{content:" "} } /* Mobile: three even-size folded lines like the existing cover. */ @media(max-width:899px){ .masthead-cover__field{min-height:620px} .masthead--cover h1 .l1, .masthead--cover h1 .l2, .masthead--cover h1 .l3{ font-size:clamp(54px,15vw,78px) !important; margin-left:0 !important; } } .masthead-cover__dandelions{ position:absolute; z-index:1; left:0; right:0; bottom:-1px; width:100%; height:auto; max-height:56%; object-fit:cover; object-position:center bottom; pointer-events:none; } .masthead-cover__edition{ position:relative; z-index:3; background:var(--signal); color:#000; padding:clamp(28px,4vw,52px) var(--mast-gut); font-family:var(--display); font-size:clamp(42px,6vw,82px); line-height:1; letter-spacing:-.03em; } .masthead-cover__meta{ background:var(--signal); color:#000; padding:0 0 clamp(34px,5vw,62px); } .masthead-cover__meta .masthead__meta{ margin:0 0 18px; padding-top:18px; border-top:1px dotted rgba(10,10,10,.45); } .masthead-cover__meta .masthead__publisher-mark{ width:clamp(88px,8vw,126px) !important; margin-left:auto !important; margin-right:0 !important; } .masthead-cover__meta .edition-launch{ margin-top:20px; } @media(max-width:700px){ .masthead-cover__meta .wrap{padding-inline:18px} .masthead-cover__meta .masthead__publisher-mark{ width:96px !important; } } /* ========================================================================== DRAFT 04.19 — COVER CORRECTION + LISTENING REORDER ========================================================================== */ /* COVER: remove inherited masthead geometry that caused the empty black field. */ .masthead--cover{ background:#000 !important; padding:0 !important; } .masthead-cover__field{ position:relative; background:#000; overflow:hidden; min-height:0 !important; height:clamp(560px,62vw,780px) !important; } .masthead-cover__title{ position:relative; z-index:3; container-type:inline-size; padding:clamp(34px,4.8vw,68px) var(--mast-gut) 0; } .masthead--cover h1{ min-height:0 !important; height:auto !important; margin:0 !important; padding:0 !important; color:var(--paper) !important; font-family:var(--mast) !important; font-weight:400 !important; line-height:.96 !important; letter-spacing:0 !important; text-transform:uppercase !important; } /* Desktop: one strong horizontal publication title. */ @media(min-width:900px){ .masthead-cover__field{ height:clamp(590px,54vw,760px) !important; } .masthead--cover h1{ white-space:nowrap !important; font-size:calc((100cqw - 4px) / var(--mast-ratio-full)) !important; } .masthead--cover h1 .l{ display:inline !important; white-space:normal !important; font-size:inherit !important; margin:0 !important; } .masthead--cover h1 .l2::before, .masthead--cover h1 .l3::before{ content:" " !important; } } /* Mobile: the Lemon Juice cover's three-line folded rhythm, equal type size. */ @media(max-width:899px){ .masthead-cover__field{ height:clamp(590px,155vw,760px) !important; } .masthead--cover h1{ white-space:normal !important; } .masthead--cover h1 .l{ display:block !important; font-size:clamp(52px,14.6vw,76px) !important; margin:0 !important; white-space:nowrap !important; } .masthead--cover h1 .l2::before, .masthead--cover h1 .l3::before{ content:none !important; } } /* Dandelions become a real lower image field, not a tiny floating asset. */ .masthead-cover__dandelions{ position:absolute !important; z-index:1 !important; left:0 !important; bottom:0 !important; width:100% !important; height:54% !important; max-height:none !important; object-fit:cover !important; object-position:center bottom !important; display:block !important; } @media(max-width:899px){ .masthead-cover__dandelions{ height:49% !important; object-position:center bottom !important; } } .masthead-cover__edition{ background:var(--signal) !important; color:#000 !important; padding:clamp(28px,4vw,46px) var(--mast-gut) !important; font-family:var(--display) !important; font-size:clamp(42px,5.8vw,76px) !important; line-height:1 !important; } /* LISTENING ROOM 001: light AMSP blue + grid, dark readable copy. Signal yellow stays as an accent/button rather than body text. */ #listening.listening, #listening, .listening-threshold, .band--listening{ position:relative; overflow:hidden; background-color:var(--rain) !important; background-image: linear-gradient(to right,rgba(10,10,10,.075) 1px,transparent 1px), linear-gradient(to bottom,rgba(10,10,10,.075) 1px,transparent 1px) !important; background-size:24px 24px !important; color:var(--ink) !important; } #listening h1,#listening h2,#listening h3, #listening p,#listening .eyebrow,#listening .small, .listening-threshold h1,.listening-threshold h2,.listening-threshold h3, .listening-threshold p,.listening-threshold .eyebrow,.listening-threshold .small, .band--listening h1,.band--listening h2,.band--listening h3, .band--listening p,.band--listening .eyebrow,.band--listening .small{ color:var(--ink) !important; } #listening a, .listening-threshold a, .band--listening a{ color:var(--ink) !important; text-decoration-color:var(--ink) !important; } #listening .direct-listen--primary, #listening .direct-listen--primary.is-disabled{ background:var(--signal) !important; color:var(--ink) !important; border-color:var(--ink) !important; } /* Keep the cat visible against the light field, including on mobile. */ #listening .listening__cat{ z-index:1 !important; left:clamp(-26px,-1.8vw,-8px) !important; bottom:0 !important; width:clamp(220px,25vw,350px) !important; } #listening > .wrap{ position:relative; z-index:2; } @media(max-width:899px){ #listening .listening__cat{ display:block !important; position:relative !important; left:auto !important; bottom:auto !important; width:min(62vw,270px) !important; margin:24px auto -26px 10px !important; } } /* The Listening section is no longer the final editorial threshold. */ #listening{ border-bottom:1px solid rgba(10,10,10,.18); } /* ========================================================================== DRAFT 04.20 — FINAL NIGHT CONSOLIDATION ========================================================================== */ /* -------------------------------------------------------------------------- DESKTOP COVER One coherent black poster field: large dotted title, large real dandelions, small edition/support information floating in the open black space. Mobile keeps the existing folded + yellow-band treatment. -------------------------------------------------------------------------- */ @media(min-width:900px){ .masthead--cover{ position:relative !important; background:#000 !important; padding:0 !important; min-height:0 !important; overflow:hidden !important; } .masthead-cover__field{ position:relative !important; height:clamp(650px,54vw,790px) !important; min-height:650px !important; background:#000 !important; overflow:hidden !important; } .masthead-cover__title{ position:relative !important; z-index:4 !important; container-type:inline-size !important; padding:clamp(42px,4.5vw,68px) var(--mast-gut) 0 !important; } .masthead--cover h1{ min-height:0 !important; height:auto !important; margin:0 !important; padding:0 !important; color:var(--paper) !important; line-height:.96 !important; white-space:nowrap !important; font-family:var(--mast) !important; font-weight:400 !important; font-size:calc((100cqw - 3px) / var(--mast-ratio-full)) !important; } .masthead--cover h1 .l{ display:inline !important; white-space:normal !important; margin:0 !important; font-size:inherit !important; } .masthead--cover h1 .l2::before, .masthead--cover h1 .l3::before{content:" " !important;} .masthead-cover__dandelions{ position:absolute !important; z-index:1 !important; left:0 !important; right:0 !important; bottom:-1px !important; width:100% !important; height:67% !important; max-height:none !important; object-fit:cover !important; object-position:center bottom !important; display:block !important; } /* The yellow Edition band is a mobile device now, not a desktop card. */ .masthead-cover__edition{ display:none !important; } .masthead-cover__meta{ position:absolute !important; z-index:5 !important; top:clamp(150px,13vw,190px) !important; right:var(--mast-gut) !important; width:min(420px,31vw) !important; background:transparent !important; color:var(--paper) !important; padding:0 !important; } .masthead-cover__meta .wrap{ width:auto !important; max-width:none !important; padding:0 !important; margin:0 !important; } .masthead-cover__meta .masthead__meta{ border-top:1px dotted rgba(255,255,255,.45) !important; color:var(--paper) !important; margin:0 0 16px !important; padding:14px 0 0 !important; font-size:10px !important; } .masthead-cover__meta .masthead__meta span{ color:var(--paper) !important; } .masthead-cover__meta .masthead__publisher-mark{ display:none !important; } .masthead-cover__meta .edition-launch{ border-top:1px solid rgba(255,255,255,.28) !important; padding-top:14px !important; margin-top:0 !important; align-items:start !important; gap:14px !important; } .masthead-cover__meta .edition-launch__support-note{ color:var(--paper) !important; } .masthead-cover__meta .edition-launch__signup{ background:var(--signal) !important; color:var(--ink) !important; border-color:var(--signal) !important; } .masthead-cover__meta .edition-launch__support{ color:var(--signal) !important; } } /* -------------------------------------------------------------------------- PRACTICE / CHANCE OF KATZ / LISTENING ASSET SWAP -------------------------------------------------------------------------- */ .practice-flower{display:none !important;} .katz-play-row{ display:grid; grid-template-columns:minmax(0,auto) minmax(150px,260px); align-items:end; gap:clamp(18px,3vw,42px); margin-top:28px; } .katz-play-row .project__go{ margin:0; } .katz-play-cat{ display:block; width:100%; height:auto; max-height:260px; object-fit:contain; object-position:center bottom; transform:translateY(10px); } @media(max-width:700px){ .katz-play-row{ grid-template-columns:1fr; gap:8px; } .katz-play-cat{ width:min(58vw,230px); margin-left:auto; margin-right:4vw; transform:none; } } #listening, .listening-threshold, .band--listening{ position:relative !important; overflow:hidden !important; background-color:var(--rain) !important; background-image: linear-gradient(to right,rgba(10,10,10,.075) 1px,transparent 1px), linear-gradient(to bottom,rgba(10,10,10,.075) 1px,transparent 1px) !important; background-size:24px 24px !important; color:var(--ink) !important; } #listening h1,#listening h2,#listening h3,#listening p,#listening .eyebrow, #listening .small,#listening a{ color:var(--ink) !important; } #listening .direct-listen--primary, #listening .direct-listen--primary.is-disabled{ background:var(--signal) !important; color:var(--ink) !important; border-color:var(--ink) !important; } .listening__cat{display:none !important;} .listening__flower{ position:absolute; left:clamp(-20px,-1vw,0px); bottom:0; height:clamp(230px,28vw,360px); width:auto; pointer-events:none; z-index:1; } #listening > .wrap{ position:relative; z-index:2; } @media(max-width:819.98px){ .listening__flower{ height:clamp(180px,52vw,270px); left:-36px; opacity:.94; } #listening .split__side{ padding-left:28vw; } } /* -------------------------------------------------------------------------- TECH WATCH BECOMES A SIDE NOTE FOR RECIPES -------------------------------------------------------------------------- */ .recipes-with-note{ background:var(--paper) !important; } .recipes-with-note__grid{ display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); gap:clamp(34px,6vw,84px); align-items:start; } .tech-note{ border-top:2px solid var(--ink); padding-top:14px; } .tech-note h2{ font-size:clamp(24px,2.4vw,34px); margin:0 0 18px; } .tech-note__items{ display:grid; gap:0; } .tech-note article{ padding:14px 0; border-top:1px solid rgba(10,10,10,.22); } .tech-note article:first-child{ border-top:0; } .tech-note h3{ font-size:14px; line-height:1.25; margin:0 0 6px; } .tech-note p{ font-size:13px; line-height:1.45; margin:0; color:var(--muted-deep); } @media(max-width:819.98px){ .recipes-with-note__grid{ grid-template-columns:1fr; } .tech-note{ order:2; margin-top:20px; } .recipes-main{order:1;} } /* Recipes: intentionally simple while the final art is still pending. */ .recipe-simple{ margin-top:18px; max-width:620px; } .recipe-simple .recipe-card__no{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; } .recipe-simple h3{ margin:4px 0 12px; } .recipe-status{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:var(--muted-deep); margin:0 0 24px; } /* -------------------------------------------------------------------------- ABOUT: compact participation paths -------------------------------------------------------------------------- */ .about-actions{ display:flex; flex-wrap:wrap; gap:10px 14px; padding:18px 0; margin:30px 0 22px; border-top:1px solid rgba(10,10,10,.25); border-bottom:1px solid rgba(10,10,10,.25); } .about-actions a{ font-family:var(--mono); font-size:10px; letter-spacing:.075em; text-transform:uppercase; font-weight:600; } /* ========================================================================== DRAFT 04.21 — FINAL-FINAL NIGHT CORRECTIONS ========================================================================== */ /* Desktop cover: robust Raleway Dots title + full-size real dandelion field. */ @media(min-width:900px){ .masthead--cover{ position:relative!important; background:#000!important; padding:0!important; overflow:hidden!important; } .masthead-cover__field{ position:relative!important; height:clamp(650px,55vw,820px)!important; min-height:650px!important; background:#000!important; overflow:hidden!important; } .masthead-cover__title{ position:relative!important; z-index:6!important; padding:clamp(34px,3.8vw,56px) var(--mast-gut) 0!important; container-type:normal!important; } .masthead--cover h1{ display:block!important; min-height:0!important; height:auto!important; margin:0!important; padding:0!important; color:var(--paper)!important; font-family:var(--mast)!important; font-size:clamp(70px,6.15vw,104px)!important; font-weight:400!important; letter-spacing:0!important; line-height:.96!important; white-space:nowrap!important; } .masthead--cover h1 .l{ display:inline!important; font-size:inherit!important; margin:0!important; white-space:normal!important; } .masthead--cover h1 .l2::before, .masthead--cover h1 .l3::before{content:" "!important} .masthead-cover__dandelions{ position:absolute!important; z-index:2!important; left:0!important; bottom:0!important; width:100%!important; height:auto!important; max-height:none!important; object-fit:initial!important; object-position:initial!important; display:block!important; } .masthead-cover__edition{display:none!important} .masthead-cover__meta{ position:absolute!important; z-index:7!important; top:clamp(190px,15vw,230px)!important; right:var(--mast-gut)!important; width:min(420px,31vw)!important; background:transparent!important; color:var(--paper)!important; padding:0!important; } .masthead-cover__meta .wrap{width:auto!important;max-width:none!important;margin:0!important;padding:0!important} .masthead-cover__meta .masthead__meta{ color:var(--paper)!important; border-top:1px dotted rgba(255,255,255,.55)!important; margin:0 0 14px!important; padding:14px 0 0!important; } .masthead-cover__meta .masthead__meta span{color:var(--paper)!important} .masthead-cover__meta .masthead__publisher-mark{display:none!important} .masthead-cover__meta .edition-launch{ border-top:1px solid rgba(255,255,255,.34)!important; padding-top:14px!important; margin-top:0!important; } .masthead-cover__meta .edition-launch__support-note{color:var(--paper)!important} .masthead-cover__meta .edition-launch__signup{background:var(--signal)!important;color:var(--ink)!important} .masthead-cover__meta .edition-launch__support{color:var(--signal)!important} } /* Mobile cover remains folded; keep real image large and grounded. */ @media(max-width:899px){ .masthead-cover__dandelions{ width:118%!important; left:-9%!important; height:auto!important; max-height:none!important; bottom:-2px!important; object-fit:initial!important; } } /* Chance of Katz: cat becomes a major right-side anchor. */ .katz-play-row{ grid-template-columns:minmax(260px,.8fr) minmax(340px,1.2fr)!important; align-items:end!important; gap:clamp(28px,5vw,74px)!important; margin-top:34px!important; } .katz-play-cat{ width:min(100%,500px)!important; max-height:none!important; justify-self:end!important; margin-right:clamp(0px,3vw,38px)!important; transform:translateY(18px)!important; } @media(max-width:700px){ .katz-play-row{grid-template-columns:1fr!important} .katz-play-cat{width:min(78vw,340px)!important;margin:0 0 0 auto!important;transform:none!important} } /* Tech Watch: tiny physical computers gets the one boxed callout. */ .tech-note__boxed{ margin-top:16px!important; padding:16px!important; border:1px solid var(--ink)!important; background:var(--signal)!important; } .tech-note__boxed h3,.tech-note__boxed p{color:var(--ink)!important} /* Support: one clean direct Stripe button, no embedded pricing window. */ .support-simple{background:#000!important;color:var(--signal)!important} .support-simple__in{max-width:760px} .support-simple h2,.support-simple p,.support-simple .eyebrow{color:var(--signal)!important} .support-simple__action{margin:30px 0 0} .support-simple__action a{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 24px; background:var(--signal); color:var(--ink)!important; border:1px solid var(--signal); font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; } .support-simple__action a:hover,.support-simple__action a:focus-visible{background:var(--paper);border-color:var(--paper)} /* Footer title gets equal top/bottom rules for shape and separation. */ .amsp-foot__mark{ border-top:1px solid rgba(255,255,255,.72)!important; border-bottom:1px solid rgba(255,255,255,.72)!important; padding-top:clamp(18px,2vw,26px)!important; padding-bottom:clamp(18px,2vw,26px)!important; } /* Listening Library Room 001 preview is genuinely clickable. */ .room-card--preview{cursor:pointer} .room-card--preview:focus-visible{outline:3px solid var(--signal);outline-offset:4px} /* Draft 04.22 — Listening Library uses the publication-family footer. */ .amsp-foot--listening .amsp-foot__room-links{position:relative;z-index:2;margin:0 0 34px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.24)} .amsp-foot--listening .amsp-foot__room-links a{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--paper)} .amsp-foot--listening .amsp-foot__room-links a:hover,.amsp-foot--listening .amsp-foot__room-links a:focus-visible{color:var(--signal)} /* ========================================================================== DRAFT 04.23 — SOCIAL + RESPONSIVE / KATZ COMPOSITION PASS (2026-09-07) User-supplied image assets remain byte-for-byte unchanged; layout/blending happens in CSS only. ========================================================================== */ /* Desktop cover: keep the complete publication name on one line. */ @media(min-width:900px){ .masthead--cover h1{ font-size:clamp(54px,5.92vw,100px)!important; white-space:nowrap!important; } } /* Mobile cover: shorter black opening so Edition 001 arrives sooner. */ @media(max-width:899px){ .masthead-cover__field{ height:clamp(480px,126vw,560px)!important; min-height:0!important; } .masthead-cover__dandelions{ bottom:-1px!important; } } /* Chance of Katz on the Edition page: larger play door, more breathing room, existing cat pushed farther toward the right. No image transformation. 04.27c: gated up from 701px to 900px. The row deliberately overhangs the wrap and the cat is translated a further 48px right; between 701 and ~880 there is not enough outer gutter to absorb that, which pushed the document 82px wide and produced horizontal scroll on the homepage at 768 and 820. Below 900px the earlier (non-overhanging) Katz rules apply. */ @media(min-width:900px){ .katz-play-row{ grid-template-columns:minmax(320px,.9fr) minmax(280px,1.1fr)!important; gap:clamp(46px,6vw,92px)!important; width:calc(100% + clamp(70px,7vw,120px))!important; margin-top:42px!important; } .katz-game-button{ width:min(100%,370px)!important; min-height:182px!important; padding:30px 30px!important; justify-content:flex-start!important; text-align:left!important; font-size:clamp(16px,1.45vw,20px)!important; line-height:1.55!important; } .katz-play-cat{ width:min(100%,520px)!important; justify-self:end!important; margin-right:0!important; transform:translate(48px,18px)!important; } } @media(max-width:700px){ .katz-game-button{ min-height:136px!important; padding:24px 22px!important; text-align:left!important; justify-content:flex-start!important; line-height:1.55!important; } } /* Listening Room 001 — official game route. */ .room001-play{margin:2px 0 0!important} .room001-play .direct-listen--primary{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 18px; background:var(--signal); color:var(--ink)!important; border:1px solid var(--ink); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; } /* 02 · The ghost piece: transparent side-cat cutout at the left edge; the real page grid shows through the alpha field. */ #ghost-piece{position:relative;overflow:hidden} .ghost-piece__layout{ display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr); gap:clamp(40px,7vw,110px); align-items:center; } .ghost-piece__cat{ margin:0 0 0 calc(var(--gut) * -1); align-self:center; justify-self:start; width:min(45vw,560px); max-width:none; } .ghost-piece__cat img{ display:block; width:100%; height:auto; } .ghost-piece__copy{ width:min(100%,720px); justify-self:start; } .ghost-piece__copy>.eyebrow{margin-bottom:4px} .ghost-piece__copy>.small{margin-top:0;margin-bottom:22px} @media(max-width:859px){ .ghost-piece__layout{ grid-template-columns:1fr; gap:24px; } .ghost-piece__cat{ width:min(76vw,440px); margin-left:calc(var(--gut) * -1); } .ghost-piece__copy{width:100%} } /* Full-width breathing field before Derek's first response. */ .derek-blue-breath{ width:100%; min-height:clamp(130px,14vw,220px); background:var(--rain); border-top:1px solid rgba(10,10,10,.08); border-bottom:1px solid rgba(10,10,10,.08); } @media(max-width:700px){ .derek-blue-breath{min-height:96px} } /* ========================================================================== DRAFT 04.24 — FINAL RESPONSIVE COMPOSITION PASS (2026-09-07) Layout/CSS only. Supplied image files are not altered. ========================================================================== */ /* Desktop cover: guarantee the complete publication name remains one line. */ @media(min-width:900px){ .masthead-cover__title{ padding-left:clamp(22px,2.5vw,40px)!important; padding-right:18px!important; } .masthead--cover h1{ font-size:clamp(50px,5.18vw,88px)!important; letter-spacing:-.012em!important; white-space:nowrap!important; max-width:none!important; } .masthead--cover h1 .l{ display:inline!important; white-space:nowrap!important; } /* Give the edition copy/countdown a little more air below the title. */ .masthead-cover__meta{ top:clamp(215px,17vw,255px)!important; } } /* Mobile cover: a little shorter again; keep the existing folded title rhythm. */ @media(max-width:899px){ .masthead-cover__field{ height:clamp(440px,110vw,510px)!important; min-height:0!important; } .masthead-cover__dandelions{ width:116%!important; left:-8%!important; bottom:-1px!important; } } /* Edition-page Listening threshold: flower becomes a taller right-side anchor on desktop, and a separate non-overlapping object below copy on mobile. */ @media(min-width:820px){ #listening .listening__flower{ left:auto!important; right:clamp(-38px,-1.5vw,-8px)!important; bottom:-18px!important; height:clamp(360px,38vw,520px)!important; width:auto!important; opacity:1!important; } #listening > .wrap{ padding-right:clamp(180px,19vw,310px)!important; } } @media(max-width:819.98px){ #listening .split__side{ padding-left:0!important; } #listening .listening__flower{ position:relative!important; display:block!important; left:auto!important; right:auto!important; bottom:auto!important; height:clamp(190px,50vw,240px)!important; width:auto!important; margin:26px 8px -24px auto!important; opacity:1!important; z-index:1!important; } } /* Room 001 / 02 Ghost Piece — desktop reference: cat emerges directly from the left viewport edge. Transparent cutout removes browser blend variance. Mobile keeps the existing stacked alignment and scale. */ @media(min-width:860px){ #ghost-piece .ghost-piece__layout{ width:100vw!important; max-width:none!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important; grid-template-columns:minmax(0,49vw) minmax(0,1fr)!important; gap:clamp(34px,3.5vw,62px)!important; align-items:center!important; } #ghost-piece .ghost-piece__cat{ width:min(49vw,780px)!important; max-width:none!important; margin:0!important; justify-self:start!important; align-self:center!important; overflow:visible!important; } #ghost-piece .ghost-piece__cat img{ width:100%!important; height:auto!important; display:block!important; transform:translateX(-1.5%)!important; } #ghost-piece .ghost-piece__copy{ width:min(100%,720px)!important; max-width:720px!important; padding-right:var(--gut)!important; justify-self:start!important; } } @media(max-width:859px){ #ghost-piece .ghost-piece__layout{ width:auto!important; margin-left:0!important; margin-right:0!important; } #ghost-piece .ghost-piece__cat img{ } } /* ========================================================================== DRAFT 04.26 — PRE-DEREK POLISH (2026-09-07) Ghost Piece: desktop positioning pushes the transparent side-cat cutout through the left viewport edge so the black cat meets the frame directly. Mobile composition remains unchanged. ========================================================================== */ @media(min-width:860px){ #ghost-piece .ghost-piece__cat{ width:min(52vw,830px)!important; margin-left:-1px!important; } #ghost-piece .ghost-piece__cat img{ width:106%!important; max-width:none!important; transform:translateX(-5.5%)!important; } } /* ========================================================================== DRAFT 04.27b — FOOTER PUBLISHER ALIGNMENT CORRECTION (2026-09-07) Center the Lemon Juice publisher mark vertically against the Newsletter / Projects / Personal contact stack, while keeping it above the dandelion field. Layout only; logo and footer photograph assets remain byte-identical. ========================================================================== */ @media(min-width:820px){ .amsp-foot__published{ padding-top:clamp(96px,7.5vw,118px)!important; min-height:300px!important; align-content:start!important; } .amsp-foot__publisher-logo{margin:0!important} } /* ========================================================================== DRAFT 04.29 — SEPTEMBER 8 LAUNCH-CORRECTION ROUND Consolidated from the approved mobile/desktop screenshot review. No audio/player files, room routes, indexing rules, or image assets changed. ========================================================================== */ /* 01 — Fixed mobile room navigation: clear iPhone safe area and content. */ @media(max-width:699px){ html{scroll-padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))!important} body{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))!important} .mobile-nav{ bottom:calc(10px + env(safe-area-inset-bottom,0px))!important; } } /* 03 — Room 001 identity: make the preparation/listening status legible before the Chance of Katz title without turning the header into a second component. */ .hero__meta--prep{ display:grid!important; grid-template-columns:max-content minmax(0,1fr); gap:7px 14px!important; align-items:center!important; margin-bottom:24px!important; } .hero__meta--prep .tag{white-space:nowrap} .hero__prep-title{margin:0!important;color:var(--muted-deep)!important} .hero__prep-note{ grid-column:1 / -1; max-width:64em; font-family:var(--mono); font-size:10px; line-height:1.5; letter-spacing:.055em; text-transform:uppercase; color:var(--muted-deep); } @media(max-width:699px){ .hero__meta--prep{grid-template-columns:1fr;gap:8px!important;margin-bottom:24px!important} .hero__meta--prep .tag{justify-self:start;white-space:normal} .hero__prep-note{font-size:9px;max-width:36em} } /* 04 + 05 — Homepage cover: dandelions rise toward the publication title. Mobile keeps the approved folded type; desktop keeps the one-line title. */ @media(max-width:899px){ .masthead-cover__dandelions{ width:134%!important; left:-17%!important; bottom:-1px!important; } } @media(min-width:900px){ .masthead-cover__dandelions{ width:110%!important; left:-5%!important; right:auto!important; bottom:-1px!important; } } /* 06 — Mobile Edition 001 publisher block: Lemon Juice reads first, then issue. Tighten the yellow field without changing the approved typography. */ .masthead-cover__edition-mark{display:none} @media(max-width:899px){ .masthead-cover__edition{ display:grid!important; gap:12px!important; padding:22px 18px 12px!important; } .masthead-cover__edition-mark{ display:block; width:clamp(118px,36vw,154px); margin:0; } .masthead-cover__edition-mark img{display:block;width:100%;height:auto} .masthead-cover__edition>span{display:block} .masthead-cover__meta{padding:0 0 26px!important} .masthead-cover__meta .wrap{padding-inline:18px!important} .masthead-cover__meta .masthead__meta{ margin:0 0 12px!important; padding-top:12px!important; } .masthead-cover__meta .edition-launch{ margin-top:10px!important; padding-top:12px!important; gap:12px!important; } .masthead-cover__meta .edition-launch__actions{gap:6px!important} } /* 07 — Desktop cover: use the open black field more deliberately. Lower the edition/countdown cluster and strengthen the lower-right actions. */ @media(min-width:900px){ .masthead-cover__meta{ top:clamp(270px,22vw,330px)!important; width:min(470px,33vw)!important; } .masthead-cover__meta .masthead__meta{font-size:10px!important;margin-bottom:16px!important} .masthead-cover__meta .edition-launch{gap:18px!important} .masthead-cover__meta .edition-launch__actions{gap:9px!important;min-width:190px!important} .masthead-cover__meta .edition-launch__signup{ font-size:11px!important; padding:14px 18px!important; min-height:46px; display:inline-flex!important; align-items:center; } .masthead-cover__meta .edition-launch__support{font-size:10px!important} .masthead-cover__meta .edition-launch__support-note{font-size:9px!important;max-width:230px} } /* 08 — Edition-page Listening Room threshold: on phone the flower grows from the lower-right edge instead of floating in the blue field. */ @media(max-width:819.98px){ #listening{ padding-bottom:clamp(275px,79vw,340px)!important; } #listening .listening__flower{ position:absolute!important; display:block!important; left:auto!important; right:clamp(-28px,-4vw,-8px)!important; bottom:-2px!important; height:clamp(300px,88vw,390px)!important; width:auto!important; max-width:none!important; margin:0!important; opacity:1!important; z-index:1!important; } #listening > .wrap{position:relative!important;z-index:2!important} } /* 09 — Mobile footer: contacts -> actions -> publisher -> credits -> flowers. Remove the black void and keep every line out of the dandelion photograph. */ @media(max-width:819px){ .amsp-foot{ min-height:0!important; padding-top:42px!important; padding-bottom:0!important; } .amsp-foot__mark{ font-size:clamp(32px,10.5vw,54px)!important; margin-bottom:22px!important; padding-top:14px!important; padding-bottom:14px!important; } .amsp-foot__grid{gap:12px!important} .amsp-foot__desc{margin-bottom:12px!important} .amsp-foot__contacts{gap:9px!important;margin-top:14px!important} .amsp-foot__contacts p{gap:1px!important} .amsp-foot__contacts a{font-size:13px!important} .amsp-foot__actions{margin-top:20px!important;gap:8px 14px!important} .amsp-foot__join{font-size:11px!important} .amsp-foot__support{font-size:10px!important} .amsp-foot__publisher .amsp-foot__lemon{ width:86px!important; margin:22px 0 0!important; } .amsp-foot__published{ padding-top:4px!important; padding-bottom:0!important; min-height:0!important; } .amsp-foot__publisher-logo{ width:min(245px,66vw)!important; margin:0!important; } .amsp-foot .credits{ position:relative!important; z-index:3!important; width:100%!important; max-width:100%!important; margin:18px 0 0!important; padding:16px 0 clamp(205px,63vw,275px)!important; border-top:1px solid rgba(255,255,255,.34)!important; color:#E4E5DE!important; font-size:10px!important; line-height:1.65!important; } .amsp-foot::before{ inset:auto -6% 0 -6%!important; width:112%!important; height:clamp(205px,63vw,275px)!important; aspect-ratio:auto!important; background:url("dandelion-footer.jpg") 50% 100%/cover no-repeat!important; opacity:1!important; z-index:1!important; } .amsp-foot>.wrap{position:relative;z-index:2} .amsp-foot--listening .credits--room{max-width:100%!important} } /* On wide Listening pages, keep room credits on clean black rather than over the dandelion cluster. */ @media(min-width:820px){ .amsp-foot--listening .credits--room{max-width:46%!important} } /* Accessibility: preserve strong visible focus on the newly emphasized doors. */ .masthead-cover__edition-mark:focus-visible, .edition-launch__signup:focus-visible, .edition-launch__support:focus-visible{ outline:3px solid currentColor; outline-offset:4px; } /* ========================================================================== DRAFT 04.30 — CONSISTENCY + REFERENCE-SHELF ROUND (2026-09-08) Builds only on 04.29. Desktop cover framing; full-width navigation rhythm; consistent Listening Library identity; native Room 001 reference shelves. ========================================================================== */ /* 10 — Desktop cover: keep the left flower group inside the viewport, lift the full image toward the masthead, and give the launch utility real presence. */ @media(min-width:900px){ .masthead-cover__dandelions{ width:100%!important; left:0!important; right:auto!important; bottom:clamp(64px,6vw,112px)!important; } .masthead-cover__meta{ top:clamp(340px,26vw,410px)!important; width:min(520px,36vw)!important; } .masthead-cover__meta .masthead__meta{ font-size:11px!important; margin-bottom:18px!important; } .masthead-cover__meta .edition-launch{gap:22px!important} .masthead-cover__meta .edition-launch__actions{gap:10px!important;min-width:220px!important} .masthead-cover__meta .edition-launch__signup{ font-size:13px!important; padding:16px 22px!important; min-height:52px!important; } .masthead-cover__meta .edition-launch__support{font-size:11px!important} .masthead-cover__meta .edition-launch__support-note{font-size:10px!important;max-width:260px!important} } @media(min-width:900px) and (max-width:1180px){ .masthead-cover__meta .edition-launch{ flex-direction:column!important; align-items:flex-start!important; } .masthead-cover__meta .edition-launch__actions{ justify-items:start!important; text-align:left!important; min-width:0!important; } } /* 11 + 12 — The publication / library relationship is a persistent part of the listening header. Full-bleed inner nav buys room for future editions. */ @media(min-width:900px){ .amsp-nav .amsp-nav__in, .room-nav .room-nav__in{ max-width:none!important; width:100%!important; padding-left:clamp(18px,2.4vw,36px)!important; padding-right:clamp(18px,2.4vw,36px)!important; } } .room-nav__links a[aria-current], .room-nav__library-link[aria-current]{ background:var(--signal); color:var(--ink)!important; border-color:var(--signal)!important; } @media(max-width:760px){ .room-nav__in{grid-template-columns:minmax(0,1fr)!important} .room-nav__home{flex-wrap:nowrap!important;gap:8px!important;min-width:0!important} .room-nav__home .amsp-title-menu{flex:1 1 auto!important;min-width:0!important} .room-nav__home .amsp-title-menu summary{font-size:9px!important;padding-right:18px!important} .room-nav__library-link{ display:inline-flex!important; align-items:center!important; flex:0 0 auto!important; font-size:8.5px!important; padding:7px 8px!important; white-space:nowrap!important; } } @media(max-width:350px){ .room-nav__library-link{font-size:0!important;padding:7px 8px!important} .room-nav__library-link::after{content:"Library";font-size:8.5px!important} } /* 13 — Room 001 music references are research shelves: large artist labels remain visible while track menus stay closed until requested. Native details keeps keyboard and screen-reader behavior without JavaScript. */ .artist--shelf{padding:0!important} .artist-shelf{margin:0;color:inherit} .artist-shelf__summary{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:clamp(20px,3vw,42px); align-items:center; min-height:112px; padding:clamp(28px,3.6vw,48px) 0; list-style:none; cursor:pointer; color:inherit; } .artist-shelf__summary::-webkit-details-marker{display:none} .artist-shelf__summary::marker{content:""} .artist-shelf__summary::after{ content:"+"; grid-column:2; grid-row:1 / span 2; align-self:center; font-family:var(--mono); font-size:clamp(32px,3.6vw,52px); font-weight:400; line-height:1; color:currentColor; } .artist-shelf[open]>.artist-shelf__summary::after{content:"−"} .artist-shelf__summary>.eyebrow{ grid-column:1; grid-row:1; display:block; margin:0 0 7px; } .artist-shelf__summary>h2{ grid-column:1; grid-row:2; margin:0!important; font-size:clamp(42px,6vw,82px); line-height:1.02; } .artist-shelf__summary:focus-visible{outline-offset:4px} .artist-shelf__body{padding:0 0 clamp(40px,4vw,62px)} .artist-shelf__intro{max-width:52em;margin:0 0 28px} .artist-shelf[open]>.artist-shelf__summary{padding-bottom:clamp(22px,2.4vw,34px)} html[data-surface="chassis"] .artist-shelf__summary, html[data-surface="chassis"] .artist-shelf__summary::after{color:currentColor} @media(max-width:699px){ .artist-shelf__summary{min-height:96px;padding:28px 0;column-gap:18px} .artist-shelf__summary>h2{font-size:clamp(38px,12vw,54px)} .artist-shelf__summary::after{font-size:34px} .artist-shelf__body{padding-bottom:42px} .artist-shelf__intro{margin-bottom:22px} } /* ========================================================================== DRAFT 04.31 — SPATIAL RAIL + LIBRARY POLLINATOR (2026-09-08) Experimental desktop Chance of Katz metadata rail; full Library flower; Library flower geometry. (The pollinator experiment named here was removed in 04.39; see the note below.) ========================================================================== */ /* 14 — Desktop Chance of Katz: asymmetrical editorial column + static metadata rail. Keep the approved Katz overhang and avoid a full-height vertical rule so the cat never appears bisected by the rail. */ @media(min-width:1025px){ #chance-of-katz .project{ grid-template-columns:minmax(0,1.55fr) minmax(0,.65fr); gap:clamp(48px,5vw,72px); } #chance-of-katz .project__aside{ position:relative; z-index:2; } #chance-of-katz .project__aside dl{gap:0} #chance-of-katz .project__aside dt{ padding-top:14px; border-top:1px dotted rgba(10,10,10,.45); } #chance-of-katz .project__aside dt:first-of-type{ padding-top:0; border-top:0; } #chance-of-katz .project__aside dd{padding-bottom:14px} #chance-of-katz .project__aside dd:last-of-type{ position:relative; margin-inline:-14px; padding:10px 14px 14px; background:var(--rain); } #chance-of-katz .project__aside dd:last-of-type::after{ content:""; position:absolute; left:14px; top:100%; width:1px; height:24px; background:var(--rain); } } /* 15–18 — Listening Library flower. DRAFT 04.39: the ORBIT / BEE / PAUSE pollinator experiment is removed. It had no triggering markup on any page, and the illustrated moving lemon is no longer the direction: 🍋 now carries editorial movement, the flower carries listening. Flower geometry below is unchanged. */ .archive-hero{ --flower-w:clamp(300px,36vw,520px); --flower-right:clamp(0px,1vw,20px); --flower-bottom:clamp(-92px,-5vw,-42px); } .archive-hero__flower{ right:var(--flower-right); bottom:var(--flower-bottom); width:var(--flower-w); z-index:1; } .archive-hero__copy, .archive-hero .lede, .archive-hero .small{z-index:3} @media(max-width:699px){ .archive-hero{ --flower-w:250px; --flower-right:0px; --flower-bottom:-58px; } } @media(min-width:1025px){ .archive-hero .lede{max-width:34em} } /* ========================================================================== DRAFT 04.32 — MOBILE/DESKTOP CORRECTION ROUND (2026-09-08) Tighten the desktop cover handoff; use a small Lemon Juice wordmark as the persistent upper-right utility mark; normalize Listening routes. ========================================================================== */ /* Desktop cover: the mobile flower-to-section contact is already approved. On desktop, lower the real dandelion image so the stem ends sit much closer to the next section instead of floating above a large black gap. */ @media(min-width:900px){ .masthead-cover__dandelions{ bottom:clamp(18px,1.7vw,30px)!important; } } /* Persistent Lemon Juice publisher mark in the upper-right utility area. The nav bars are black in the current build, so the white asset is used; the class can swap to the black asset later if a light header is introduced. */ .nav-publisher-mark{ display:flex; align-items:center; justify-content:center; justify-self:end; min-width:76px; min-height:44px; padding:7px 0 7px 10px; text-decoration:none!important; line-height:0; } .nav-publisher-mark img{ display:block; width:clamp(66px,6.4vw,92px); height:auto; } .nav-publisher-mark:focus-visible{ outline:3px solid var(--signal); outline-offset:3px; } /* Main publication nav: left lemon + publication menu / edition+listening / LJ. */ .amsp-nav__in{ grid-template-columns:auto minmax(0,1fr) auto auto!important; } .amsp-nav__lemon{grid-column:1;grid-row:1} .amsp-nav__in>.amsp-title-menu{grid-column:2;grid-row:1} .amsp-nav__links{grid-column:3;grid-row:1} .amsp-nav__in>.nav-publisher-mark{grid-column:4;grid-row:1} /* Listening nav: publication/library identity / room links / LJ. */ .room-nav__in{ grid-template-columns:minmax(0,1fr) auto auto!important; column-gap:12px!important; } .room-nav__home{grid-column:1;grid-row:1} .room-nav__links{grid-column:2;grid-row:1} .room-nav__in>.nav-publisher-mark{grid-column:3;grid-row:1} @media(max-width:760px){ .amsp-nav__in{ grid-template-columns:auto minmax(0,1fr) auto!important; } .amsp-nav__in>.nav-publisher-mark{ grid-column:3; grid-row:1; min-width:64px; padding-left:6px; } .amsp-nav__in>.nav-publisher-mark img{width:64px} .room-nav__in{ grid-template-columns:minmax(0,1fr) auto!important; } .room-nav__home{grid-column:1;grid-row:1} .room-nav__links{display:none!important} .room-nav__in>.nav-publisher-mark{ display:flex!important; grid-column:2; grid-row:1; min-width:64px; padding-left:6px; } .room-nav__in>.nav-publisher-mark img{width:64px} } @media(max-width:380px){ .amsp-nav__in>.nav-publisher-mark, .room-nav__in>.nav-publisher-mark{min-width:56px} .amsp-nav__in>.nav-publisher-mark img, .room-nav__in>.nav-publisher-mark img{width:56px} } /* ========================================================================== DRAFT 04.33 — MOBILE NAV / FOOTER / COVER REFINEMENT (2026-09-08) Mobile screenshot pass: edition switcher, local Listening room menus, non-sticky details behavior, stronger footer masthead, and flower geometry. ========================================================================== */ /* 01 — Upper-right Lemon Juice wordmark now means "back to AMSP home". The left lemon remains the distinct link out to the Lemon Juice studio. */ .nav-publisher-mark{ transition:transform .16s ease,opacity .16s ease; } .nav-publisher-mark:hover,.nav-publisher-mark:focus-visible{ transform:translateY(-1px); opacity:.88; } /* 02 — Edition drive-through beside the publication identity on AMSP pages. */ .edition-menu{position:relative;min-width:0;justify-self:end} .edition-menu summary{ list-style:none; cursor:pointer; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--paper); white-space:nowrap; padding:8px 18px 8px 8px; border:1px solid rgba(255,255,255,.34); transition:background .16s ease,color .16s ease,border-color .16s ease; } .edition-menu summary::-webkit-details-marker{display:none} .edition-menu summary::after{ content:"⌄"; position:absolute; margin-left:6px; color:var(--signal); } .edition-menu[open] summary, .edition-menu summary:hover, .edition-menu summary:focus-visible{ background:var(--signal); color:var(--ink); border-color:var(--signal); } .edition-menu[open] summary::after, .edition-menu summary:hover::after, .edition-menu summary:focus-visible::after{color:var(--ink)} .edition-menu[open] summary::after{content:"⌃"} .edition-menu__panel{ position:absolute; z-index:80; right:0; top:calc(100% + 8px); width:min(280px,82vw); padding:8px; background:#000; color:var(--paper); border:1px solid rgba(255,255,255,.35); box-shadow:7px 7px 0 var(--signal); } .edition-menu__panel a, .amsp-title-menu__panel--rooms a{ position:relative; display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:12px; min-height:48px; padding:12px 11px!important; border-bottom:1px solid rgba(255,255,255,.16); color:var(--paper); text-decoration:none; font-family:var(--mono); text-transform:uppercase; transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease; } .edition-menu__panel a:last-child, .amsp-title-menu__panel--rooms a:last-child{border-bottom:0} .edition-menu__panel a span, .amsp-title-menu__panel--rooms a span{font-size:11px;letter-spacing:.055em} .edition-menu__panel a small, .amsp-title-menu__panel--rooms a small{ font-size:8px; letter-spacing:.06em; opacity:.72; white-space:nowrap; } .edition-menu__panel a:hover, .edition-menu__panel a:focus-visible, .amsp-title-menu__panel--rooms a:hover, .amsp-title-menu__panel--rooms a:focus-visible{ background:var(--signal)!important; color:var(--ink)!important; transform:translateX(3px); box-shadow:inset 4px 0 0 var(--paper); } .edition-menu__panel a[aria-current], .amsp-title-menu__panel--rooms a[aria-current]{ background:var(--signal); color:var(--ink)!important; box-shadow:inset 4px 0 0 var(--paper); } .edition-menu__panel a[aria-current]::before, .amsp-title-menu__panel--rooms a[aria-current]::before{ content:"•"; position:absolute; left:3px; top:50%; transform:translateY(-52%); font-size:13px; } /* Main publication nav grows one compact column for the edition switcher. */ .amsp-nav__in{ grid-template-columns:auto minmax(0,1fr) auto auto auto!important; } .amsp-nav__lemon{grid-column:1;grid-row:1} .amsp-nav__in>.amsp-title-menu{grid-column:2;grid-row:1} .amsp-nav__in>.edition-menu{grid-column:3;grid-row:1} .amsp-nav__links{grid-column:4;grid-row:1} .amsp-nav__in>.nav-publisher-mark{grid-column:5;grid-row:1} /* 03 — Listening dropdowns are local room navigation only. */ .amsp-title-menu__panel--rooms{width:min(300px,82vw)} .amsp-title-menu__panel--rooms a small{text-transform:none;letter-spacing:.025em} /* On the Library index the yellow Library button would only repeat the current page. Room pages retain it as a useful way back to the Library. */ .room-nav__library-link--current{display:none!important} /* 04 — Mobile footer title: +25-ish percent at the common 390px viewport, with retina-hairline rules so the masthead, not the rules, carries weight. */ @media(max-width:819px){ .amsp-foot__mark{ font-size:clamp(40px,13.2vw,68px)!important; line-height:.96!important; max-width:8.4em!important; border-top:.5px solid rgba(255,255,255,.62)!important; border-bottom:.5px solid rgba(255,255,255,.62)!important; padding-top:15px!important; padding-bottom:15px!important; margin-bottom:24px!important; } /* Bring the closing dandelion heads up toward the credits instead of leaving a black moat above them. The credits remain cleanly readable. */ .amsp-foot .credits{ margin-top:14px!important; padding-top:14px!important; padding-bottom:clamp(162px,49vw,215px)!important; } .amsp-foot::before{ height:clamp(232px,69vw,304px)!important; background-position:50% 100%!important; } } /* 05 — Mobile opening dandelions: keep the complete far-left image edge and scale from that edge so the heads rise back toward / graze the masthead. Stems still terminate on the yellow Edition 001 field. */ @media(max-width:520px){ .masthead-cover__dandelions{ width:150%!important; left:0!important; right:auto!important; bottom:-1px!important; } } @media(min-width:521px) and (max-width:899px){ .masthead-cover__dandelions{ width:124%!important; left:0!important; right:auto!important; bottom:-1px!important; } } @media(max-width:760px){ .amsp-nav__in{ grid-template-columns:auto minmax(0,1fr) auto auto!important; column-gap:7px!important; } .amsp-nav__in>.amsp-title-menu{grid-column:2;grid-row:1} .amsp-nav__in>.edition-menu{grid-column:3;grid-row:1} .amsp-nav__in>.nav-publisher-mark{grid-column:4;grid-row:1} .edition-menu summary{font-size:8px;padding:7px 16px 7px 7px} .amsp-title-menu summary{font-size:9px!important} .edition-menu__panel{right:-6px} } @media(max-width:390px){ .edition-menu summary{font-size:0;min-width:36px;padding:7px 16px 7px 7px} .edition-menu summary::before{content:"ED.";font-size:8px} .amsp-nav__in>.nav-publisher-mark{min-width:56px!important} .amsp-nav__in>.nav-publisher-mark img{width:56px!important} } @media(prefers-reduced-motion:reduce){ .nav-publisher-mark, .edition-menu summary, .edition-menu__panel a, .amsp-title-menu__panel--rooms a{transition:none!important} .edition-menu__panel a:hover, .edition-menu__panel a:focus-visible, .amsp-title-menu__panel--rooms a:hover, .amsp-title-menu__panel--rooms a:focus-visible{transform:none} } /* ========================================================================== DRAFT 04.34 — CONTINUUM / SECRET LEMONS / HEADER CLEANUP (2026-09-08) Homepage continuum reveal, quieter Editions index, Katz doorway spacing, clickable Listening threshold flower, and Listening Library lemon burst. ========================================================================== */ /* 01 — Publication header: Editions owns current-edition state. The separate Edition 001 radio is gone, leaving Editions / Listening / publisher mark. */ .amsp-nav__in{ grid-template-columns:auto minmax(0,1fr) auto auto auto!important; column-gap:10px!important; } .amsp-nav__lemon{grid-column:1;grid-row:1} .amsp-nav__in>.amsp-title-menu{grid-column:2;grid-row:1} .amsp-nav__in>.edition-menu{grid-column:3;grid-row:1} .amsp-nav__links{grid-column:4;grid-row:1} .amsp-nav__in>.nav-publisher-mark{grid-column:5;grid-row:1} .amsp-nav__links{gap:0!important} /* Quieter Editions control and compact publication-index panel. */ .edition-menu summary{ padding:8px 18px 8px 9px!important; border:1px solid rgba(255,255,255,.24)!important; background:transparent!important; color:var(--paper)!important; letter-spacing:.075em!important; transition:border-color .14s ease,color .14s ease!important; } .edition-menu summary::after{color:var(--signal)!important} .edition-menu[open] summary, .edition-menu summary:hover, .edition-menu summary:focus-visible{ background:transparent!important; color:var(--paper)!important; border-color:rgba(240,226,15,.72)!important; } .edition-menu__panel{ width:min(204px,72vw)!important; top:calc(100% + 6px)!important; padding:0!important; border:1px solid rgba(255,255,255,.24)!important; box-shadow:none!important; } .edition-menu__panel a, .edition-menu__entry{ position:relative; display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; min-height:42px; padding:10px 12px!important; border-bottom:1px solid rgba(255,255,255,.14)!important; color:var(--paper); font-family:var(--mono); text-transform:uppercase; text-decoration:none; transition:background .14s ease,color .14s ease,transform .14s ease; } .edition-menu__panel>:last-child{border-bottom:0!important} .edition-menu__panel a span, .edition-menu__entry>span{font-size:10px!important;letter-spacing:.07em!important} .edition-menu__panel a small, .edition-menu__entry small{ font-size:7px!important; letter-spacing:.07em!important; opacity:.72!important; white-space:nowrap; } .edition-menu__panel a[aria-current]{ background:rgba(240,226,15,.12)!important; color:var(--paper)!important; box-shadow:inset 2px 0 0 var(--signal)!important; } .edition-menu__panel a[aria-current] small{color:var(--signal);opacity:1!important} .edition-menu__panel a[aria-current]::before{display:none!important} .edition-menu__panel a:hover, .edition-menu__panel a:focus-visible{ background:var(--signal)!important; color:var(--ink)!important; transform:translateX(2px)!important; box-shadow:none!important; } .edition-menu__entry--pending{color:rgba(255,255,255,.62);cursor:default} .edition-menu__entry--pending small{color:rgba(255,255,255,.56)} /* 02 — Continuum: current work appears between the moving image signal and Edition 001 contents. It stays lighter than the table of contents. */ .continuum-flow{position:relative;background:var(--warm-white)} .continuum-flow .photo-wall{ position:sticky; top:48px; z-index:12; overflow:hidden; transform-origin:50% 0; transition:height .58s cubic-bezier(.2,.72,.16,1),transform .58s cubic-bezier(.2,.72,.16,1),opacity .34s ease; } .continuum-flow.is-continuum-arriving .photo-wall{ height:52px!important; transform:translateY(-58px); opacity:0; } .continuum{ position:relative; z-index:13; background:var(--warm-white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-top:clamp(50px,6vw,82px)!important; padding-bottom:clamp(48px,6vw,76px)!important; } .continuum__head{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(24px,5vw,72px); align-items:end; margin-bottom:clamp(28px,4vw,48px); } .continuum__head .eyebrow{grid-column:1;margin-bottom:0} .continuum__head h2{grid-column:2;grid-row:1 / span 2;margin:0;line-height:.95} .continuum__head .small{grid-column:1;margin:10px 0 0;max-width:28em} .continuum__grid{display:grid;border-top:1px solid var(--ink)} .continuum__item{ display:flex; flex-direction:column; min-height:178px; padding:18px 18px 16px; color:var(--ink); text-decoration:none; transition:background .16s ease,transform .16s ease; /* Rules are internal only and drawn per item: the left rule and the top rule. First column and first row suppress theirs. Because the selectors below are written against the COLUMN count rather than the item count, 3, 4 or 5 items all work with no edits. */ border-left:1px solid var(--line); border-top:1px solid var(--line); border-right:0; border-bottom:0; } .continuum__item:hover,.continuum__item:focus-visible{background:var(--signal);transform:translateY(-3px)} .continuum__item--pending{background:rgba(10,10,10,.035);color:var(--muted);cursor:default} .continuum__item--pending:hover{background:rgba(10,10,10,.035);transform:none} .continuum__meta{ font-family:var(--mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:auto; padding-bottom:24px; } .continuum__item strong{font-family:var(--display);font-size:clamp(23px,2.3vw,34px);line-height:1.05;font-weight:700} .continuum__item em{font-family:var(--body);font-size:12px;line-height:1.4;font-style:normal;margin-top:10px} @media(max-width:819.98px){ .continuum__head{display:block;margin-bottom:28px} .continuum__item{min-height:150px;padding:15px 14px} } @media(max-width:520px){ .continuum__item{min-height:118px} .continuum__meta{padding-bottom:12px} } /* 03 — Chance of Katz doorway: wider door, more air, cat pushed right while remaining fully contained and un-cropped. */ .katz-play-row{overflow:visible!important} .katz-play-cat{object-fit:contain!important;object-position:center bottom!important} @media(min-width:1025px){ .katz-play-row{ grid-template-columns:minmax(390px,.96fr) minmax(300px,1.04fr)!important; gap:clamp(54px,6vw,92px)!important; width:calc(100% + clamp(78px,7vw,112px))!important; } .katz-game-button{ width:min(100%,450px)!important; min-height:192px!important; padding:34px 36px!important; } .katz-play-cat{width:min(100%,520px)!important;max-width:520px!important} } @media(min-width:1180px){ .katz-play-cat{transform:translate(68px,14px)!important} } @media(min-width:1025px) and (max-width:1179px){ .katz-play-cat{transform:translate(28px,14px)!important} } /* 04 — Listening Room threshold: the Listening Library's yellow flower now grows from the lower-right edge and is itself the doorway to Room 001. */ #listening .listening__flower-link{ position:absolute; z-index:1; display:block; appearance:none; -webkit-appearance:none; border:0; padding:0; background:transparent; cursor:pointer; right:clamp(0px,1.5vw,22px); bottom:0; height:clamp(350px,38vw,510px); width:auto; text-decoration:none; line-height:0; } #listening .listening__flower-link .listening__flower{ position:static!important; display:block!important; height:100%!important; width:auto!important; max-width:none!important; object-fit:contain!important; opacity:1!important; pointer-events:none!important; transform:none!important; margin:0!important; } #listening .listening__flower-link:hover .listening__flower{transform:translateY(-3px)!important} #listening .listening__flower-link:focus-visible{outline-offset:-3px} @media(min-width:820px){ #listening > .wrap{padding-right:clamp(210px,22vw,350px)!important} } @media(max-width:819.98px){ #listening{padding-bottom:clamp(285px,82vw,350px)!important} #listening .listening__flower-link{ right:0; bottom:0; height:clamp(300px,88vw,390px); } } /* 05 — Listening flowers. Draft 04.43 extends the restrained 🍋 burst to the Edition 001 threshold flower. The flower is now a non-navigating surprise; the explicit Open Listening Room 001 CTA carries Room navigation. The Library index keeps its existing independent burst trigger. */ @media(max-width:760px){ .amsp-nav__in{ grid-template-columns:auto minmax(0,1fr) auto auto!important; } .amsp-nav__in>.amsp-title-menu{grid-column:2;grid-row:1} .amsp-nav__in>.edition-menu{grid-column:3;grid-row:1} .amsp-nav__links{display:none!important} .amsp-nav__in>.nav-publisher-mark{grid-column:4;grid-row:1} .edition-menu__panel{right:-4px!important} } @media(prefers-reduced-motion:reduce){ .continuum-flow .photo-wall{ position:relative!important; top:auto!important; height:auto!important; transform:none!important; opacity:1!important; transition:none!important; } .continuum__item, #listening .listening__flower-link .listening__flower{transition:none!important;transform:none!important} } /* 04.34 current-edition state also remains visible on non-edition pages. */ .edition-menu__panel a.is-current-edition{ background:rgba(240,226,15,.12)!important; color:var(--paper)!important; box-shadow:inset 2px 0 0 var(--signal)!important; } .edition-menu__panel a.is-current-edition small{color:var(--signal);opacity:1!important} .edition-menu__panel a.is-current-edition:hover, .edition-menu__panel a.is-current-edition:focus-visible{ background:var(--signal)!important; color:var(--ink)!important; } .edition-menu__panel a.is-current-edition:hover small, .edition-menu__panel a.is-current-edition:focus-visible small{color:var(--ink)!important} /* ========================================================================== DRAFT 04.35 — EDITION HOME CONTROL / CONTINUUM SKINS (2026-09-08) Merge the homepage edition label into the left lemon cluster, reverse the lemon / publisher-mark destinations, and let readers choose a Continuum surface using the Lemon Juice yellow + warm-orange palette. ========================================================================== */ /* 01 — Homepage utility bar: the lemon returns to AMSP home; the edition label beside it is itself the edition selector. No second EDITIONS control. */ .amsp-nav--edition-home .amsp-nav__in{ grid-template-columns:auto auto minmax(0,1fr) auto auto!important; column-gap:10px!important; } .amsp-nav--edition-home .amsp-nav__lemon{grid-column:1;grid-row:1} .amsp-nav--edition-home .edition-menu--primary{ grid-column:2; grid-row:1; justify-self:start; } .amsp-nav--edition-home .amsp-nav__links{grid-column:4;grid-row:1} .amsp-nav--edition-home .nav-publisher-mark{grid-column:5;grid-row:1} .amsp-nav--edition-home .edition-menu--primary summary{ font-size:9px!important; min-width:0!important; padding:8px 19px 8px 9px!important; letter-spacing:.085em!important; } .amsp-nav--edition-home .edition-menu--primary summary::before{content:none!important} .amsp-nav--edition-home .edition-menu--primary .edition-menu__panel{ left:0!important; right:auto!important; } @media(max-width:760px){ .amsp-nav--edition-home .amsp-nav__in{ grid-template-columns:auto minmax(0,1fr) auto!important; } .amsp-nav--edition-home .edition-menu--primary{grid-column:2;grid-row:1;justify-self:start} .amsp-nav--edition-home .amsp-nav__links{display:none!important} .amsp-nav--edition-home .nav-publisher-mark{grid-column:3;grid-row:1} .amsp-nav--edition-home .edition-menu--primary .edition-menu__panel{left:-38px!important;right:auto!important} } @media(max-width:390px){ .amsp-nav--edition-home .edition-menu--primary summary{ font-size:8px!important; padding:7px 17px 7px 7px!important; } } /* 02 — Continuum skin system. The content/layout remains fixed; only the coordinated surface changes. Dark is the shipped default. */ .continuum{ --continuum-bg:#0A0A0A; --continuum-fg:#F7F5F0; --continuum-line:rgba(247,245,240,.34); --continuum-muted:#CFD1C8; --continuum-pending-bg:rgba(255,255,255,.055); --continuum-pending-fg:#A7A99E; --continuum-hover-bg:#FFEE00; --continuum-hover-fg:#0A0A0A; --continuum-selected-bg:#FFEE00; --continuum-selected-fg:#0A0A0A; background:#0A0A0A; color:var(--continuum-fg); border-color:var(--continuum-line)!important; transition:background-color .24s ease,color .24s ease,border-color .24s ease; } /* 04.39: yellow and warm share one variable set; only the surface differs. WARM's vertical descent lives in the 04.36 section below and still wins. */ .continuum[data-continuum-skin="yellow"], .continuum[data-continuum-skin="warm"]{ --continuum-fg:#0A0A0A; --continuum-line:rgba(10,10,10,.42); --continuum-muted:#4C5651; --continuum-pending-bg:rgba(10,10,10,.045); --continuum-pending-fg:#65665F; --continuum-hover-bg:#0A0A0A; --continuum-hover-fg:#F7F5F0; --continuum-selected-bg:#0A0A0A; --continuum-selected-fg:#F7F5F0; } .continuum[data-continuum-skin="yellow"]{background:#FFEE00} .continuum__head{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); } .continuum__utilities{ grid-column:1; grid-row:1; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; align-self:end; } .continuum__utilities .eyebrow{margin:0;color:inherit;opacity:.82} .continuum__head h2{ grid-column:2; grid-row:1 / span 2; color:inherit; } .continuum__head .small{ grid-column:1; grid-row:2; color:var(--continuum-muted)!important; } .continuum__grid{border-top-color:var(--continuum-fg)!important} .continuum__item{ color:var(--continuum-fg)!important; /* 04.39: was border-right-color. The refactored component draws left/top rules, so the skin must colour every side or skins lose their rules. */ border-color:var(--continuum-line)!important; } .continuum__item:hover,.continuum__item:focus-visible{ background:var(--continuum-hover-bg)!important; color:var(--continuum-hover-fg)!important; } .continuum__item--pending{ background:var(--continuum-pending-bg)!important; color:var(--continuum-pending-fg)!important; } .continuum__item--pending:hover{background:var(--continuum-pending-bg)!important;color:var(--continuum-pending-fg)!important} @media(max-width:819.98px){ .continuum__utilities{display:flex;margin-bottom:6px} .continuum__head h2{margin:4px 0 14px} .continuum__head .small{color:var(--continuum-muted)!important} } @media(max-width:520px){ .continuum__utilities{align-items:flex-start;gap:10px 14px} } @media(prefers-reduced-motion:reduce){ .continuum{transition:none!important} } /* ========================================================================== DRAFT 04.36 — EDITION 000 AVAILABLE / CONTINUUM TRANSITION (2026-09-08) Make the current issue label explicit, expose a true Edition 000 archive destination, tighten the strip-to-Continuum handoff, and turn the warm skin into a vertical yellow-to-orange descent. ========================================================================== */ /* 01 — Edition selector: current issue is named once and Edition 000 is live. */ .amsp-nav--edition-home .edition-menu--primary summary{ white-space:nowrap; } .amsp-nav--edition-home .edition-menu--primary .edition-menu__panel a:not([aria-current]) small{ opacity:.82!important; } /* 02 — The moving strip now leaves only a short black pause before Continuum. */ .continuum-flow{background:#000!important} .continuum-flow.is-continuum-arriving .photo-wall{ height:22px!important; transform:translateY(-30px)!important; } /* 03 — WARM descends from Lemon Juice yellow into warm orange. */ .continuum[data-continuum-skin="warm"]{ background:linear-gradient(180deg,#FFEE00 0%,#FFE119 38%,#FFD20D 68%,#FFC700 100%)!important; } @media(max-width:520px){ .amsp-nav--edition-home .edition-menu--primary summary{ font-size:7.5px!important; letter-spacing:.065em!important; padding-right:16px!important; } .continuum-flow.is-continuum-arriving .photo-wall{ height:16px!important; transform:translateY(-22px)!important; } } /* ========================================================================== DRAFT 04.37 — PUBLICATION EDITIONS MENU IN LISTENING HEADERS (2026-09-08) The AMSP title is publication-level navigation. Its dropdown now lists Editions; room navigation stays local to Listening Library controls. ========================================================================== */ .amsp-title-menu__panel--editions{ width:min(250px,82vw)!important; padding:0!important; box-shadow:5px 5px 0 rgba(240,226,15,.92)!important; } .amsp-title-menu__panel--editions a{ position:relative; display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; min-height:44px; padding:11px 12px!important; border-bottom:1px solid rgba(255,255,255,.16); color:var(--paper); text-decoration:none; font-family:var(--mono); text-transform:uppercase; transition:background .14s ease,color .14s ease,transform .14s ease; } .amsp-title-menu__panel--editions a:last-child{border-bottom:0} .amsp-title-menu__panel--editions a span{font-size:10px;letter-spacing:.065em} .amsp-title-menu__panel--editions a small{ font-size:8px; letter-spacing:.07em; opacity:.7; white-space:nowrap; } .amsp-title-menu__panel--editions a.is-current-edition{ background:rgba(240,226,15,.11); box-shadow:inset 2px 0 0 var(--signal); } .amsp-title-menu__panel--editions a.is-current-edition small{color:var(--signal);opacity:1} .amsp-title-menu__panel--editions a:hover, .amsp-title-menu__panel--editions a:focus-visible{ background:var(--signal)!important; color:var(--ink)!important; transform:translateX(2px); } .amsp-title-menu__panel--editions a:hover small, .amsp-title-menu__panel--editions a:focus-visible small{color:var(--ink)!important;opacity:1} @media(prefers-reduced-motion:reduce){ .amsp-title-menu__panel--editions a{transition:none!important} .amsp-title-menu__panel--editions a:hover, .amsp-title-menu__panel--editions a:focus-visible{transform:none!important} } /* ========================================================================== DRAFT 04.38 — CLEAN RESPONSIVE PASS / HERO META / EDITION 000 SPACING (2026-09-08) Keep Continuum readable at phone widths, move Edition 001 launch metadata into the open black field below the flower heads, and restore the shared page grid/gutters to the Edition 000 archive page. ========================================================================== */ /* 01 — Continuum: keep the display title inside the viewport at every width. Desktop retains the large two-column head; compact layouts become a clean single flow with no clipped final letters. */ .continuum__head h2{ max-width:100%; overflow:visible; } @media(min-width:820px){ .continuum__head{ grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr)!important; gap:clamp(28px,4.5vw,68px)!important; } .continuum__head h2{ font-size:clamp(68px,7.4vw,112px)!important; line-height:.92!important; } } @media(max-width:819.98px){ .continuum__head{ display:block!important; min-width:0!important; margin-bottom:38px!important; } .continuum__head h2{ display:block!important; width:100%!important; max-width:100%!important; font-size:clamp(50px,14.5vw,72px)!important; line-height:.92!important; letter-spacing:-.025em!important; margin:10px 0 18px!important; white-space:normal!important; } .continuum__utilities{ width:100%!important; margin-bottom:22px!important; } .continuum__head .small{ max-width:32em!important; margin-top:0!important; } } @media(max-width:520px){ .continuum{ padding-top:42px!important; padding-bottom:42px!important; } .continuum__head h2{ font-size:clamp(48px,14.8vw,66px)!important; } .continuum__grid{width:100%!important;min-width:0!important} .continuum__item{ min-width:0!important; padding:16px 14px!important; } .continuum__item strong{ font-size:clamp(25px,7.2vw,34px)!important; overflow-wrap:normal!important; } } /* 02 — Desktop cover: the edition/date/publisher block belongs in the open black zone below the flower heads, not across the blooms. */ @media(min-width:900px){ .masthead-cover__meta{ top:auto!important; bottom:clamp(52px,5vw,78px)!important; right:var(--mast-gut)!important; width:min(430px,29vw)!important; } .masthead-cover__meta .masthead__meta{ padding-top:12px!important; margin-bottom:14px!important; } .masthead-cover__meta .edition-launch{ gap:18px!important; } } @media(min-width:900px) and (max-width:1120px){ .masthead-cover__meta{ width:min(390px,34vw)!important; bottom:42px!important; } } /* 03 — Edition 000 archive: shared .wrap now supplies the publication's real 1180px measure and gutters. These rules simply keep the two-column page relaxed and prevent the cover/title from crowding either edge. */ .edition000-page .edition000-hero{ padding-top:clamp(64px,8vw,112px)!important; padding-bottom:clamp(64px,7vw,104px)!important; } .edition000-page .edition000-grid{ grid-template-columns:minmax(0,.92fr) minmax(300px,.58fr)!important; gap:clamp(48px,7vw,96px)!important; align-items:center!important; } .edition000-page .edition000-title{ font-size:clamp(76px,9vw,138px)!important; line-height:.88!important; margin-bottom:30px!important; } .edition000-page .edition000-copy{ max-width:36rem!important; } .edition000-page .edition000-poster img{ width:min(100%,500px)!important; } @media(max-width:819.98px){ .edition000-page .edition000-hero{ padding-top:46px!important; padding-bottom:56px!important; } .edition000-page .edition000-grid{ grid-template-columns:1fr!important; gap:42px!important; align-items:start!important; } .edition000-page .edition000-title{ font-size:clamp(68px,22vw,106px)!important; } .edition000-page .edition000-poster img{ width:min(100%,460px)!important; margin-inline:0!important; } } /* ========================================================================== DRAFT 04.39 — EDITORIAL ORDER / WORKBENCH / 🍋 CONSIDERING MOTION (2026-09-09) Statement now precedes Continuum. Continuum becomes count-neutral for the 3–5 item rule. #04 gains the open workbench. #05 becomes the Edition's ending. Vocabulary is kept separate: flowers = listening, 🍋 = editorial movement, illustrated lemon = Lemon Juice identity. ========================================================================== */ /* 01 — CONTINUUM COLUMN COUNTS. CSS cannot compute nth-child from a custom property, so desktop enumerates the three cases the 3–5 editorial rule allows. Written once; adding or removing a Continuum item only changes data-continuum-count in the markup. Tablet (2 col) and mobile (1 col) are already count-neutral. */ @media(min-width:820px){ .continuum__grid[data-continuum-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))} .continuum__grid[data-continuum-count="3"] .continuum__item:nth-child(3n+1){border-left:0} .continuum__grid[data-continuum-count="3"] .continuum__item:nth-child(-n+3){border-top:0} .continuum__grid[data-continuum-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))} .continuum__grid[data-continuum-count="4"] .continuum__item:nth-child(4n+1){border-left:0} .continuum__grid[data-continuum-count="4"] .continuum__item:nth-child(-n+4){border-top:0} .continuum__grid[data-continuum-count="5"]{grid-template-columns:repeat(5,minmax(0,1fr))} .continuum__grid[data-continuum-count="5"] .continuum__item:nth-child(5n+1){border-left:0} .continuum__grid[data-continuum-count="5"] .continuum__item:nth-child(-n+5){border-top:0} /* Safety net if a count attribute is ever missing. */ .continuum__grid:not([data-continuum-count]){grid-template-columns:repeat(4,minmax(0,1fr))} .continuum__grid:not([data-continuum-count]) .continuum__item:nth-child(4n+1){border-left:0} .continuum__grid:not([data-continuum-count]) .continuum__item:nth-child(-n+4){border-top:0} } @media(max-width:819.98px){ .continuum__grid{grid-template-columns:1fr 1fr} .continuum__item:nth-child(2n+1){border-left:0} .continuum__item:nth-child(-n+2){border-top:0} } @media(max-width:520px){ .continuum__grid{grid-template-columns:1fr} .continuum__item{border-left:0} .continuum__item:first-child{border-top:0} } /* Title / description are now classed, so the markup can change shape. */ .continuum__title{ font-family:var(--display); font-size:clamp(23px,2.3vw,34px); line-height:1.05; font-weight:700; /* 5 columns give narrow cells; long single words must break rather than print over the neighbouring item. */ min-width:0; overflow-wrap:break-word; hyphens:auto; } .continuum__item{min-width:0} @media(min-width:820px){ .continuum__grid[data-continuum-count="4"] .continuum__title{font-size:clamp(20px,1.9vw,29px)} .continuum__grid[data-continuum-count="5"] .continuum__title{font-size:clamp(19px,1.55vw,25px)} .continuum__grid[data-continuum-count="5"] .continuum__description{font-size:11.5px} } .continuum__description{ font-family:var(--body); font-size:12px; line-height:1.4; font-style:normal; margin-top:10px; } /* Single source for the display size, replacing the four stacked generations. */ .continuum__head h2{font-size:clamp(48px,7vw,92px)} @media(min-width:820px){ .continuum__head h2{font-size:clamp(68px,7.4vw,112px)!important} } @media(max-width:819.98px){ .continuum__head h2{font-size:clamp(50px,14.5vw,72px)!important} } @media(max-width:520px){ .continuum__head h2{font-size:clamp(48px,14.8vw,66px)!important} } @media(max-width:520px){ .continuum__title{font-size:clamp(25px,7.2vw,34px)!important} } /* 03 — OPEN WORKBENCH. Independent native
. No exclusive-accordion behaviour, no JS, and no fixed category set: a future project supplies entirely different drawers using the same classes. */ .workbench{margin-top:clamp(34px,4vw,54px)} .workbench__label{ font-family:var(--mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase; margin:0 0 6px; color:var(--muted-deep); } .workbench__drawer{border-top:1px solid var(--line)} .workbench__drawer:last-of-type{border-bottom:1px solid var(--line)} .workbench__summary{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:18px; min-height:56px; padding:16px 2px; list-style:none; cursor:pointer; color:inherit; } .workbench__summary::-webkit-details-marker{display:none} .workbench__summary::marker{content:""} .workbench__summary::after{ content:"+"; grid-column:2; grid-row:1 / span 2; align-self:center; font-family:var(--mono); font-size:clamp(22px,2.2vw,30px); line-height:1; color:currentColor; } .workbench__drawer[open]>.workbench__summary::after{content:"−"} .workbench__summary-title{ grid-column:1; grid-row:1; font-family:var(--mono); font-size:clamp(12px,1.2vw,14px); font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .workbench__summary-hint{ grid-column:1; grid-row:2; display:block; margin-top:5px; font-family:var(--body); font-size:12px; line-height:1.4; color:var(--muted-deep); } .workbench__summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px} .workbench__body{padding:2px 0 clamp(26px,3vw,40px);max-width:52em} .workbench__body img{max-width:100%;height:auto} .workbench__body pre{overflow-x:auto;max-width:100%} .workbench__pending{ font-family:var(--body); font-size:13px; color:var(--muted-deep); margin:0; } /* The doorway is now process/evidence inside a drawer, not the Edition's ending, so it is deliberately de-emphasised: no desktop overhang (there is no outer gutter inside a drawer to absorb it), a shorter cat, and a smaller button. #05 stays the dominant doorway out of the numbered Edition. */ .workbench__body--play{max-width:none} .workbench__body--play .katz-play-row{ width:100%!important; grid-template-columns:minmax(0,auto) minmax(140px,300px)!important; gap:clamp(20px,3vw,44px)!important; align-items:end; margin-top:6px; } .workbench__body--play .katz-play-cat{ width:min(100%,270px)!important; max-width:270px!important; max-height:280px!important; transform:none!important; } .workbench__body--play .katz-game-button{ width:min(100%,380px)!important; min-height:116px!important; padding:24px 28px!important; } @media(max-width:700px){ .workbench__body--play .katz-play-row{grid-template-columns:1fr!important} .workbench__body--play .katz-play-cat{margin-right:0!important} } /* 05 — #05 is the Edition's ending, so the threshold carries more depth than a peer band. Colour, flower and link behaviour are unchanged. */ .listening--threshold{ padding-top:clamp(58px,7vw,104px)!important; padding-bottom:clamp(64px,8vw,116px)!important; } .listening__room-title{ font-family:var(--display); font-size:clamp(21px,2.2vw,30px); line-height:1.1; margin:2px 0 14px!important; } /* DEV-PAREN · PARENTHETICAL Helpful context outside the immediate reading path, but still close enough to remain in flow. Real parentheses carry the editorial signal; the device has no label, box, disclosure or JavaScript. Essential instructions, evidence and credits do not belong here. */ .editorial-aside--parenthetical{ max-width:38em; margin:clamp(18px,2.2vw,26px) 0 0; padding-left:clamp(10px,1.5vw,20px); font-family:var(--display); font-size:clamp(15px,1.05vw,16px); font-style:italic; line-height:1.55; letter-spacing:0; opacity:.82; } .editorial-aside--parenthetical p{margin:0} .listening__note{max-width:38em} @media(max-width:699px){ .editorial-aside--parenthetical{ padding-left:8px; font-size:15px; line-height:1.58; opacity:.86; } } /* 06 — Peripheral, unnumbered material after the threshold. */ .recipes-peripheral{background:var(--paper)!important} .recipes-peripheral__status{ font-family:var(--display); font-size:clamp(19px,2vw,26px); margin:10px 0 0; color:var(--muted-deep); } /* 07 — HOW TO FIND THINGS. Footer-level, closed by default, three terms. Native
gives keyboard operation and state announcement with no JS; the class is deliberately outside menu.js's selector, since an inline footer disclosure should not close on outside tap or scroll. */ .find-things{margin:0 0 22px;font-family:var(--mono)} .find-things__summary{ display:inline-flex; align-items:center; min-height:44px; font-size:9px; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; list-style:none; color:inherit; opacity:.72; } .find-things__summary::-webkit-details-marker{display:none} .find-things__summary::marker{content:""} .find-things__summary::after{content:" +";white-space:pre} .find-things[open]>.find-things__summary{opacity:1} .find-things[open]>.find-things__summary::after{content:" −"} .find-things__summary:focus-visible{outline:3px solid var(--signal);outline-offset:3px} .find-things__list{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; max-width:46em; margin:10px 0 0; font-size:11px; line-height:1.5; } .find-things__list dt{font-weight:600;letter-spacing:.06em;text-transform:uppercase} .find-things__list dd{margin:0;font-family:var(--body);opacity:.82} @media(max-width:520px){ .find-things__list{grid-template-columns:1fr;gap:2px 0} .find-things__list dd{margin-bottom:10px} } /* ====================================================================== DRAFT 04.40 — CONTENT RECOVERY + SECRET FLOWER + WORKBENCH POLISH 2026-09-09 04.39 remains the engineering base. This block restores approved play, adds the real Edition 001 narrative shells, and does not re-architect. ====================================================================== */ /* 01 Statement: actually tiny now; the ecosystem portals moved to Practice. */ .statement-compact{padding-top:clamp(46px,6vw,82px);padding-bottom:clamp(50px,6vw,86px)} .statement-compact .amsp-sec__head{margin-bottom:clamp(22px,3vw,34px)} .statement-compact .intro-letter{max-width:48em} .statement-compact .intro-letter__lead{font-size:clamp(24px,3.1vw,40px);line-height:1.18} .statement-compact .intro-letter p:not(.intro-letter__lead){font-size:clamp(15px,1.2vw,18px);line-height:1.58} /* 03 Practice: photograph-led origin fragment. */ .practice-origin{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);gap:clamp(34px,6vw,92px);align-items:start} .practice-origin__figure{margin:0;position:relative} .practice-origin__figure img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff} .practice-origin__figure figcaption{margin-top:9px;font-family:var(--mono);font-size:9px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-deep)} .practice-origin__copy{max-width:48em;padding-top:clamp(6px,1vw,14px)} .practice-origin__copy h2{margin-top:12px} .practice-origin__copy .lede{max-width:36em} .practice-origin__portals{grid-column:1 / -1;margin-top:clamp(18px,3vw,34px)} @media(max-width:819.98px){ .practice-origin{grid-template-columns:1fr;gap:28px} .practice-origin__figure{max-width:620px} .practice-origin__portals{grid-column:auto} } /* Earlier playable version: regain some of the approved oversized arcade-door gesture while staying inside the drawer's own width. */ .workbench__body--play .katz-game-button{width:min(100%,440px)!important;min-height:150px!important;padding:28px 30px!important} .workbench__body--play .katz-play-cat{width:min(100%,340px)!important;max-width:340px!important;max-height:350px!important} @media(max-width:700px){ .workbench__body--play .katz-game-button{min-height:118px!important;width:100%!important} .workbench__body--play .katz-play-cat{width:min(82vw,310px)!important} } /* Listening Library secret Easter egg. Flower remains nonessential to nav. */ .archive-hero__flower.flower-lemon-trigger{ appearance:none; -webkit-appearance:none; border:0; padding:0; background:transparent; cursor:pointer; pointer-events:auto; user-select:none; font:inherit; } .archive-hero__flower.flower-lemon-trigger:focus-visible{outline:3px solid var(--orange);outline-offset:6px;border-radius:48% 52% 44% 56%} .lemon-burst-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:9999} .lemon-burst-piece{ position:fixed; left:var(--burst-x); top:var(--burst-y); width:var(--burst-size,18px); height:auto; display:block; object-fit:contain; transform:translate(-50%,-50%); will-change:transform,opacity; animation:lemon-burst-fly var(--burst-dur,1300ms) cubic-bezier(.16,.72,.27,1) var(--burst-delay,0ms) forwards; } @keyframes lemon-burst-fly{ 0%{opacity:0;transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg) scale(.6)} 10%{opacity:1} 72%{opacity:1} 100%{opacity:0;transform:translate(-50%,-50%) translate3d(var(--burst-dx),var(--burst-dy),0) rotate(var(--burst-rot)) scale(1.12)} } @media(prefers-reduced-motion:reduce){.lemon-burst-piece{animation:none!important;display:none!important}} /* ====================================================================== DRAFT 04.41 — CONTENT / INTERACTION / SUPPORT PASS 2026-09-10 04.40 remains the base. This layer turns Continuum items into small fold-outs, adds the support range, Current Weather, and final credit treatments without changing the five-movement editorial architecture. ====================================================================== */ /* CONTINUUM — signals first, a little context on request. Native details keeps the interaction quiet and keyboard-operable. */ .continuum-card{display:block!important;padding:0!important} .continuum-card__summary{ min-height:178px; padding:18px 18px 16px; display:flex; flex-direction:column; list-style:none; cursor:pointer; } .continuum-card__summary::-webkit-details-marker{display:none} .continuum-card__summary::marker{content:""} .continuum-card__summary::after{ content:"+"; position:absolute; right:14px; top:13px; font:600 12px/1 var(--mono); opacity:.72; } .continuum-card{position:relative} .continuum-card[open] .continuum-card__summary::after{content:"−"} .continuum-card__summary:focus-visible{outline:3px solid currentColor;outline-offset:-5px} .continuum-card__summary .continuum__meta{display:block} .continuum-card__summary .continuum__title{display:block} .continuum-card__summary .continuum__description{display:block} .continuum-card__more{ border-top:1px solid var(--continuum-line); padding:15px 18px 18px; font-family:var(--body); font-size:12px; line-height:1.5; } .continuum-card__more p{margin:0 0 12px;color:inherit!important} .continuum-card__more a{ font:600 9px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:inherit!important; text-decoration:underline; text-underline-offset:3px; } .continuum-card[open]{background:var(--continuum-hover-bg)!important;color:var(--continuum-hover-fg)!important;transform:none!important} @media(max-width:819.98px){ .continuum-card__summary{min-height:150px;padding:15px 14px} .continuum-card__more{padding:14px} } /* On phone the signals become a swipe rail: one thought is readable and the next one peeks in. Count remains 3–5 with no layout edit. */ @media(max-width:620px){ .continuum__grid{ display:flex!important; grid-template-columns:none!important; gap:0; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; padding-bottom:6px; } .continuum__item{ flex:0 0 78vw; scroll-snap-align:start; border-top:1px solid var(--continuum-line)!important; border-left:1px solid var(--continuum-line)!important; border-bottom:1px solid var(--continuum-line)!important; } .continuum__item:first-child{border-left:0!important} .continuum-card__summary{min-height:152px} .continuum__item--pending{min-height:152px} } .workbench__fall-note{margin:20px 0 0} .workbench__fall-note a{ display:inline-flex; flex-wrap:wrap; gap:8px 14px; align-items:center; color:var(--ink); text-decoration:none; font:11px/1.4 var(--mono); letter-spacing:.04em; text-transform:uppercase; } .workbench__fall-note a span{font-weight:700} .workbench__fall-note a:hover,.workbench__fall-note a:focus-visible{text-decoration:underline;text-underline-offset:4px} /* SUPPORT — same open publication, different amounts. Not membership tiers. */ .support-range .support-simple__in{max-width:1080px} .support-range__options{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:clamp(28px,4vw,46px); border-top:1px solid rgba(255,238,0,.62); border-bottom:1px solid rgba(255,238,0,.62); } .support-range__option{ min-width:0; min-height:184px; padding:20px 18px 18px; display:flex; flex-direction:column; color:var(--signal)!important; text-decoration:none; border-left:1px solid rgba(255,238,0,.42); transition:background .16s ease,color .16s ease,transform .16s ease; } .support-range__option:first-child{border-left:0} .support-range__option strong{ display:block; font:700 clamp(30px,4vw,52px)/1 var(--display); color:inherit; text-transform:none; } .support-range__option span{ display:block; margin-top:14px; font:15px/1.35 var(--body); color:inherit; max-width:18em; } .support-range__option small{ display:block; margin-top:auto; padding-top:24px; font:600 9px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:inherit; } .support-range__option:hover,.support-range__option:focus-visible{ background:var(--paper); color:var(--ink)!important; transform:translateY(-3px); outline:none; } .support-range__option--suggested{background:var(--signal);color:var(--ink)!important} .support-range__option--suggested:hover,.support-range__option--suggested:focus-visible{background:#fff;color:var(--ink)!important} .support-range__annual{margin:20px 0 0!important} .support-range__annual a{color:var(--signal)!important;font:600 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-underline-offset:4px} .support-range__stripe{margin-top:12px!important;opacity:.72} @media(max-width:819.98px){ .support-range__options{grid-template-columns:1fr 1fr} .support-range__option{border-top:1px solid rgba(255,238,0,.42)} .support-range__option:nth-child(-n+2){border-top:0} .support-range__option:nth-child(odd){border-left:0} } @media(max-width:520px){ .support-range__options{grid-template-columns:1fr} .support-range__option{min-height:148px;border-left:0!important;border-top:1px solid rgba(255,238,0,.42)!important} .support-range__option:first-child{border-top:0!important} } /* ABOUT — hidden-in-plain-sight aggregate readout. The values are actions, not unique-reader counts. */ .current-weather{ max-width:620px; margin:clamp(34px,5vw,58px) 0 28px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font-family:var(--mono); } .current-weather>summary{ min-height:48px; display:flex; align-items:center; gap:10px; list-style:none; cursor:pointer; font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; } .current-weather>summary::-webkit-details-marker{display:none} .current-weather>summary::marker{content:""} .current-weather>summary::after{content:" +";margin-left:auto} .current-weather[open]>summary::after{content:" −"} .current-weather>summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px} .current-weather__lamp{width:8px;height:8px;border-radius:50%;background:var(--signal);border:1px solid var(--ink);box-shadow:0 0 0 2px rgba(240,226,15,.2)} .current-weather__panel{padding:0 0 20px} .current-weather__intro{max-width:34em;margin:0 0 16px!important;font:12px/1.45 var(--body);color:var(--muted-deep)} .current-weather__readout{margin:0} .current-weather__readout>div{ display:grid; grid-template-columns:minmax(0,1fr) 6ch; gap:18px; align-items:baseline; padding:8px 0; border-top:1px dotted rgba(10,10,10,.3); } .current-weather__readout dt{font-size:10px;letter-spacing:.06em;text-transform:uppercase} .current-weather__readout dd{ margin:0; justify-self:end; min-width:5ch; padding:3px 6px 2px; text-align:right; background:#111; color:var(--signal); font:500 15px/1.2 var(--mono); letter-spacing:.1em; font-variant-numeric:tabular-nums; } .current-weather__lemons{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin:15px 0 0!important; padding-top:12px; border-top:1px solid var(--ink); font:600 9px/1.3 var(--mono)!important; letter-spacing:.08em; text-transform:uppercase; } .current-weather__lemons strong{font:500 15px/1.2 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.1em} /* Dandelion cover credit: small enough to remain metadata, not another footer statement. */ .visual-credit{ max-width:56em; margin:18px 0 8px; font:9px/1.45 var(--mono); letter-spacing:.05em; color:rgba(255,255,255,.64); } /* 04.41 shared visually-hidden utility. Listening scope already carried this; About now needs it for Current Weather live status too. */ .vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .current-weather__lemons strong{min-width:5ch;padding:3px 6px 2px;background:#111;color:var(--signal);text-align:right} /* -------------------------------------------------------------------------- 04.42 · FASCIA doorway test Unnumbered connective seam between the open workbench and Room 001. Keep this visually narrower than a movement and let the clean .fyi URL own the transition to the full Notion-backed FASCIA environment. -------------------------------------------------------------------------- */ .fascia-doorway{ display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:clamp(16px,2vw,28px); align-items:center; margin-top:clamp(36px,5vw,68px); padding:clamp(18px,2.4vw,28px) clamp(18px,2.8vw,34px); background:#171717; color:#f3eee3; border:1px solid rgba(243,238,227,.2); } .fascia-doorway__signal{ align-self:stretch; min-height:54px; background:linear-gradient(180deg,#ffee00 0%,#ff9b25 54%,#6d6f72 100%); } .fascia-doorway__copy{min-width:0} .fascia-doorway__eyebrow{ margin:0 0 7px!important; font:600 10px/1.2 var(--mono)!important; letter-spacing:.14em; text-transform:uppercase; color:#ffee00; } .fascia-doorway__line{ max-width:52em; margin:0!important; font:400 clamp(17px,1.55vw,22px)/1.35 var(--display)!important; color:#f3eee3; } .fascia-doorway__enter{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 15px; border:1px solid rgba(243,238,227,.48); color:#f3eee3; font:600 10px/1.15 var(--mono); letter-spacing:.11em; text-transform:uppercase; white-space:nowrap; } .fascia-doorway__enter:hover,.fascia-doorway__enter:focus-visible{ background:#ffee00; color:#0a0a0a; border-color:#ffee00; } .fascia-doorway__enter:focus-visible{outline:3px solid #ff9b25;outline-offset:3px} @media(max-width:700px){ .fascia-doorway{ grid-template-columns:7px minmax(0,1fr); align-items:start; margin-top:34px; padding:18px; } .fascia-doorway__signal{grid-row:1 / span 2;min-height:100%} .fascia-doorway__enter{grid-column:2;width:100%;margin-top:4px} .fascia-doorway__line{font-size:18px!important} } @media(prefers-reduced-motion:reduce){ .fascia-doorway__enter{transition:none!important} } /* ========================================================================== DRAFT 04.44 — LAUNCH STABILITY FIXES (2026-09-10) Keep the 04.43c architecture intact. This pass only gives the two publication radios room to read as separate controls and restores breathing room before the Lemon Juice publisher mark. Mobile continues to hide the pair. ========================================================================== */ @media(min-width:761px){ .amsp-nav--edition-home .amsp-nav__links{ gap:11px!important; margin-right:14px; } } @media(min-width:761px) and (max-width:980px){ .amsp-nav--edition-home .amsp-nav__links{ gap:8px!important; margin-right:8px; } } /* ========================================================================== DRAFT 04.45 — LAUNCH INTEGRATION + CONTINUUM MOTION (2026-09-11) Custom lemon sweep, quiet card life, and reversible masthead orientation. ========================================================================== */ .continuum__sweep{ position:relative; height:clamp(34px,4.6vw,58px); margin:0 0 clamp(2px,.6vw,8px); pointer-events:none; overflow:hidden; } .continuum__sweep img{ position:absolute; top:50%; left:clamp(8px,1vw,16px); width:clamp(26px,3.2vw,44px); height:auto; translate:0 -50%; filter:brightness(.97) drop-shadow(0 0 0 rgba(255,225,0,0)); } @media(prefers-reduced-motion:no-preference){ .continuum__title-stage.is-scanning .continuum__sweep{animation:continuum-sweep 8s ease-in-out infinite alternate} .continuum__item{animation:continuum-drift 9s ease-in-out infinite alternate} .continuum__item:nth-child(2){animation-duration:11s;animation-delay:-3.4s} .continuum__item:nth-child(3){animation-duration:10s;animation-delay:-6.1s} .continuum__item:nth-child(4){animation-duration:12s;animation-delay:-1.7s} } @keyframes continuum-sweep{ from{left:0} to{left:calc(100% - var(--lemon-w))} } @keyframes continuum-drift{from{translate:0 1px}to{translate:0 -4px}} .continuum__item:hover,.continuum__item:focus-visible,.continuum-card:focus-within{border-color:currentColor} .continuum-card__summary::after{transition:opacity .16s ease} .continuum-card:hover .continuum-card__summary::after, .continuum-card__summary:focus-visible::after, .continuum-card[open] .continuum-card__summary::after{opacity:1} .continuum[data-continuum-skin="yellow"] .continuum__sweep img{filter:brightness(.88) contrast(1.08)} @media(max-width:700px){ .continuum__sweep{height:34px;margin:4px 0 8px} .continuum__sweep img{width:24px} } @media(prefers-reduced-motion:reduce){ .continuum__sweep{animation:none} .continuum__sweep img{animation:none;transform:none} } .find-things--mast{ width:min(340px,100%); margin:3px 0 0; justify-self:end; text-align:left; color:var(--paper); } .find-things--mast .find-things__summary{ min-height:32px; font-size:8.5px; color:inherit; opacity:.78; } .find-things--mast[open]{ padding:8px 10px 10px; background:rgba(0,0,0,.78); border:1px solid rgba(255,255,255,.28); } .find-things--mast .find-things__list{ grid-template-columns:auto minmax(0,1fr); gap:5px 12px; margin-top:4px; font-size:9px; line-height:1.38; } .find-things--mast .find-things__list dd{font-family:var(--body);opacity:.88} .find-things--mast .find-things__credit{ margin:10px 0 0; padding-top:8px; border-top:1px dotted rgba(255,255,255,.28); font:8px/1.4 var(--mono); color:rgba(255,255,255,.66); } @media(max-width:899px){ .find-things--mast{justify-self:start;color:var(--ink);width:100%;max-width:420px} .find-things--mast[open]{background:rgba(255,255,255,.64);border-color:rgba(10,10,10,.26)} .find-things--mast .find-things__credit{color:var(--muted-deep);border-color:rgba(10,10,10,.22)} } @media(max-width:520px){ .find-things--mast .find-things__list{grid-template-columns:1fr;gap:1px 0} .find-things--mast .find-things__list dd{margin-bottom:7px} } /* ========================================================================== DRAFT 04.45b — ORIENTATION PANEL READABILITY (2026-09-11) Let the masthead orientation note grow inward from the right column instead of inheriting that column's narrow width. No masthead geometry is moved. ========================================================================== */ .find-things--mast{ width:min(420px,calc(100vw - 48px)); max-width:none; justify-self:end; } .find-things--mast .find-things__summary{ min-height:36px; font-size:10.5px; line-height:1.25; letter-spacing:.085em; } .find-things--mast[open]{ padding:14px 16px 16px; } .find-things--mast .find-things__list{ grid-template-columns:72px minmax(0,1fr); gap:8px 16px; margin-top:8px; font-size:12px; line-height:1.48; } .find-things--mast .find-things__list dt{font-size:10px;line-height:1.45} .find-things--mast .find-things__credit{ margin-top:14px; padding-top:10px; font-size:9.5px; line-height:1.5; } @media(max-width:899px){ .find-things--mast{width:min(420px,100%);max-width:420px;justify-self:start} } @media(max-width:520px){ .find-things--mast{width:100%;max-width:none} .find-things--mast .find-things__summary{font-size:10px} .find-things--mast .find-things__list{grid-template-columns:1fr;gap:2px 0;font-size:12px} .find-things--mast .find-things__list dt{margin-top:5px} .find-things--mast .find-things__list dd{margin-bottom:8px} } /* ========================================================================== DRAFT 04.45c — FINAL PRE-NOTION POLISH (2026-09-11) Final visual/mobile baseline before the separate Notion integration pass. ========================================================================== */ /* Edition 001 title: a subordinate Libre Baskerville italic line between the publication masthead and the flower field. */ .masthead-cover__edition-title{ margin:clamp(10px,1.4vw,22px) 0 0; font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(19px,2.6vw,42px); line-height:1.15; letter-spacing:-.005em; color:rgba(243,238,228,.88); max-width:22em; } /* Masthead launch containment. The orientation disclosure no longer sizes the actions track beyond its containing meta column. Reuse the already-proven stacked desktop treatment above 1180px instead of forcing a row that cannot fit inside the 29vw meta column. */ .edition-launch__actions{grid-template-columns:minmax(0,1fr)} .find-things--mast{width:100%;max-width:none} @media(min-width:1181px){ .masthead-cover__meta .edition-launch{ flex-direction:column!important; align-items:flex-start!important; } .masthead-cover__meta .edition-launch__actions{ justify-items:start!important; text-align:left!important; min-width:0!important; max-width:100%!important; } } /* ========================================================================== DRAFT 04.46 — MASTHEAD ALIGNMENT + SHARED PUBLICATION NAV (2026-09-11) Launch-safe additive overrides only. ========================================================================== */ @media(min-width:900px){ .masthead-cover__title{ width:fit-content!important; display:flex!important; flex-direction:column!important; align-items:stretch!important; } .masthead-cover__edition-title{ align-self:flex-end; width:min(22em,100%); max-width:22em; text-align:right; } .masthead-cover__edition-title::before{ content:""; display:block; width:30%; height:1px; margin:0 0 clamp(7px,1vw,12px) auto; background:rgba(243,238,228,.50); } } .nav-radio,.room-nav__links a{min-height:44px} /* ========================================================================== DRAFT 04.47 — SHARED HEADER VISUAL ALIGNMENT (2026-09-11) Group publication + Editions on the left; Listening + FASCIA on the right; give the publisher mark a deliberate separation. Listening keeps its room-nav architecture for launch stability and receives visual compatibility only. ========================================================================== */ .amsp-nav__menus{ grid-column:2;grid-row:1;min-width:0;width:max-content;max-width:100%; display:flex;align-items:center;justify-self:start;gap:clamp(9px,1.15vw,16px) } .amsp-nav__menus>.amsp-title-menu{flex:0 1 auto;min-width:0} .amsp-nav__menus>.amsp-title-menu:first-child summary{max-width:min(32vw,300px)} .amsp-nav__menus>.amsp-title-menu--editions{flex:0 0 auto} .amsp-nav__in, .amsp-nav--edition-home .amsp-nav__in, .fascia-page .amsp-nav__in{ grid-template-columns:auto minmax(0,1fr) auto auto!important; column-gap:clamp(9px,1.2vw,16px)!important } .amsp-nav__lemon{grid-column:1;grid-row:1} .amsp-nav__links{grid-column:3!important;grid-row:1;display:flex;justify-self:end;gap:7px!important} .amsp-nav__in>.nav-publisher-mark{grid-column:4!important;grid-row:1;margin-left:clamp(16px,2.6vw,42px)} .room-nav__in>.nav-publisher-mark{margin-left:clamp(16px,2.6vw,42px)} @media(max-width:760px){ .amsp-nav__in,.amsp-nav--edition-home .amsp-nav__in,.fascia-page .amsp-nav__in{ grid-template-columns:auto minmax(0,1fr) auto!important; column-gap:8px!important } .amsp-nav__links{display:none!important} .amsp-nav__in>.nav-publisher-mark{grid-column:3!important;margin-left:10px} .room-nav__in>.nav-publisher-mark{margin-left:10px} .amsp-nav__menus{gap:8px;min-width:0} .amsp-nav__menus>.amsp-title-menu:first-child{min-width:0;max-width:100%} .amsp-nav__menus>.amsp-title-menu:first-child summary{max-width:42vw} } @media(max-width:470px){ .amsp-nav__menus>.amsp-title-menu--editions{display:none} .amsp-nav__menus>.amsp-title-menu:first-child summary{max-width:none} } /* ========================================================================== DRAFT 04.48 — LAUNCH CORRECTION PASS (2026-09-11) Subtractive pass: make the controls unmistakable, make the reading effortless, keep the strange parts. The obsolete STACK USED HERE tool field, its role table and its payment-infrastructure note are deleted from this stylesheet rather than overridden; the Working Record below replaces them with a quiet ledger. Continuum spacing and the sweep geometry were corrected at source in the 04.38 / 04.45 layers above, not re-declared here. ========================================================================== */ /* --- 1. SHARED EXPAND / COLLAPSE GRAMMAR -------------------------------- One control language for every disclosure on the site: a hairline square, a large glyph, + closed / − open, and the whole summary row as the target. The summary elements are already ≥44px, so the glyph only has to be seen. */ .continuum-card__summary::after{ display:grid; place-items:center; right:10px; top:10px; width:36px; height:36px; border:1px solid currentColor; font:600 24px/1 var(--mono); opacity:1; } .continuum-card__summary{padding-right:60px} .continuum-card:hover .continuum-card__summary::after, .continuum-card__summary:focus-visible::after, .continuum-card[open] .continuum-card__summary::after{opacity:1} .continuum-card__summary:focus-visible{outline:3px solid currentColor;outline-offset:-4px} .workbench__summary::after{ display:grid; place-items:center; width:44px; height:44px; border:1px solid currentColor; font-size:26px; color:var(--ink); } .workbench__summary{column-gap:22px} .find-things__summary{font-size:11px;opacity:.92;gap:10px} .find-things__summary::after{ content:"+"; display:inline-grid; place-items:center; width:26px; height:26px; border:1px solid currentColor; font-size:17px; line-height:1; white-space:normal; } .find-things[open]>.find-things__summary::after{content:"\2212"} /* --- 2. MASTHEAD / EDITION COVER ---------------------------------------- */ /* The Edition subtitle is framed by two quiet rules at roughly its own width. Replaces the single 04.46 ::before hairline. */ .masthead-cover__edition-title{ border-top:1px solid rgba(243,238,228,.42); border-bottom:1px solid rgba(243,238,228,.42); padding:clamp(11px,1.3vw,18px) 0; max-width:min(22em,100%); } @media(min-width:900px){ .masthead-cover__edition-title::before{content:none;display:none} .masthead-cover__edition-title{ width:min(23em,100%); max-width:23em; } /* Desktop drops the utility meta line; mobile keeps it, where it reads well. */ .masthead-cover__meta .masthead__meta{display:none} } @media(min-width:900px) and (max-width:1180px){ /* Keep the 04.45c containment: the framed subtitle must not run under the flower composition in the mid-desktop range, and keep the two new rules from adding height where the cover field is shortest. */ .masthead-cover__edition-title{ max-width:min(23em,58%); padding:clamp(9px,1.05vw,13px) 0; margin-top:clamp(9px,1.1vw,16px); } } /* HOW TO FIND THINGS reads as an invitation, not as metadata. */ .find-things--mast .find-things__summary{ min-height:44px; font-size:clamp(12px,1.2vw,14px); letter-spacing:.1em; opacity:1; } @media(max-width:520px){ .find-things--mast .find-things__summary{font-size:12px} } /* --- 3. CONTINUUM ------------------------------------------------------- */ /* The scanning lemon now sits directly above the word it is scanning. */ .continuum__sweep{max-width:min(520px,72%)} @media(max-width:819.98px){ .continuum__sweep{max-width:100%} } /* A little more suspension in the cards: restrained lift, staggered drift. */ .continuum-card{transition:box-shadow .22s ease,transform .22s ease} @media(prefers-reduced-motion:no-preference){ .continuum-card{box-shadow:0 6px 18px rgba(10,10,10,.07)} .continuum-card:hover{box-shadow:0 12px 26px rgba(10,10,10,.12)} } @media(prefers-reduced-motion:reduce){ .continuum-card{transition:none;box-shadow:none} } /* --- 4. WORKING RECORD — EDITION 001 ----------------------------------- A ledger, not a stack diagram: what was done on the left, what did it on the right. One hairline, no cards, no pills, no logos. */ .working-record{ margin-top:clamp(26px,3vw,40px); padding-top:clamp(16px,2vw,24px); border-top:1px solid var(--line); max-width:44em; } .working-record__title{ margin:0 0 clamp(14px,1.8vw,22px); font:600 11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); } .working-record__list{margin:0;display:grid;gap:clamp(12px,1.5vw,17px)} .working-record__row{display:grid;grid-template-columns:minmax(0,30%) minmax(0,70%);column-gap:clamp(16px,2.4vw,34px)} .working-record dt{ font-family:var(--body); font-size:12px; line-height:1.45; letter-spacing:.02em; color:var(--ink); } .working-record dd{ margin:0; font-family:var(--display); font-size:13px; line-height:1.5; color:var(--muted-deep); } @media(max-width:620px){ .working-record__row{grid-template-columns:1fr;row-gap:4px} .working-record__list{gap:20px} } /* --- 5. PHILADELPHIA ORIGIN PLATES ------------------------------------- Editorial interruptions inside the running text, not a portfolio grid. Aspect ratios are carried by the intrinsic width/height attributes. */ .origin-plate{margin:clamp(22px,3vw,36px) 0;max-width:520px} .origin-plate img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff} .origin-plate figcaption{ margin-top:9px; font-family:var(--mono); font-size:9px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-deep); } .origin-plate--open{max-width:600px} /* The verified Jordan photograph is an anchor, not a thumbnail: its own vertical space, its own width, intrinsic aspect ratio carried by the width/height attributes. */ .origin-plate--anchor{ max-width:min(620px,100%); margin:clamp(30px,4vw,52px) 0; } .origin-sequence{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.8vw,20px); margin:clamp(24px,3.2vw,40px) 0; } .origin-sequence .origin-plate{margin:0;max-width:none} .origin-sequence__caption{ grid-column:1 / -1; font-family:var(--mono); font-size:9px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-deep); } @media(max-width:620px){ .origin-plate--anchor{margin:26px 0} .continuum-card__summary{padding-right:48px} .continuum-card__summary::after{width:30px;height:30px;right:8px;top:8px;font-size:20px} .origin-sequence{grid-template-columns:1fr} } /* --- 6. LISTENING — EDITION / ROOM PAIRING + READER SUPPORT ------------- */ .pairing{ display:flex; align-items:center; gap:9px; margin:0 0 7px; font:600 10px/1.3 var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--ink); } .pairing__link{ flex:0 0 auto; font-size:13px; letter-spacing:.24em; color:var(--muted-deep); } .pairing__note{max-width:26em;margin:0} .reader-support-line{ margin:0; padding:0 0 clamp(26px,4vw,44px); text-align:center; } .reader-support-line a{ font:500 9.5px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-deep); text-underline-offset:3px; } .reader-support-line a:hover,.reader-support-line a:focus-visible{color:var(--ink)} /* ========================================================================== DRAFT 04.51 — FINAL CONNECTION + CORRECTION PASS (2026-09-12) Keep 04.50 intact while repairing the Continuum scan, the four-card title fit, the mobile masthead subtitle alignment and the direct FASCIA seam. ========================================================================== */ /* The subtitle already owns its two quiet rules. The desktop layer aligned the text right; this supplies the same editorial alignment below 900px. */ .masthead-cover__edition-title{text-align:right} /* The lemon and word share one measured stage. Moving the sweep container — not the image — keeps the image's aspect ratio stable and lets percentage travel resolve against the actual wordmark width. */ .continuum__title-stage{ --lemon-w:clamp(26px,3.2vw,44px); position:relative; grid-column:2; grid-row:1 / span 2; width:fit-content; max-width:100%; } .continuum__sweep{ position:absolute; left:0; top:calc(var(--lemon-w) * -.4); width:var(--lemon-w); height:auto; max-width:none; margin:0; overflow:visible; z-index:2; pointer-events:none; } .continuum__sweep img{ position:static; display:block; width:100%; height:auto; translate:none; transform:none; filter:drop-shadow(0 1px 2px rgba(10,10,10,.34)); } .continuum[data-continuum-skin="yellow"] .continuum__sweep img{ filter:brightness(.78) contrast(1.16) drop-shadow(0 1px 2px rgba(10,10,10,.42)); } @media(max-width:819.98px){ .continuum__title-stage{ grid-column:auto; grid-row:auto; width:fit-content; margin:10px 0 18px; } .continuum__head .continuum__title-stage h2{margin:0!important} } @media(prefers-reduced-motion:reduce){ .continuum__sweep{left:auto;right:2%;animation:none!important} } /* The glyph only overlaps the meta line. Returning the title area to the card width prevents forced word breaks while keeping the four-column system. */ @media(min-width:820px){ .continuum-card__summary{padding-right:18px} .continuum-card__summary .continuum__meta{padding-right:46px} .continuum__grid[data-continuum-count="4"] .continuum__title{ font-size:clamp(19px,1.9vw,27px); hyphens:none; overflow-wrap:normal; word-break:normal; } /* 04.51b: the same guard for the five-card state. The size clamp stays the one already authored for count="5" above; only hyphenation is suppressed. */ .continuum__grid[data-continuum-count="5"] .continuum__title{ hyphens:none; overflow-wrap:normal; word-break:normal; } } /* A direct working-material seam, subordinate to the authored Edition. */ .working-record__seam{margin:clamp(14px,1.8vw,20px) 0 0} .working-record__seam a{ display:inline-flex; align-items:center; min-height:44px; font:600 9.5px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-deep); text-underline-offset:3px; } .working-record__seam a:hover,.working-record__seam a:focus-visible{color:var(--ink)} /* --- 04.52 · PHILADELPHIA ORIGIN / EDITION 001 --------------------------- Namespaced editorial layout for Lemon Juice Practice · Part 1. Static opener + reader-operated nine-frame studio sequence. */ .amsp-phl{display:grid;gap:clamp(34px,5vw,72px)} .amsp-phl__intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(280px,.72fr);gap:clamp(28px,6vw,96px);align-items:end} .amsp-phl__intro .eyebrow,.amsp-phl__intro h2{grid-column:1} .amsp-phl__intro h2{margin:.14em 0 0;max-width:11ch} .amsp-phl__intro .lede{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:31em;margin:0} .amsp-phl__opener{display:grid;gap:clamp(22px,3vw,42px)} .amsp-phl__chapter{margin:0;font:600 10px/1.35 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted-deep)} .amsp-phl__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vw,34px)} .amsp-phl__artifact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.8vw,24px);align-items:start} .amsp-phl__plate,.amsp-phl__hero,.amsp-phl__amrita,.amsp-phl__later-self{margin:0} .amsp-phl__plate img,.amsp-phl__hero img,.amsp-phl__amrita img,.amsp-phl__later-self img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff} .amsp-phl__plate figcaption,.amsp-phl__hero figcaption,.amsp-phl__amrita figcaption,.amsp-phl__later-self figcaption{ margin-top:9px;font:400 9px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-deep) } .amsp-phl__hero{max-width:min(100%,980px)} .amsp-phl__hero img{max-height:82vh;object-fit:contain;object-position:left center;background:transparent;border:0} .amsp-phl__essay{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:clamp(34px,6vw,88px);align-items:start} .amsp-phl__essay-copy{max-width:46em} .amsp-phl__amrita{align-self:start} .amsp-phl__jordan{margin-left:clamp(0px,9vw,140px)} .amsp-phl__archive-pair{max-width:980px} .amsp-phl__breath{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(300px,.7fr);gap:clamp(32px,7vw,110px);align-items:start;padding-block:clamp(16px,2vw,30px)} .amsp-phl__breath-copy{max-width:35em;padding-top:clamp(0px,3vw,46px)} .amsp-phl__later-self{max-width:520px;justify-self:end} .amsp-phl-flipbook{display:grid;grid-template-columns:minmax(0,760px) minmax(240px,1fr);column-gap:clamp(30px,6vw,90px);row-gap:18px;align-items:start;margin-top:clamp(8px,2vw,24px);outline:none} .amsp-phl-flipbook__head{grid-column:2;grid-row:1 / span 3;position:sticky;top:86px;max-width:32em} .amsp-phl-flipbook__head h3{margin:.25em 0 .7em;font-family:var(--display);font-size:clamp(30px,3.5vw,52px);line-height:1.02;font-weight:400} .amsp-phl-flipbook__stage{grid-column:1;grid-row:1;margin:0} .amsp-phl-flipbook__image{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;background:#fff;border:1px solid var(--line);touch-action:pan-y;user-select:none;-webkit-user-drag:none} .amsp-phl-flipbook__meta{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font:500 9px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-deep)} .amsp-phl-flipbook__controls{grid-column:1;display:flex;justify-content:space-between;gap:12px} .amsp-phl-flipbook__nav,.amsp-phl-flipbook__index button{ appearance:none;border:1px solid var(--ink);background:transparent;color:var(--ink);font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer } .amsp-phl-flipbook__nav{min-height:42px;padding:11px 14px} .amsp-phl-flipbook__index{grid-column:1;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px} .amsp-phl-flipbook__index button{min-height:38px;padding:8px 4px} .amsp-phl-flipbook__index button[aria-pressed="true"]{background:var(--ink);color:var(--paper)} .amsp-phl-flipbook__nav:hover,.amsp-phl-flipbook__index button:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)} .amsp-phl-flipbook__nav:focus-visible,.amsp-phl-flipbook__index button:focus-visible,.amsp-phl-flipbook:focus-visible{outline:2px solid currentColor;outline-offset:3px} @media(max-width:860px){ .amsp-phl__intro{grid-template-columns:1fr;gap:18px} .amsp-phl__intro .eyebrow,.amsp-phl__intro h2,.amsp-phl__intro .lede{grid-column:1;grid-row:auto} .amsp-phl__artifact-grid{grid-template-columns:1fr 1fr} .amsp-phl__plate--artifact{grid-column:1 / -1;max-width:520px} .amsp-phl__essay{grid-template-columns:1fr} .amsp-phl__amrita{max-width:620px} .amsp-phl__jordan{margin-left:0} .amsp-phl__breath{grid-template-columns:1fr 1fr} .amsp-phl-flipbook{grid-template-columns:1fr;row-gap:14px} .amsp-phl-flipbook__head{grid-column:1;grid-row:auto;position:static;max-width:44em} .amsp-phl-flipbook__stage,.amsp-phl-flipbook__controls,.amsp-phl-flipbook__index{grid-column:1} } @media(max-width:620px){ .amsp-phl{gap:38px} .amsp-phl__intro h2{max-width:9ch} .amsp-phl__pair,.amsp-phl__artifact-grid,.amsp-phl__breath{grid-template-columns:1fr} .amsp-phl__plate--artifact{grid-column:auto} .amsp-phl__hero img{max-height:none;width:100%;object-fit:contain} .amsp-phl__later-self{justify-self:start;max-width:none} .amsp-phl-flipbook__meta{flex-direction:column;gap:3px} .amsp-phl-flipbook__controls{position:relative} .amsp-phl-flipbook__nav{min-width:44%;min-height:46px} .amsp-phl-flipbook__index{grid-template-columns:repeat(5,minmax(0,1fr))} .amsp-phl-flipbook__index button{min-height:44px} } @media(prefers-reduced-motion:reduce){ .amsp-phl-flipbook__image,.amsp-phl-flipbook__nav,.amsp-phl-flipbook__index button{transition:none!important;animation:none!important} } /* ========================================================================== 04.53 · CLEANUP LAYER — Continuum weight + Edition 001 opening Appended so it lands after the skin layer (3361+), the card layer (4087+) and the shared glyph grammar (4665+). Nothing above is re-authored, and the shared --continuum-hover-* tokens are deliberately left alone: the open state is corrected on its own selector only. ========================================================================== */ /* 1 · OPEN STATE — a held card, not an inverted panel. Hover on all five cards is unchanged; only [open] stops flooding. */ .continuum-card[open]{ background:transparent!important; color:var(--continuum-fg)!important; box-shadow:none!important; } .continuum-card[open] .continuum-card__summary{background:var(--continuum-pending-bg)} .continuum-card[open]:hover{ background:var(--continuum-hover-bg)!important; color:var(--continuum-hover-fg)!important; } @media(hover:none){ .continuum-card[open]:hover{background:transparent!important;color:var(--continuum-fg)!important} } /* 2 · EXPANDED BODY — less bulk, same information. */ .continuum-card__more{ padding:12px 18px 15px; font-size:11.5px; line-height:1.45; } .continuum-card__more p{margin:0 0 8px;max-width:34em} .continuum-card__more p:last-of-type{margin-bottom:10px} @media(max-width:819.98px){ .continuum-card__more{padding:12px 14px} } /* 3 · CREDITS — two separate claims, quieter labels. The blocks stay as two paragraphs; only the label voice changes. */ .continuum-card__more--credits p+p{margin-top:2px} .continuum-credit{display:block} .continuum-credit__label{ display:block; font:600 8.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; opacity:.72; margin-bottom:2px; } .continuum-credit__body{display:block;line-height:1.38} /* 4 · DESCRIPTIONS — no orphan tail on the Atlas card. */ .continuum__description{text-wrap:pretty} /* 5 · GLYPH — one target box at every width, and the meta line always clears it (the ≤620 rail previously relied on summary padding alone). */ @media(max-width:620px){ .continuum-card__summary .continuum__meta{padding-right:40px} } /* 6 · EDITION 001 OPENING — welcome and current note. Orientation weight: above the lead it is a greeting, below the intro it is a standing note. */ .statement-compact .intro-letter .intro-letter__welcome{ margin:0 0 14px; font:600 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-deep); } .statement-compact .intro-letter .intro-letter__current{ margin-top:1.6em!important; padding-top:14px; border-top:1px solid var(--line); font:500 11px/1.5 var(--mono)!important; letter-spacing:.045em; color:var(--muted-deep); max-width:34em; } @media(max-width:620px){ .statement-compact .intro-letter .intro-letter__current{font-size:11px!important;line-height:1.6} } /* ========================================================================== DRAFT 04.54 — COUNTDOWN + SKIN-PICKER REMOVAL (2026-09-12) Two small corrections, both consequences of removing an element from a row that was laid out for two children. ========================================================================== */ /* `.edition-launch` was `justify-content:space-between` with the clock on the left and the actions on the right. With the clock gone the actions cluster is the only flex child and would sit left while its own `justify-items:end` kept its text right-aligned. Pin it to the end instead. The 900–1180px band already switches to a column, so it is unaffected. */ .masthead-cover__meta .edition-launch{justify-content:flex-end!important} /* The utilities row carried the eyebrow and the skin picker. With the picker gone the authored bottom margin reads as slack on the narrow rail. */ @media(max-width:520px){ .continuum__utilities{margin-bottom:12px!important} } /* 04.59 — PMA / Philadelphia documentary constellation */ .amsp-pma{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:clamp(28px,5vw,72px);align-items:start;padding-block:clamp(12px,2vw,28px);border-top:1px solid var(--line)} .amsp-pma__head{position:sticky;top:86px;max-width:31em} .amsp-pma__head h3{margin:.22em 0 .65em;font-family:var(--display);font-size:clamp(32px,4.2vw,62px);line-height:.98;font-weight:400} .amsp-pma__head .small{max-width:30em} .amsp-pma__constellation{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.5vw,20px);align-items:start} .amsp-pma__frame{margin:0;min-width:0} .amsp-pma__frame img{display:block;width:100%;height:auto;background:#111;border:1px solid var(--line)} .amsp-pma__frame figcaption{margin-top:8px;font:500 9px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted-deep)} .amsp-pma__frame--wide{grid-column:1 / span 8} .amsp-pma__frame--tall{grid-column:9 / -1;margin-top:clamp(28px,6vw,90px)} .amsp-pma__frame--detail{grid-column:2 / span 6;margin-top:clamp(4px,2vw,26px)} .amsp-pma__frame--poster{grid-column:8 / span 5;margin-top:clamp(22px,5vw,70px)} .amsp-pma__note{grid-column:2;margin:0;max-width:42em;font:500 10px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted-deep)} @media(max-width:900px){ .amsp-pma{grid-template-columns:1fr;gap:24px} .amsp-pma__head{position:static;max-width:44em} .amsp-pma__note{grid-column:1} } @media(max-width:700px){ .amsp-pma__constellation{display:grid;grid-template-columns:1fr;gap:18px} .amsp-pma__frame--wide,.amsp-pma__frame--tall,.amsp-pma__frame--detail,.amsp-pma__frame--poster{grid-column:1;margin-top:0} .amsp-pma__frame figcaption{font-size:8px} } /* 04.62 — Philadelphia provisional writing scaffold for Figma/image selection. These blocks are layout copy, not final authored text. */ .amsp-phl__layout-copy{max-width:58rem;margin:clamp(34px,6vw,84px) auto;padding:clamp(18px,2.5vw,30px) 0;border-top:1px solid var(--line)} .amsp-phl__layout-copy p:not(.eyebrow){max-width:44rem;font-size:clamp(18px,1.6vw,23px);line-height:1.55} .amsp-phl__layout-copy .eyebrow{margin-bottom:14px;color:var(--muted-deep)} .amsp-phl__layout-copy--nested{margin:28px 0 0;padding-top:20px} .amsp-phl__layout-copy--nested p:not(.eyebrow){font-size:inherit;line-height:inherit} .amsp-phl__layout-copy--wide{max-width:70rem;margin-top:clamp(50px,8vw,110px)} @media(max-width:700px){ .amsp-phl__layout-copy{margin-block:34px;padding-top:16px} .amsp-phl__layout-copy p:not(.eyebrow){font-size:18px} } /* ========================================================================== 04.64 — SMALL FIXES. Appended; nothing above is re-authored. ========================================================================== */ /* PMA credit follows the photographs it credits on the two-column layout, then returns to the single column at <=900px. */ .amsp-pma__credit{grid-column:2;margin:6px 0 0;max-width:42em} @media(max-width:900px){ .amsp-pma__credit{grid-column:1} } /* Contain long Continuum credits without changing the established type/grid. */ .continuum-card__more, .continuum-credit__body{overflow-wrap:break-word} /* Three-part Lemon Juice orientation. */ .amsp-phl__parts{max-width:58rem;padding-top:clamp(14px,2vw,22px);border-top:1px solid var(--line)} .amsp-phl__parts-note, .amsp-phl__parts-hinge{margin:0;font:500 10px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted-deep)} .amsp-phl__parts-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,28px);margin:14px 0;padding:0;list-style:none} .amsp-phl__parts-list li{min-width:0;color:var(--muted-deep)} .amsp-phl__parts-list li[aria-current]{color:var(--ink)} .amsp-phl__parts-no{display:block;font:600 10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase} .amsp-phl__parts-span{display:block;margin-top:3px;font:400 10px/1.4 var(--mono);letter-spacing:.08em;opacity:.82} .amsp-phl__parts-name{display:block;margin-top:5px;font:400 12.5px/1.4 var(--body);text-wrap:pretty} @media(max-width:620px){ .amsp-phl__parts-list{grid-template-columns:1fr;gap:9px;margin:12px 0} .amsp-phl__parts-name{margin-top:2px} } /* 04.64b — mobile: each history part reads as one compact row. Desktop remains unchanged; semantic ol + aria-current stay intact. */ @media(max-width:620px){ .amsp-phl__parts-list li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; } .amsp-phl__parts-no, .amsp-phl__parts-span, .amsp-phl__parts-name{margin-top:0} .amsp-phl__parts-span::before, .amsp-phl__parts-name::before{content:"·";margin-right:6px;opacity:.55} .amsp-phl__parts-name{font-size:12px} } /* ========================================================================== 04.64c — CONTENTS ATMOSPHERE (static handoff, opt-in) The locked base gains a local stacking context and nothing else. The field stays pure --ink through the head and the first three rows, then warms toward --paper (#EBE7DC, the background of #edition below) so the seam reads as a tonal cut instead of two unrelated fields. Tone source is --paper only. No new palette value is introduced. z-index:-1 is unusable here: body::before (styles.css:84) occupies -1 in the root stacking context, and .edition-contents' own black background would paint over a negative-z layer. Hence isolation + positive stack. Peak (.15) lands in the empty bottom padding. Worst text position is row 05 at ~90%: white 13.0:1, yellow 12.0:1. Both clear AAA. ========================================================================== */ .edition-contents{position:relative;isolation:isolate} .edition-contents > .wrap{position:relative;z-index:1} .edition-contents--atmosphere-gradient::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(to bottom, rgba(235,231,220,0) 0%, rgba(235,231,220,0) 46%, rgba(235,231,220,.02) 62%, rgba(235,231,220,.055) 78%, rgba(235,231,220,.10) 90%, rgba(235,231,220,.15) 100%); } /* ========================================================================== 04.64d — PREFLIGHT-LOCKED MICRO-PATCH True-black Contents field; Edition orientation; Continuum state labels; unresolved FASCIA pronunciation controls. All rules remain local. ========================================================================== */ /* Overrides only the section background-color. The global --ink token and the existing gradient handoff pseudo-element remain unchanged. */ .edition-contents--true-black{background-color:#000} .edition-orientation{display:grid;gap:0;margin:clamp(22px,3vw,34px) 0;padding:0;border-top:1px solid var(--line)} .edition-orientation>div{display:grid;grid-template-columns:minmax(110px,.34fr) 1fr;gap:18px;padding:11px 0;border-bottom:1px solid var(--line)} .edition-orientation dt{font:600 9px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted-deep)} .edition-orientation dd{margin:0;font:500 13px/1.45 var(--body);color:var(--ink)} .continuum__groups{display:grid;grid-template-columns:3fr 2fr;border-bottom:1px solid var(--continuum-line)} .continuum__groups h3{margin:0;padding:0 14px 10px;font:600 9px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--continuum-fg)} .continuum__groups h3+ h3{border-left:1px solid var(--continuum-line)} .continuum-card__group{display:none} .fascia-pronunciation{margin:clamp(22px,3vw,36px) 0;padding:clamp(18px,2.4vw,28px) 0;border-block:1px solid rgba(235,231,220,.32)} .fascia-pronunciation__eyebrow{margin:0 0 9px;font:600 9px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#F0E20F} .fascia-pronunciation h2{max-width:24ch;margin:0 0 8px;font:400 clamp(20px,2.4vw,30px)/1.12 var(--display);color:#EBE7DC} .fascia-pronunciation>p:not(.fascia-pronunciation__eyebrow){max-width:48ch;margin:0;color:rgba(235,231,220,.76);font:450 13px/1.5 var(--body)} .fascia-pronunciation__controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px} .fascia-pronunciation__controls button{display:grid;gap:5px;min-height:70px;padding:14px;border:1px solid rgba(235,231,220,.32);background:transparent;color:#EBE7DC;text-align:left;font:600 9px/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase;opacity:.64} .fascia-pronunciation__controls button small{font:400 8px/1.35 var(--mono);letter-spacing:.07em;color:rgba(235,231,220,.7)} @media(max-width:620px){ .edition-orientation>div{grid-template-columns:1fr;gap:3px} .continuum__groups{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .continuum-card__group{display:block;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--continuum-line);font:600 8px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:inherit} .fascia-pronunciation__controls{grid-template-columns:1fr} } /* ========================================================================== 04.64g — Explore Inside: permanent arrow cues + one-time sequential chime Local to .edition-contents. The true-black field, the gradient handoff, the typography, the rows, the destinations and the information architecture are all unchanged. ========================================================================== */ /* Every row is a jump link, so every row says so. Previously only the Listening Room row carried an arrow, which made the other four read as labels rather than destinations. The arrow sits in its own column, right-aligned, so it cannot reflow the copy when a title wraps. */ .edition-contents__item { grid-template-columns: 190px 1px minmax(0, 1fr) auto; } .edition-contents__item::after { content: "→"; grid-column: 4; grid-row: 1; align-self: center; padding-left: 18px; font-family: var(--mono); font-size: clamp(15px, 1.4vw, 19px); line-height: 1; color: var(--signal); opacity: .72; transition: opacity .18s ease; } .edition-contents__item:hover::after, .edition-contents__item:focus-visible::after { opacity: 1; } /* The Listening Room row had its arrow baked into the copy. Now that every row has one, that would render two. */ .edition-contents__item--door .edition-contents__copy strong::after { content: ""; } @media (max-width: 760px) { .edition-contents__item { grid-template-columns: 88px 1px minmax(0, 1fr) auto; } .edition-contents__item::after { padding-left: 10px; } } /* --- the chime ------------------------------------------------------------ Colour and rule illumination only: the row's yellow vertical rule brightens and widens its glow, the number and title lift toward full signal. No transform, no margin, no position change, nothing that alters where the link is while a reader is moving toward it. The transition lives on the resting state so both the rise and the fall are eased. ~300ms per row; the 100ms stagger is in the script. */ .edition-contents__item, .edition-contents__item::before, .edition-contents__no, .edition-contents__copy strong { transition: background-color .3s ease, box-shadow .3s ease, color .3s ease; } .edition-contents__item.is-chiming { background: rgba(240, 226, 15, .05); } .edition-contents__item.is-chiming::before { box-shadow: 0 0 10px 1px rgba(240, 226, 15, .55); } .edition-contents__item.is-chiming .edition-contents__no { color: #fff4a3; } .edition-contents__item.is-chiming .edition-contents__copy strong { color: #fff4a3; } /* Belt and braces: the script already returns early under reduced motion, but if the class ever arrives by another route it must still do nothing. */ @media (prefers-reduced-motion: reduce) { .edition-contents__item, .edition-contents__item::before, .edition-contents__item::after, .edition-contents__no, .edition-contents__copy strong { transition: none; } .edition-contents__item.is-chiming, .edition-contents__item.is-chiming::before, .edition-contents__item.is-chiming .edition-contents__no, .edition-contents__item.is-chiming .edition-contents__copy strong { background: none; box-shadow: none; color: inherit; } .edition-contents__item.is-chiming .edition-contents__no, .edition-contents__item.is-chiming .edition-contents__copy strong { color: var(--signal); } } /* =========================================================================== 04.64h — EDITION 001 INTRO SYSTEM Large-type intro, secondary source button, ten-question interview, and the reused Framing Your Practice current-action card. Appended, not merged. Every selector below is new at 04.64h and namespaced under .amsp-intro / .amsp-source-btn / .amsp-qa, so nothing above this line changes behaviour. No JavaScript is involved: the interview is native
/ and works with scripting disabled. ======================================================================== */ .amsp-intro .wrap{max-width:min(100%,var(--max))} /* --- large-type intro ---------------------------------------------------- */ .amsp-intro__opening{max-width:20em} .amsp-intro__statement{ font-family:var(--display); font-weight:700; font-size:clamp(31px,5.4vw,62px); line-height:1.1; letter-spacing:-.018em; margin:0 0 clamp(26px,3.4vw,40px); text-wrap:balance; } .amsp-intro__body{max-width:33em} .amsp-intro__body p{ font-family:var(--body); font-weight:400; font-size:clamp(17px,1.5vw,21px); line-height:1.58; margin:0 0 clamp(16px,1.6vw,22px); } .amsp-intro__body p:last-child{margin-bottom:0} /* The closing three lines of the intro are short by design. Give the last one a little more presence without turning it into a second headline. */ .amsp-intro__body p:last-child{ font-weight:500; font-size:clamp(18px,1.7vw,23px); } /* --- secondary source button --------------------------------------------- */ /* Deliberately quiet: a source note, not a call to action. Thin border, mono label, no motion of any kind. */ .amsp-intro__source{margin:clamp(26px,3vw,36px) 0 0} .amsp-source-btn{ display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:3px; background:transparent; color:var(--ink); font-family:var(--mono); font-size:11px; font-weight:400; line-height:1.35; letter-spacing:.085em; text-transform:uppercase; text-decoration:none; /* "Do not animate it." No transition, no transform, no hover movement. */ transition:none; } .amsp-source-btn__mark{flex:0 0 auto;display:block} .amsp-source-btn__label{min-width:0} .amsp-source-btn__arrow{flex:0 0 auto;margin-left:2px} .amsp-source-btn:hover{ border-color:var(--ink); background:var(--ink); color:var(--warm-white); } /* Clear, self-contained focus state. The global :focus-visible rule already fires; this keeps the fill legible underneath it. */ .amsp-source-btn:focus-visible{ border-color:var(--ink); background:var(--ink); color:var(--signal); } @media(prefers-reduced-motion:reduce){ .amsp-source-btn{transition:none!important} } /* --- interview / accordion ----------------------------------------------- */ /* Visually separate from the intro above it: a full rule and a large gap, so the two systems never read as one continuous statement. */ .amsp-intro__interview{ margin:clamp(54px,7vw,92px) 0 0; border-top:2px solid var(--ink); } .amsp-qa{border-bottom:1px solid var(--line)} .amsp-qa__summary{ display:flex; align-items:baseline; justify-content:space-between; gap:clamp(16px,2.4vw,32px); padding:clamp(22px,2.6vw,30px) 0; min-height:44px; cursor:pointer; list-style:none; } .amsp-qa__summary::-webkit-details-marker{display:none} .amsp-qa__q{ font-family:var(--display); font-weight:700; font-size:clamp(20px,2.3vw,29px); line-height:1.22; letter-spacing:-.012em; min-width:0; } /* Open/close mark drawn in CSS rather than set as a glyph, so it cannot fall back to a system font. Static: it changes state, it does not animate. */ .amsp-qa__mark{ position:relative; flex:0 0 auto; width:16px; height:16px; align-self:center; transition:none; } .amsp-qa__mark::before, .amsp-qa__mark::after{ content:""; position:absolute; left:50%; top:50%; background:var(--ink); transform:translate(-50%,-50%); } .amsp-qa__mark::before{width:16px;height:2px} .amsp-qa__mark::after{width:2px;height:16px} .amsp-qa[open] .amsp-qa__mark::after{display:none} .amsp-qa__summary:hover .amsp-qa__q{color:var(--muted-deep)} .amsp-qa__summary:focus-visible{outline-offset:-2px} .amsp-qa__a{ max-width:33em; padding:0 0 clamp(26px,3vw,36px); } .amsp-qa__a p{ font-family:var(--body); font-weight:400; font-size:clamp(16px,1.35vw,19px); line-height:1.62; margin:0 0 clamp(14px,1.4vw,19px); } .amsp-qa__a p:last-child{margin-bottom:0} /* --- current action card -------------------------------------------------- */ /* Reused Framing Your Practice card. Same facts and same destination as the Continuum entry; this is a second placement, not a second claim. */ .amsp-intro__now{ margin:clamp(44px,5.4vw,72px) 0 0; padding:clamp(24px,3vw,34px); max-width:34em; border:2px solid var(--ink); background:var(--warm-white); box-shadow:6px 6px 0 var(--ink); } .amsp-intro__now .eyebrow{margin-bottom:10px} .amsp-intro__now-title{ font-size:clamp(25px,3vw,36px); line-height:1.14; margin:0 0 6px; } .amsp-intro__now-desc{ font-family:var(--body); font-weight:600; font-size:clamp(15px,1.3vw,17px); line-height:1.4; margin:0 0 14px; } .amsp-intro__now-body{ font-family:var(--body); font-size:clamp(15px,1.3vw,17px); line-height:1.55; margin:0 0 18px; } .amsp-intro__now-cta{ display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink); border-bottom:2px solid var(--signal); padding-bottom:2px; text-decoration:none; } .amsp-intro__now-cta:hover, .amsp-intro__now-cta:focus-visible{border-bottom-color:var(--ink)} /* --- responsive ----------------------------------------------------------- */ /* Boundary reuses the existing 819.98 / 820 split rather than adding a new one. */ @media(max-width:819.98px){ .amsp-intro__opening{max-width:none} .amsp-intro__statement{font-size:clamp(29px,6.6vw,44px)} .amsp-intro__body, .amsp-qa__a, .amsp-intro__now{max-width:none} /* Generous vertical rhythm on mobile: the ten questions must not read as one dense block. */ .amsp-qa__summary{padding:26px 0} .amsp-qa__a{padding-bottom:30px} .amsp-intro__interview{margin-top:52px} } @media(max-width:620px){ .amsp-qa__summary{gap:14px;padding:24px 0} .amsp-qa__q{font-size:clamp(19px,4.6vw,24px)} .amsp-qa__a p{font-size:16px;line-height:1.65} .amsp-source-btn{font-size:10px;letter-spacing:.07em;gap:8px;padding:12px} .amsp-intro__now{box-shadow:4px 4px 0 var(--ink)} } @media(max-width:520px){ .amsp-intro__statement{font-size:clamp(27px,7.4vw,34px)} /* Wrap rather than squeeze: the mono label keeps its size and the mark stays on the first line. */ .amsp-source-btn{align-items:flex-start;flex-wrap:wrap;gap:6px 8px} .amsp-source-btn__mark{margin-top:1px} .amsp-qa__mark{align-self:flex-start;margin-top:4px} .amsp-qa__summary{align-items:flex-start} } @media(max-width:390px){ .amsp-intro__statement{font-size:26px} .amsp-intro__now{padding:20px} } /* =========================================================================== 04.64i — APPROVED COLOUR TRANSITIONS Two local visual changes only. Explore Inside holds true black at its top and lifts toward the softer blue-black approved in the review study. The Welcome/interview uses the sampled light-blue graph paper, then settles into the existing warm paper before the Statement begins. No copy, typography, accordion structure, interaction, route or destination changes. In particular, Raleway Dots remains the Contents display face and the rejected title-anatomy experiment is not present. ======================================================================== */ /* True #000 remains visible through the heading and upper rows. The blue-grey wash rises gradually through the lower button area, reaching the same soft dark family as the approved review image without compromising text contrast. */ .edition-contents--atmosphere-gradient::before{ background:linear-gradient(to bottom, rgba(223,227,231,0) 0%, rgba(223,227,231,0) 46%, rgba(223,227,231,.03) 62%, rgba(223,227,231,.075) 78%, rgba(223,227,231,.14) 90%, rgba(223,227,231,.22) 100%); } /* #DFE3E7 and the graph tone derive from Jay's approved screenshot. The final fluid 220–300px blend resolves exactly to the existing --paper (#EBE7DC), keeping the handoff continuous without adding a review-only transition section. */ .amsp-intro--graph-paper{ background:linear-gradient(to bottom, #DFE3E7 0, #DFE3E7 calc(100% - clamp(220px,30vw,300px)), var(--paper) 100%); } .amsp-intro--graph-paper::before{ background-image: linear-gradient(to right,rgba(10,10,10,.073) 1px,transparent 1px), linear-gradient(to bottom,rgba(10,10,10,.073) 1px,transparent 1px); background-size:24px 24px; } /* =========================================================================== 04.64j — CONTENTS PREFACE DISCLOSURE A compact, unnumbered reading of the publication title immediately before Explore Inside. Native details/summary keeps it closed by default and fully operable without JavaScript. The existing Contents numbering and display typography remain untouched. ======================================================================== */ .contents-preface{ margin:0 0 clamp(46px,6vw,78px); border-top:1px solid rgba(235,231,220,.44); border-bottom:1px solid rgba(235,231,220,.44); color:var(--paper); } .contents-preface__summary{ display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:clamp(14px,2vw,28px); align-items:center; min-height:64px; padding:10px 0; color:inherit; cursor:pointer; list-style:none; } .contents-preface__summary::-webkit-details-marker{display:none} .contents-preface__summary::marker{content:""} .contents-preface__prompt{ max-width:62ch; font:500 clamp(10px,.9vw,12px)/1.45 var(--mono); letter-spacing:.095em; text-transform:uppercase; } .contents-preface__mark{ position:relative; width:44px; height:44px; justify-self:end; } .contents-preface__mark::before, .contents-preface__mark::after{ content:""; position:absolute; left:50%; top:50%; background:var(--signal); transform:translate(-50%,-50%); } .contents-preface__mark::before{width:17px;height:1.5px} .contents-preface__mark::after{width:1.5px;height:17px} .contents-preface[open] .contents-preface__mark::after{transform:translate(-50%,-50%) scaleY(0)} .contents-preface__summary:hover .contents-preface__prompt{color:var(--signal)} .contents-preface__summary:focus-visible{outline:2px solid var(--signal);outline-offset:4px} .contents-preface__panel{ padding:0 0 clamp(18px,2.8vw,34px); } .contents-preface__list{ display:grid; gap:0; margin:0; border-top:1px solid rgba(235,231,220,.22); } .contents-preface__item{ display:grid; grid-template-columns:minmax(145px,.34fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); padding:clamp(20px,2.5vw,30px) 0; border-bottom:1px solid rgba(235,231,220,.22); } .contents-preface__item:last-child{border-bottom:0} .contents-preface__item dt{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin:0; } .contents-preface__term{ font:400 clamp(22px,2.2vw,31px)/1.12 var(--display); letter-spacing:-.018em; } .contents-preface__key{ font:600 9px/1.35 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--signal); } .contents-preface__item dd{ max-width:65ch; margin:0; font:400 clamp(15px,1.2vw,17px)/1.65 var(--body); color:var(--paper); } @media(max-width:699px){ .contents-preface{margin-bottom:44px} .contents-preface__summary{min-height:60px;padding:8px 0} .contents-preface__item{grid-template-columns:1fr;gap:10px;padding:22px 0} .contents-preface__item dt{gap:5px} .contents-preface__item dd{max-width:none;font-size:15px;line-height:1.65} } @media(max-width:430px){ .contents-preface__summary{gap:10px} .contents-preface__prompt{font-size:9px;letter-spacing:.075em} .contents-preface__term{font-size:22px} } @media(prefers-reduced-motion:no-preference){ .contents-preface__mark::after{transition:transform .16s ease} } /* Chance of Katz → Listening → Peripheral scroll companion. In 04.64k the existing wrapper begins one band earlier; the far-left rail and established Room 001 flower, link, and Listening copy layout remain unchanged. */ .listening-recipes-journey{ position:relative; isolation:isolate; } .listening-recipes-cat-track{ position:absolute; z-index:4; top:0; bottom:0; left:clamp(-72px,calc(-150px + 10vw),0px); width:clamp(86px,8.5vw,126px); pointer-events:none; user-select:none; } .listening-recipes-cat{ position:sticky; top:clamp(82px,10vh,118px); display:block; width:100%; height:auto; margin:clamp(78px,9vw,132px) 0 0; } /* At intermediate desktop widths, reserve a modest landing channel in the otherwise empty Peripheral section. Listening Room copy remains untouched. */ @media(min-width:1024px) and (max-width:1359px){ .recipes-peripheral .recipes-main{margin-left:clamp(68px,8vw,102px)} } /* Tablet and phone: no floating overlap. The same cat lands in normal flow at the start of Peripheral, above its eyebrow and heading. */ @media(max-width:1023.98px){ .listening-recipes-cat-track{ position:relative; inset:auto; width:min(34vw,140px); margin:0 0 0 var(--gut); } .listening-recipes-cat{position:static;margin:0;width:100%;height:auto} } @media(prefers-reduced-motion:reduce){ .listening-recipes-cat-track{ position:relative; inset:auto; width:min(126px,34vw); margin:0 0 0 var(--gut); } .listening-recipes-cat{position:static;margin:0;width:100%;height:auto} } /* Statement reduction. The Contents, Welcome interview and FASCIA doorway now carry the fuller orientation, so this band returns to a brief proposition. */ #edition.statement-compact{ padding-top:clamp(30px,3.6vw,46px); padding-bottom:clamp(34px,4vw,52px); } #edition.statement-compact .amsp-sec__head{ margin-bottom:clamp(12px,1.6vw,18px); } #edition.statement-compact .amsp-sec__head h2{ max-width:24ch; font-size:clamp(26px,3.2vw,42px); line-height:1.08; } #edition.statement-compact .intro-letter{ max-width:48em; } #edition.statement-compact .statement-compact__welcome{ max-width:48em; margin:0; font:500 clamp(14px,1.1vw,16px)/1.55 var(--body); } #edition.statement-compact .statement-compact__soundtrack{ display:grid; grid-template-columns:minmax(150px,190px) minmax(0,1fr); gap:8px clamp(18px,2.4vw,34px); max-width:48em; margin:16px 0 0; padding-top:13px; border-top:1px solid var(--line); font:500 clamp(13px,1vw,15px)/1.5 var(--body); } #edition.statement-compact .statement-compact__soundtrack-label{ padding-top:3px; color:var(--muted-deep); font:600 9px/1.45 var(--mono); font-size:max(10px,.625rem); letter-spacing:.09em; text-transform:uppercase; } #edition.statement-compact .statement-compact__soundtrack a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; } #edition.statement-compact .statement-compact__soundtrack a:focus-visible{ outline:3px solid var(--signal); outline-offset:3px; } @media(max-width:620px){ #edition.statement-compact .statement-compact__soundtrack{ grid-template-columns:1fr; gap:5px; } } /* Interview introduction. Three unnumbered editorial movements distinguish this reading sequence from the numbered Explore Inside navigation. */ .amsp-intro__interview{ margin-top:clamp(46px,5.4vw,70px); border-top:0; } .amsp-interview__head{ display:grid; grid-template-columns:minmax(150px,.32fr) minmax(0,1fr); gap:clamp(22px,3.4vw,50px); align-items:end; margin-bottom:clamp(30px,3.5vw,46px); } .amsp-interview__head .eyebrow{margin:0 0 5px} .amsp-interview__head h3{ max-width:18ch; margin:0; font:700 clamp(28px,3.2vw,46px)/1.06 var(--display); letter-spacing:-.025em; } .amsp-interview__movement-group{margin:0} .amsp-interview__movement-group + .amsp-interview__movement-group{ margin-top:clamp(38px,5vw,62px); } .amsp-interview__movement{ margin:0; padding:12px 0 9px; border-top:2px solid var(--ink); font:600 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; } @media(max-width:819.98px){ .amsp-intro__interview{margin-top:44px} .amsp-interview__head{grid-template-columns:1fr;gap:6px;margin-bottom:30px} .amsp-interview__head .eyebrow{margin:0} .amsp-interview__head h3{font-size:clamp(28px,6.5vw,34px)} .amsp-interview__movement-group + .amsp-interview__movement-group{margin-top:38px} } @media(max-width:430px){ .amsp-interview__movement{font-size:9px;letter-spacing:.105em} } /* 04.64j — temporary condensed Welcome opening. The original narrow, photo-ready rule remains above and can be restored when real images arrive. Only wide layouts change; compact layouts keep the approved vertical read. */ @media(min-width:820px){ .amsp-intro__opening{max-width:none} .amsp-intro__statement{max-width:none} .amsp-intro__body{ max-width:none; columns:2; column-gap:clamp(44px,6vw,88px); } .amsp-intro__body p{ break-inside:avoid; page-break-inside:avoid; } } /* 04.64j review correction — Philadelphia opening photograph. Follows AMSP-Home-Lemon-Juice-Part-1-Desktop-Editable 3: the section opens on the full-bleed lemon/checkered-table photograph (4:5) with the existing eyebrow, title and lede set over it. Copy and heading level are unchanged. All offsets are expressed in vw because the frame is 100vw wide. */ .amsp-phl__intro--photo{ position:relative; display:block; width:100vw; margin:-90px calc(50% - 50vw) 0; aspect-ratio:3262 / 4078; overflow:hidden; isolation:isolate; background:#1B2A33; color:#FCCE34; } .amsp-phl__intro-photo{ position:absolute; inset:0; z-index:-1; display:block; width:100%; height:100%; object-fit:cover; } .amsp-phl__intro--photo .eyebrow{ position:absolute; top:2.9vw; left:4.3vw; margin:0; color:#C8FFE3; } .amsp-phl__intro--photo h2{ position:absolute; top:12.2vw; left:6.95vw; right:4.7vw; max-width:none; margin:0; color:#FCCE34; font-size:8.2vw; line-height:1.06; } .amsp-phl__title-line{display:block} .amsp-phl__title-line--end{text-align:right} .amsp-phl__intro--photo .lede{ position:absolute; top:34vw; left:70.5vw; width:26.6vw; max-width:none; margin:0; color:#E3AA12; font-weight:400; font-size:1.69vw; line-height:1.62; } @media(max-width:899px){ .amsp-phl__intro--photo{margin-top:-58px} } /* Compact: title stays on the photograph; the lede moves below it so the paragraph never shrinks below reading size or covers the lemon. */ @media(max-width:860px){ .amsp-phl__intro--photo{aspect-ratio:auto;overflow:visible;background:transparent;color:inherit} .amsp-phl__intro-photo{position:relative;z-index:auto;height:auto} .amsp-phl__intro--photo h2{font-size:10vw} .amsp-phl__intro--photo .lede{ position:static; width:auto; margin:22px var(--gut) 0; color:var(--ink); font-weight:500; font-size:clamp(19px,2.4vw,27px); line-height:1.42; } } @media(max-width:699px){ .amsp-phl__intro--photo{margin-top:-48px} .amsp-phl__intro--photo .eyebrow{top:4vw;left:var(--gut);font-size:10px} } /* ========================================================================== 04.64k — preflight-coordinated mobile and route refinements This final, page-scoped layer resolves the older hero/listening rules in one place. It intentionally leaves the historical declarations above untouched. ========================================================================== */ /* Chance of Katz project doorway. The peach is the exact Feeling / thought space field from Listening Room 001, now used as a quiet internal button. */ #chance-of-katz .project__room-link{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:52px; padding:12px 14px; border:1px solid var(--ink); background:#F2D6C9; color:var(--ink); font:600 11px/1.35 var(--mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; } #chance-of-katz .project__room-link:hover{ box-shadow:inset 0 -4px 0 var(--signal); } #chance-of-katz .project__room-link:focus-visible{ outline:3px solid var(--signal); outline-offset:3px; box-shadow:0 0 0 5px var(--ink); } @media(min-width:1025px){ #chance-of-katz .project__aside dd:last-of-type{ margin:0; padding:0 0 14px; background:transparent; } #chance-of-katz .project__aside dd:last-of-type::after{display:none} } /* The supplied calico now enters with the Chance of Katz project and keeps its established Listening / Peripheral landing. The outer journey begins at the project section in the markup; only its scale changes here. */ .listening-recipes-cat-track{width:clamp(98px,9.5vw,146px)} @media(max-width:1023.98px){ .listening-recipes-cat-track{width:min(36vw,154px)} } @media(prefers-reduced-motion:reduce){ .listening-recipes-cat-track{width:min(146px,36vw)} } /* 04.64k-r2 — at 1024–1359 the Chance and Listening copy starts at the page gutter, so the enlarged rail would cover it. Keep the approved size and pull the rail left until the cat's opaque edge (93.6% of its box) clears the content column by 8px. Never moves the rail right of its r1 position. */ @media(min-width:1024px) and (max-width:1359px) and (prefers-reduced-motion:no-preference){ .listening-recipes-cat-track{ left:min( clamp(-72px,calc(-150px + 10vw),0px), calc(max(0px,(100% - var(--max)) / 2) + var(--gut) - 8px - .936 * clamp(98px,9.5vw,146px)) ); } } /* Listening Room 001 hero. Compact reading order is metadata, small cat, title, project/Play, Derek, then the weather instrument. The DOM remains a single semantic copy of every element; display:contents only releases the two visual children of the side group into this grid. */ @media(max-width:899px){ .hero[data-catfall-hero] .hero__in{ grid-template-areas: "meta" "cat" "title" "lede" "derek" "conds" "forecast"; } .hero[data-catfall-hero] .hero__meta{grid-area:meta;margin-bottom:8px!important} .hero[data-catfall-hero] .hero__title{grid-area:title} .hero[data-catfall-hero] .hero__sub--lede{grid-area:lede;margin-top:24px} .hero[data-catfall-hero] .hero__side{display:contents} .hero[data-catfall-hero] .hero__side .hero__cat{ grid-area:cat; align-self:end; justify-self:end; width:clamp(116px,22vw,176px); max-width:none; margin:-4px clamp(12px,6vw,54px) -10px 0; padding:0; } .hero[data-catfall-hero] .hero__derek{ grid-area:derek; margin-top:clamp(14px,3.8vw,24px); } .hero[data-catfall-hero] .hero__sub--conditions{grid-area:conds} .hero[data-catfall-hero] .forecast{grid-area:forecast} .hero[data-catfall-hero] .derek-intro__portrait{ width:min(100%,420px); margin-inline:auto; } } /* Wide hero proportions follow the supplied SVG: the upper cat is a smaller suspended accent and Derek remains the dominant image in the side column. */ @media(min-width:900px){ .hero[data-catfall-hero] .hero__side{gap:clamp(14px,1.8vw,24px)} .hero[data-catfall-hero] .hero__side .hero__cat{ width:min(72%,330px); margin-right:clamp(10px,3vw,48px); padding:0; } } /* The decorative Listen Together cat is deliberately hidden below 900px by the earlier accessibility rule. Remove only the obsolete stage that a later historical rule continued to reserve for that hidden image. */ @media(max-width:859px){ #listen.falling-cat-scene .split__side{ min-height:0; padding-left:0; } } /* ========================================================================== 04.64l — final pre-Philadelphia launch refinements This last, page-scoped layer sits above the historical rules. It changes only the approved hero, project, Philadelphia orientation, listening research shelves, career comparison, and About-page spacing. ========================================================================== */ /* Room 001 carries one semantic title while visually separating its status from the large project name. The repeated metadata phrase is decorative to assistive technology; the h1 supplies the complete accessible name. */ .hero[data-catfall-hero] .hero__title-preface{ display:block; margin:0 0 .12em; font-size:clamp(28px,4.2vw,54px); line-height:1.04; letter-spacing:-.018em; } .hero[data-catfall-hero] .hero__title-name{display:block} /* The canonical game address is now an explicit, comfortably sized link. */ #chance-of-katz .project__canonical-link{ display:inline-flex; align-items:center; gap:7px; min-height:44px; color:var(--ink); text-decoration-thickness:1px; text-underline-offset:4px; } /* Compact project metadata and Workbench on phones and tablets. The square controls remain exactly 44px, preserving the minimum touch target. */ @media(max-width:899px){ #chance-of-katz .project{gap:20px} #chance-of-katz .project__aside{padding-top:12px} #chance-of-katz .project__aside dl{gap:8px} #chance-of-katz .project__aside dd{line-height:1.4} #chance-of-katz .workbench{margin-top:24px} #chance-of-katz .workbench__summary{ min-height:52px; padding:10px 2px; column-gap:14px; } #chance-of-katz .workbench__summary::after{ width:44px; height:44px; font-size:22px; } #chance-of-katz .fascia-doorway{margin-top:22px} } /* The three-part history now belongs to the photograph. The positioned stage contains the image and overlays on wide screens, then returns to normal flow on compact screens so the lede stays readable below the image. */ .amsp-phl__photo-stage{ position:absolute; inset:0; isolation:isolate; } .amsp-phl__photo-stage .amsp-phl__intro-photo{z-index:-1} .amsp-phl__photo-stage::before{ content:""; position:absolute; z-index:0; inset:auto 0 0; height:34%; pointer-events:none; background:linear-gradient(to bottom,rgba(5,10,14,0),rgba(5,10,14,.38) 34%,rgba(5,10,14,.82) 100%); } .amsp-phl__intro--photo .eyebrow, .amsp-phl__intro--photo h2, .amsp-phl__intro--photo .lede, .amsp-phl__intro--photo .amsp-phl__parts{z-index:1} .amsp-phl__intro--photo .amsp-phl__parts{ position:absolute; left:max(var(--gut),calc((100vw - 960px) / 2)); right:max(var(--gut),calc((100vw - 960px) / 2)); bottom:clamp(28px,4.2vw,68px); max-width:none; padding:clamp(15px,1.8vw,22px); border:1px solid rgba(240,226,15,.7); background:rgba(5,10,14,.5); color:var(--signal); } .amsp-phl__intro--photo .amsp-phl__parts-note, .amsp-phl__intro--photo .amsp-phl__parts-hinge, .amsp-phl__intro--photo .amsp-phl__parts-list li, .amsp-phl__intro--photo .amsp-phl__parts-list li[aria-current]{color:var(--signal)} .amsp-phl__intro--photo .amsp-phl__parts-list li:not([aria-current]){opacity:.78} .amsp-phl__intro--photo .amsp-phl__parts-list{ gap:clamp(14px,3vw,46px); margin:12px 0; } @media(max-width:860px){ .amsp-phl__photo-stage{ position:relative; inset:auto; display:block; overflow:hidden; background:#1B2A33; } .amsp-phl__photo-stage::before{ height:54%; background:linear-gradient(to bottom,rgba(5,10,14,0),rgba(5,10,14,.82) 72%); } .amsp-phl__intro--photo .amsp-phl__parts{ left:var(--gut); right:var(--gut); bottom:clamp(12px,3vw,22px); padding:13px 14px; background:rgba(5,10,14,.68); } .amsp-phl__intro--photo .amsp-phl__parts-note, .amsp-phl__intro--photo .amsp-phl__parts-hinge{font-size:8.5px;line-height:1.4} .amsp-phl__intro--photo .amsp-phl__parts-list{gap:6px;margin:9px 0} .amsp-phl__intro--photo .amsp-phl__parts-no, .amsp-phl__intro--photo .amsp-phl__parts-span{font-size:8.5px} .amsp-phl__intro--photo .amsp-phl__parts-name{font-size:10px} } /* The listening jump borrows the exact Feeling / thought space peach. */ #listen .direct-listen--primary{ background:#F2D6C9!important; color:var(--ink)!important; border-color:var(--ink)!important; } #listen .direct-listen--primary:hover{ background:#F2D6C9!important; color:var(--ink)!important; box-shadow:inset 0 -4px 0 var(--signal); } #listen .direct-listen--primary:focus-visible{ outline:3px solid var(--signal); outline-offset:3px; box-shadow:0 0 0 5px var(--ink); } /* A short instruction bridges the peach introduction and the three native details shelves. Each shelf gets one dark boundary; the older section rules are removed to avoid a doubled line system. */ .artist-shelves__direction{ max-width:64ch; margin:18px 0 0; padding-top:14px; border-top:1px solid rgba(10,10,10,.45); font:600 10px/1.5 var(--mono); letter-spacing:.075em; text-transform:uppercase; color:var(--ink); } .artist--shelf{ padding:clamp(10px,1.2vw,16px) 0!important; border-top:0!important; } .artist--shelf .artist-shelf{ border:2px solid currentColor; } .artist--shelf .artist-shelf__summary{ min-height:108px; padding:clamp(22px,3vw,38px) clamp(16px,2.5vw,30px); } .artist--shelf .artist-shelf__body{ padding:0 clamp(16px,2.5vw,30px) clamp(32px,3.5vw,50px); } .artist--shelf .artist-shelf[open]>.artist-shelf__summary{ padding-bottom:clamp(18px,2vw,26px); border-bottom:1px solid currentColor; } .artist--shelf .artist-shelf__summary:focus-visible{ outline:3px solid var(--signal); outline-offset:-6px; box-shadow:none; } @media(max-width:699px){ .artist--shelf{padding:8px 0!important} .artist--shelf .artist-shelf__summary{ min-height:92px; padding:18px 14px; } .artist--shelf .artist-shelf__body{padding:0 14px 30px} } /* Career comparison: a separate related-research object, using the same + / − grammar without reading as a fourth artist shelf. */ #career-cross-reference{ margin:clamp(18px,2.4vw,34px) clamp(14px,2.6vw,40px) 0!important; padding:clamp(18px,2.6vw,36px)!important; border:2px solid currentColor!important; background:var(--warm-white); } #career-cross-reference .practice-map__introduction{ gap:18px clamp(34px,5vw,78px); padding:0 0 clamp(20px,2.4vw,30px); border-top:0; } #career-cross-reference .practice-map__summary-title{ font-size:clamp(34px,4.2vw,58px); line-height:1.02; } #career-cross-reference .practice-map__summary-intro{ max-width:760px; font-size:clamp(14px,1.15vw,17px); line-height:1.55; } #career-cross-reference .practice-map__details{border-bottom:0} #career-cross-reference .practice-map__summary{ min-height:64px; padding:9px 0; border-top:2px solid currentColor; } #career-cross-reference .practice-map__summary:focus-visible, #career-cross-reference .practice-map__mobile-link:focus-visible{ outline:3px solid var(--signal); outline-offset:4px; box-shadow:0 0 0 6px var(--ink); } #career-cross-reference .practice-map__mobile-link{ min-height:64px; border-top:2px solid currentColor; border-bottom:0; } html[data-surface="chassis"] #career-cross-reference{background:#1A1B18} .practice-map+.derek-blue-breath{min-height:clamp(28px,3vw,42px)} @media(max-width:700px){ #career-cross-reference{ margin:16px 12px 0!important; padding:17px 15px!important; } #career-cross-reference .practice-map__introduction{padding-bottom:18px} #career-cross-reference .practice-map__summary-title{font-size:clamp(30px,9vw,42px)} #career-cross-reference .practice-map__summary-intro{font-size:13px} #career-cross-reference .practice-map__mobile-link{padding:7px 0} #career-cross-reference .practice-map__mobile-link>span:last-child{ display:grid; place-items:center; width:44px; height:44px; border:1px solid currentColor; font-size:0; } #career-cross-reference .practice-map__mobile-link>span:last-child::before{ content:"+"; font:400 26px/1 var(--mono); } .practice-map+.derek-blue-breath{min-height:24px} } /* About stays editorially intact while occupying less vertical distance. Wider measure and a three-card desktop row remove the avoidable second row; compact cards and reduced gaps shorten the phone page without hiding copy. */ .about-page{padding-block:clamp(44px,5vw,68px)} .about-page .amsp-sec__head{margin-bottom:20px} .about-page .about-block{max-width:68em} .about-page .about-block>p{max-width:54em;margin-bottom:12px} .about-page .about-block>.about-id{margin:16px 0 22px} .about-page .about-block h2{margin:30px 0 9px} .about-page .about-block h2:first-of-type{margin-top:0} .about-page .about-portals{ width:100%; margin:32px 0 18px; gap:12px; } .about-page .about-portal{ min-height:0; padding:18px 20px; } .about-page .about-portal strong{font-size:clamp(27px,3.2vw,40px)} .about-page .current-weather{margin:26px 0 20px} .about-page .about-actions{margin:20px 0 16px;padding:14px 0} .about-page .about-contact{margin-top:24px;padding-top:14px} @media(min-width:850px){ .about-page .about-portals{grid-template-columns:repeat(3,minmax(0,1fr))} .about-page .about-portal--amsp{grid-column:auto;min-height:0} } @media(max-width:849px){ .about-page{padding-block:38px} .about-page .about-portals{gap:8px;margin-top:26px} .about-page .about-portal{padding:15px 16px;gap:6px} .about-page .about-portal strong{font-size:clamp(25px,8vw,34px)} .about-page .about-portal__desc{line-height:1.4} } /* ========================================================================== 04.64m-p1 — Philadelphia locked-copy preview The edited SVG is a placement map, not a rasterized page. This layer keeps the complete essay as live HTML, regularizes its spacing on the site grid, preserves intact photographs, and exposes the approved FASCIA seams as real links. No non-Philadelphia component is changed here. ========================================================================== */ .amsp-phl--locked{ display:block; --phl-copy:720px; --phl-wide:1160px; --phl-gap:clamp(42px,5vw,76px); } /* Hero: the history and essay title remain live overlays on the photograph. */ .amsp-phl--locked .amsp-phl__intro--photo{margin-bottom:0} .amsp-phl--locked .amsp-phl__photo-stage::before{ height:46%; background:linear-gradient(to bottom,rgba(5,10,14,0),rgba(5,10,14,.26) 22%,rgba(5,10,14,.86) 100%); } .amsp-phl--locked .amsp-phl__intro--photo .amsp-phl__parts{ top:36%; right:4.4vw; bottom:auto; left:auto; width:min(34vw,490px); padding:clamp(14px,1.5vw,20px); background:rgba(5,10,14,.72); } .amsp-phl--locked .amsp-phl__essay-lockup{ position:absolute; z-index:1; right:32vw; bottom:clamp(30px,4vw,64px); left:4.4vw; color:#FCCE34; } .amsp-phl--locked .amsp-phl__essay-lockup .eyebrow{ position:static!important; margin:0 0 14px; color:#C8FFE3; } .amsp-phl--locked .amsp-phl__essay-lockup h3{ max-width:15ch; margin:0; color:#FCCE34; font-family:var(--display); font-size:clamp(46px,5vw,78px); font-weight:700; line-height:1.02; letter-spacing:-.025em; text-wrap:balance; } .amsp-phl--locked .amsp-phl__essay-lockup>p:last-child{ max-width:62ch; margin:20px 0 0; padding-top:16px; border-top:1px solid rgba(240,226,15,.78); color:#FCCE34; font-size:clamp(16px,1.45vw,22px); line-height:1.5; text-wrap:pretty; } /* The diaristic note is intentionally a small, separate object above the essay. */ .amsp-phl__publishing-note{ display:grid; gap:10px; width:min(100%,370px); margin:clamp(30px,4vw,54px) 0 clamp(44px,6vw,72px) auto; padding:clamp(15px,1.6vw,20px); border:1px solid var(--ink); background:#F2D6C9; } .amsp-phl__publishing-note .eyebrow{margin:2px 0 0;color:var(--ink)} .amsp-phl__publishing-note>p:last-child{ margin:0; font-size:clamp(12px,1vw,14px); line-height:1.5; } /* One reading measure and one spacing system govern the whole essay. */ .amsp-phl-story{ display:grid; gap:var(--phl-gap); width:min(100%,var(--phl-wide)); margin-inline:auto; } .amsp-phl-story__copy{ width:min(100%,var(--phl-copy)); margin-inline:auto; } .amsp-phl-story__copy p, .amsp-phl__walter-copy p{ margin:0 0 1.38em; font-size:clamp(18px,1.45vw,22px); line-height:1.62; text-wrap:pretty; } .amsp-phl-story__copy p:last-child, .amsp-phl__walter-copy p:last-child{margin-bottom:0} .amsp-phl-story a:not(.amsp-phl__fascia-seam):not(.amsp-phl__angela-card){ color:inherit; text-decoration-thickness:1px; text-underline-offset:4px; } .amsp-phl-story a:not(.amsp-phl__fascia-seam):not(.amsp-phl__angela-card):focus-visible{ outline:3px solid var(--signal); outline-offset:3px; } .amsp-phl-story__opening{ display:grid; grid-template-columns:minmax(0,var(--phl-copy)) minmax(220px,280px); gap:clamp(34px,5vw,72px); justify-content:space-between; align-items:center; } .amsp-phl-story__opening .amsp-phl-story__copy{margin:0} .amsp-phl-story__bridge{ font-weight:600; font-size:clamp(22px,2vw,30px)!important; line-height:1.38!important; } /* FASCIA is a linked connective layer, not production annotation. */ .amsp-phl__fascia-seam{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:7px; min-height:70px; padding:14px 16px 13px; border:2px solid var(--signal); background:#111; color:var(--signal)!important; font-family:var(--mono); text-decoration:none!important; } .amsp-phl__fascia-seam::before{ content:""; position:absolute; top:50%; right:100%; width:clamp(22px,3vw,46px); border-top:2px solid var(--signal); } .amsp-phl__fascia-seam strong{ font-size:10px; line-height:1.35; letter-spacing:.075em; text-transform:uppercase; } .amsp-phl__fascia-seam span{color:#F7F5F0;font-size:9px;line-height:1.4} .amsp-phl__fascia-seam:hover{box-shadow:inset 0 -5px 0 var(--signal)} .amsp-phl__fascia-seam:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; box-shadow:0 0 0 7px var(--signal); } .amsp-phl-story__media-row{ display:grid; grid-template-columns:minmax(0,var(--phl-copy)) minmax(260px,370px); gap:clamp(38px,5vw,72px); align-items:center; } .amsp-phl-story__media-row .amsp-phl-story__copy{margin:0} .amsp-phl__figure{margin:0} .amsp-phl__figure img{ display:block; width:100%; height:auto; border:1px solid var(--line); background:#fff; } .amsp-phl__figure figcaption{ margin-top:9px; color:var(--muted-deep); font:600 9px/1.45 var(--mono); letter-spacing:.075em; text-transform:uppercase; } .amsp-phl__self-portrait{width:min(100%,350px);justify-self:end} .amsp-phl__walter{ display:grid; grid-template-columns:minmax(0,580px) minmax(260px,1fr); gap:clamp(38px,6vw,84px); align-items:start; } .amsp-phl__walter .amsp-phl__figure{width:min(100%,580px)} .amsp-phl__walter-copy{padding-top:clamp(2px,2vw,26px)} .amsp-phl__walter-copy h3{ margin:0 0 20px; font-family:var(--display); font-size:clamp(38px,4vw,58px); line-height:1.04; } .amsp-phl__walter-copy .amsp-phl__fascia-seam{max-width:300px;margin-top:34px} .amsp-phl-story__turn{ width:min(100%,1040px); margin:0 auto; padding-top:clamp(26px,4vw,48px); border-top:2px solid var(--ink); font-family:var(--display); font-size:clamp(38px,4.5vw,62px); line-height:1.05; letter-spacing:-.018em; text-wrap:balance; } .amsp-phl-story__media-row--collaboration{align-items:start} .amsp-phl__collaboration-images{display:grid;gap:24px;justify-items:end} .amsp-phl__collaboration-images>.amsp-phl__figure{width:min(100%,360px)} .amsp-phl__angela-card{ display:grid; width:min(100%,320px); padding:10px; border:2px solid var(--signal); background:#111; color:#F7F5F0; font:600 9px/1.4 var(--mono); letter-spacing:.07em; text-decoration:none; text-transform:uppercase; } .amsp-phl__angela-card img{display:block;width:100%;height:auto;margin-bottom:10px} .amsp-phl__angela-card:hover{box-shadow:inset 0 -5px 0 var(--signal)} .amsp-phl__angela-card:focus-visible{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 7px var(--signal)} .amsp-phl__collaboration-images>.amsp-phl__fascia-seam{width:min(100%,330px);margin-left:auto} /* Angela owns the drill / Web Design image. Heather owns the yoga rollover; Heather's click destination remains Amrita Yoga & Wellness. */ .amsp-phl__amrita-copy{position:relative;margin-inline:auto} .amsp-phl__heather-paragraph{position:relative} .amsp-phl__heather-preview{ position:absolute; z-index:12; top:-90px; left:calc(100% + 34px); display:grid; gap:10px; width:clamp(240px,22vw,280px); padding:10px; border:2px solid var(--signal); background:#111; color:#F7F5F0; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .16s ease,transform .16s ease,visibility .16s; pointer-events:none; } .amsp-phl__heather-preview img{display:block;width:100%;height:auto;background:#fff} .amsp-phl__heather-preview>span{ font:600 9px/1.4 var(--mono); letter-spacing:.065em; text-transform:uppercase; } .amsp-phl__heather-link:hover+.amsp-phl__heather-preview, .amsp-phl__heather-link:focus+.amsp-phl__heather-preview{ opacity:1; visibility:visible; transform:none; } .amsp-phl__heather-mobile{display:none} .amsp-phl__amrita-copy>.amsp-phl__fascia-seam{width:min(100%,300px);margin:34px 0 0 auto} .amsp-phl__rooftops{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,3vw,34px); width:min(100%,1040px); margin-inline:auto; } .amsp-phl-story__ending{ width:min(100%,1040px); margin-inline:auto; padding-top:clamp(30px,4vw,52px); border-top:2px solid var(--ink); } .amsp-phl-story__ending p{ margin:0; font-family:var(--display); font-size:clamp(40px,5vw,68px); font-weight:700; line-height:1.08; letter-spacing:-.02em; } .amsp-phl-story__ending p+p{margin-top:10px;font-size:clamp(28px,3.4vw,46px)} @media(max-width:1050px){ .amsp-phl__heather-preview{display:none} .amsp-phl__heather-mobile{ display:block; width:min(100%,480px); margin:26px 0 0; } } @media(max-width:860px){ .amsp-phl--locked{ --phl-gap:clamp(38px,9vw,58px); } .amsp-phl--locked .amsp-phl__photo-stage{ position:relative; height:clamp(640px,145vw,820px); min-height:0; } .amsp-phl--locked .amsp-phl__intro-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .amsp-phl--locked .amsp-phl__photo-stage::before{height:54%} .amsp-phl--locked .amsp-phl__intro--photo .amsp-phl__parts{ top:31%; right:var(--gut); bottom:auto; left:44%; width:auto; padding:10px 11px; } .amsp-phl--locked .amsp-phl__parts-list{ grid-template-columns:1fr; gap:5px; margin:7px 0; } .amsp-phl--locked .amsp-phl__parts-list li{ display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:5px; align-items:baseline; } .amsp-phl--locked .amsp-phl__parts-name, .amsp-phl--locked .amsp-phl__parts-span, .amsp-phl--locked .amsp-phl__parts-no{ display:inline; margin:0; font-size:9px; } .amsp-phl--locked .amsp-phl__parts-span::before, .amsp-phl--locked .amsp-phl__parts-name::before{content:"·";margin-right:1px} .amsp-phl--locked .amsp-phl__parts-note, .amsp-phl--locked .amsp-phl__parts-hinge{font-size:9px;line-height:1.32} .amsp-phl--locked .amsp-phl__essay-lockup{ right:var(--gut); bottom:clamp(20px,5vw,34px); left:var(--gut); } .amsp-phl--locked .amsp-phl__essay-lockup h3{font-size:clamp(34px,8.5vw,58px)} .amsp-phl--locked .amsp-phl__essay-lockup>p:last-child{ max-width:48ch; margin-top:14px; padding-top:11px; font-size:clamp(14px,2.4vw,18px); line-height:1.42; } .amsp-phl__publishing-note{ grid-template-columns:1fr; gap:12px; margin-block:30px 52px; padding:17px; } .amsp-phl-story__opening, .amsp-phl-story__media-row, .amsp-phl__walter{grid-template-columns:1fr;gap:28px} .amsp-phl-story__opening .amsp-phl-story__copy, .amsp-phl-story__media-row .amsp-phl-story__copy{margin-inline:auto} .amsp-phl__fascia-seam{width:min(100%,330px);margin-left:auto} .amsp-phl__self-portrait{width:min(78%,430px);justify-self:end} .amsp-phl__walter .amsp-phl__figure{width:min(100%,620px)} .amsp-phl__walter-copy{padding-top:0} .amsp-phl__collaboration-images{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } .amsp-phl__collaboration-images>.amsp-phl__fascia-seam{grid-column:1 / -1} .amsp-phl__amrita-copy{margin-inline:auto} } @media(max-width:620px){ .amsp-phl--locked .amsp-phl__intro--photo .eyebrow{font-size:max(10px,.625rem)} .amsp-phl--locked .amsp-phl__intro--photo h2{top:12vw;font-size:10.2vw} .amsp-phl--locked .amsp-phl__intro--photo .amsp-phl__parts{ top:31%; left:38%; } .amsp-phl--locked .amsp-phl__parts-note, .amsp-phl--locked .amsp-phl__parts-hinge{font-size:8px} .amsp-phl--locked .amsp-phl__parts-name, .amsp-phl--locked .amsp-phl__parts-span, .amsp-phl--locked .amsp-phl__parts-no{font-size:8px} .amsp-phl-story__copy p, .amsp-phl__walter-copy p{font-size:18px;line-height:1.57} .amsp-phl__collaboration-images{grid-template-columns:1fr;justify-items:end} .amsp-phl__collaboration-images>.amsp-phl__figure, .amsp-phl__angela-card{width:min(82%,380px)} .amsp-phl__rooftops{grid-template-columns:1fr;gap:22px} .amsp-phl-story__turn{font-size:clamp(34px,10vw,48px)} .amsp-phl-story__ending p{font-size:clamp(38px,11vw,54px)} .amsp-phl-story__ending p+p{font-size:clamp(26px,7.5vw,38px)} } @media(prefers-reduced-motion:reduce){ .amsp-phl__heather-preview{transition:none} } /* ========================================================================== 04.64m-p2 — launch placement and interaction corrections This final scoped layer keeps the locked Philadelphia prose intact. It protects the hero lemon at every layout, pairs collaboration/project text with its image, makes the publishing note's Rigatoni reveal reversible, and gives the Welcome interview its intended editorial scale. ========================================================================== */ /* The interview title is a section threshold, not a caption beside its eyebrow. Let it use the full question-grid width. */ .amsp-interview__head{ grid-template-columns:1fr; gap:clamp(8px,1.2vw,14px); align-items:start; } .amsp-interview__head h3{ max-width:none; width:100%; font-size:clamp(48px,6.8vw,104px); line-height:.94; letter-spacing:-.045em; text-wrap:balance; } .amsp-phl__no-break{white-space:nowrap} /* Reserve the centre of the photograph for the lemon. On wide screens the history panel lives entirely in the far-right field; on compact screens it drops below the lemon before the essay title begins. */ @media(min-width:861px){ .amsp-phl--locked .amsp-phl__intro--photo .amsp-phl__parts{ top:38%; right:clamp(18px,2.4vw,42px); left:auto; width:min(27vw,400px); } .amsp-phl--locked .amsp-phl__parts-note, .amsp-phl--locked .amsp-phl__parts-hinge, .amsp-phl--locked .amsp-phl__parts-no, .amsp-phl--locked .amsp-phl__parts-span{font-size:10px} .amsp-phl--locked .amsp-phl__parts-name{font-size:12px} .amsp-phl-story>.amsp-phl-story__copy{margin-inline:0} } @media(max-width:860px){ .amsp-phl--locked .amsp-phl__photo-stage{ height:max(125vw,940px); max-height:none; } .amsp-phl--locked .amsp-phl__intro--photo h2{ font-size:clamp(40px,8.2vw,70px); } .amsp-phl--locked .amsp-phl__intro--photo .amsp-phl__parts{ top:calc(49% + 18px); right:var(--gut); bottom:auto; left:44%; } .amsp-phl--locked .amsp-phl__parts-note, .amsp-phl--locked .amsp-phl__parts-hinge, .amsp-phl--locked .amsp-phl__parts-no, .amsp-phl--locked .amsp-phl__parts-span, .amsp-phl--locked .amsp-phl__parts-name{font-size:10px;line-height:1.35} } @media(min-width:621px) and (max-width:760px){ .amsp-phl--locked .amsp-phl__intro--photo .amsp-phl__parts{left:36%} } @media(min-width:401px) and (max-width:620px){ .amsp-phl--locked .amsp-phl__intro--photo .amsp-phl__parts{left:30%} } @media(max-width:400px){ .amsp-phl--locked .amsp-phl__intro--photo .amsp-phl__parts{left:24%} } /* Publishing-day note: Rigatoni stays behind the small peach card until the card is hovered or its real button receives focus. The focus path is also the touch equivalent: tap to reveal, tap elsewhere to put him away. */ .amsp-phl__publishing-note{ position:relative; isolation:isolate; margin-bottom:clamp(24px,3vw,38px); } .amsp-phl__rigatoni-popout{ position:absolute; z-index:-1; top:-150px; right:12px; width:clamp(126px,12vw,176px); opacity:0; transform:translateY(68px) scale(.88); transform-origin:50% 100%; transition:opacity .18s ease,transform .28s cubic-bezier(.2,.76,.24,1); pointer-events:none; } .amsp-phl__rigatoni-popout img{display:block;width:100%;height:auto} .amsp-phl__publishing-note:hover .amsp-phl__rigatoni-popout, .amsp-phl__publishing-note:focus-within .amsp-phl__rigatoni-popout{ opacity:1; transform:none; } .amsp-phl__rigatoni-trigger{ appearance:none; width:max-content; min-height:32px; margin:0; padding:3px 0 0; border:0; border-top:1px solid currentColor; background:transparent; color:var(--ink); cursor:pointer; font:600 10px/1.3 var(--mono); letter-spacing:.09em; text-transform:uppercase; } .amsp-phl__rigatoni-trigger:focus-visible{ outline:3px solid var(--signal); outline-offset:4px; } @media(max-width:860px){ .amsp-phl__publishing-note{margin-top:70px;margin-bottom:8px} .amsp-phl__rigatoni-popout{top:-118px;width:128px} } /* Two explicit collaboration pairs remove the accidental empty column: opening/Tarot first, then Angela's paragraph/image. The FASCIA seam belongs immediately to the Tarot graphic. */ .amsp-phl__collaboration{ display:grid; grid-template-columns:minmax(0,var(--phl-copy)) minmax(260px,370px); gap:clamp(34px,4vw,58px) clamp(38px,5vw,72px); align-items:start; } .amsp-phl__collaboration .amsp-phl-story__copy{width:100%;margin:0} .amsp-phl__tarot-pair{display:grid;gap:14px;justify-items:end} .amsp-phl__tarot-pair>.amsp-phl__figure{width:min(100%,360px)} .amsp-phl__tarot-pair>.amsp-phl__fascia-seam{width:min(100%,330px)} .amsp-phl__collaboration>.amsp-phl__angela-card{align-self:start;justify-self:end} /* Each project reads as a text/image relationship. Both images remain complete (no object-fit crop), and the archive seam follows the pair rather than interrupting the locked prose. */ .amsp-phl__projects{ display:grid; grid-template-columns:minmax(0,var(--phl-copy)) minmax(260px,370px); gap:clamp(30px,4vw,52px) clamp(38px,5vw,72px); align-items:center; } .amsp-phl__projects .amsp-phl-story__copy{width:100%;margin:0} .amsp-phl__project-figure{ display:block; width:min(100%,370px); justify-self:end; color:inherit; text-decoration:none!important; } .amsp-phl__project-figure:hover img{outline:3px solid var(--signal);outline-offset:3px} .amsp-phl__project-figure:focus-visible{outline:3px solid var(--signal);outline-offset:5px} .amsp-phl__projects>.amsp-phl__fascia-seam{ grid-column:2; width:min(100%,330px); justify-self:end; margin-bottom:8px; } .amsp-phl-story__copy--after-projects{padding-top:clamp(4px,1vw,12px)} /* Keep rollover behaviour where the adjacent preview fits. At smaller widths and on non-hover devices Heather becomes an ordinary in-flow photograph. */ @media(max-width:1440px), (hover:none){ .amsp-phl__heather-preview{display:none} .amsp-phl__heather-mobile{ display:block; width:min(100%,480px); margin:26px 0 0; } } /* Captions and connective labels must survive real phone rendering. */ .amsp-phl__figure figcaption, .amsp-phl__angela-card, .amsp-phl__heather-preview>span, .amsp-phl__fascia-seam span{font-size:max(10px,.625rem)} .amsp-phl__fascia-seam strong{font-size:max(10px,.625rem)} @media(max-width:860px){ .amsp-phl__collaboration, .amsp-phl__projects{grid-template-columns:1fr;gap:26px} .amsp-phl__tarot-pair, .amsp-phl__collaboration>.amsp-phl__angela-card, .amsp-phl__project-figure{justify-self:end} .amsp-phl__projects>.amsp-phl__fascia-seam{grid-column:1;justify-self:end} } @media(max-width:620px){ .amsp-interview__head h3{font-size:clamp(42px,13vw,62px)} .amsp-phl__tarot-pair>.amsp-phl__figure, .amsp-phl__collaboration>.amsp-phl__angela-card, .amsp-phl__project-figure{width:min(88%,390px)} } @media(prefers-reduced-motion:reduce){ .amsp-phl__rigatoni-popout{transition:none} } /* ========================================================================== 04.64m-r1 — compact Philadelphia collaboration / Amrita passage The text and media now flow as two independent columns. This lets the Amrita/Heather passage rise beneath the shorter Angela/Roksana paragraph instead of waiting for the full-height Angela portrait to end. ========================================================================== */ .amsp-phl__collaboration{ grid-template-columns:minmax(0,var(--phl-copy)) minmax(260px,370px); gap:clamp(38px,5vw,72px); } .amsp-phl__collaboration-copy-column, .amsp-phl__collaboration-media-column{ display:grid; align-content:start; } .amsp-phl__collaboration-copy-column{gap:clamp(26px,3.2vw,42px)} .amsp-phl__collaboration-media-column{ gap:clamp(24px,3vw,36px); justify-items:end; } .amsp-phl__collaboration-copy-column>.amsp-phl-story__copy{ width:100%; margin:0; } .amsp-phl__collaboration-media-column>.amsp-phl__tarot-pair, .amsp-phl__collaboration-media-column>.amsp-phl__angela-card{ width:min(100%,320px); } .amsp-phl__collaboration-media-column .amsp-phl__tarot-pair>.amsp-phl__figure, .amsp-phl__collaboration-media-column .amsp-phl__tarot-pair>.amsp-phl__fascia-seam{ width:100%; } .amsp-phl__collaboration-copy-column .amsp-phl__amrita-copy>.amsp-phl__fascia-seam{ margin-top:24px; } .amsp-phl__heather-mobile{display:none!important} @media(min-width:1100px) and (hover:hover) and (pointer:fine){ .amsp-phl__heather-preview{display:grid} } @media(max-width:1099px), (hover:none){ .amsp-phl__heather-preview{display:none} } @media(max-width:860px){ .amsp-phl__collaboration{grid-template-columns:1fr;gap:24px} .amsp-phl__collaboration-copy-column, .amsp-phl__collaboration-media-column{display:contents} .amsp-phl__collaboration-intro{order:1} .amsp-phl__tarot-pair{order:2;justify-self:end} .amsp-phl__angela-copy{order:3} .amsp-phl__collaboration-media-column>.amsp-phl__angela-card{ order:4; justify-self:end; } .amsp-phl__amrita-copy{order:5} } /* ========================================================================== 04.64m-r2 — final editorial and wayfinding refinements This layer contains only the approved r2 changes: clearer section rhythm, native disclosures, contact/wayfinding support, and local colour handoffs. The locked Philadelphia essay prose remains unchanged except for the approved Jordan heading correction. ========================================================================== */ @font-face{ font-family:"Caveat"; src:url("fonts/caveat-var.ttf") format("truetype"); font-style:normal; font-weight:400 700; font-display:swap; } /* A direct About route appears only where the full utility group has room. The title menu remains the universal route at narrower widths. */ .nav-radio-wrap--about{display:none} .room-nav__about{display:none!important} @media(min-width:1360px){ .amsp-nav__links .nav-radio-wrap--about{display:inline-flex} .room-nav__links .room-nav__about{display:inline-flex!important;align-items:center} } /* Let the conversation title breathe above and below without changing its established scale or phone line breaks. */ .amsp-interview__head{ gap:clamp(16px,1.8vw,24px); margin-bottom:clamp(42px,4.6vw,62px); } .amsp-interview__head .eyebrow{margin:0} @media(max-width:819.98px){ .amsp-interview__head{gap:12px;margin-bottom:38px} } /* The current-action card gains one handwritten signal. Copy remains live, the arrow remains vector, and the whole cue reaches the same destination. */ .amsp-intro__now-stage{ display:grid; grid-template-columns:minmax(0,34em) minmax(230px,1fr); gap:clamp(34px,6vw,92px); align-items:center; margin:clamp(44px,5.4vw,72px) 0 0; } .amsp-intro__now-stage .amsp-intro__now{max-width:none;margin:0} .amsp-intro__now-callout{ display:grid; grid-template-columns:clamp(76px,8vw,126px) minmax(0,auto); grid-template-rows:auto auto; gap:0 12px; align-items:center; justify-self:start; color:var(--ink); text-decoration:none; transform:rotate(-1.6deg); } .amsp-intro__now-callout svg{ grid-column:1; grid-row:1 / span 2; display:block; width:100%; height:auto; overflow:visible; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } .amsp-intro__now-callout span{ grid-column:2; font:600 clamp(35px,3.7vw,52px)/.9 "Caveat",cursive; white-space:nowrap; } .amsp-intro__now-callout small{ grid-column:2; width:max-content; margin-top:8px; padding:3px 4px 2px; background:linear-gradient(transparent 48%,var(--signal) 48% 92%,transparent 92%); font:600 10px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; } .amsp-intro__now-callout:hover span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px} .amsp-intro__now-callout:focus-visible{outline:3px solid var(--signal);outline-offset:7px} @media(max-width:1023.98px){ .amsp-intro__now-stage{grid-template-columns:1fr;gap:24px} .amsp-intro__now-callout{order:-1;justify-self:end;margin-right:clamp(8px,7vw,46px)} .amsp-intro__now-callout svg{transform:rotate(-52deg) translate(-5px,8px);transform-origin:center} } @media(max-width:430px){ .amsp-intro__now-callout{grid-template-columns:64px minmax(0,auto);gap:0 8px;margin-right:3px} .amsp-intro__now-callout span{font-size:34px} .amsp-intro__now-callout small{font-size:10px} } /* Raise the soft blue-grey atmosphere to the second Contents row. The field still begins in true black and never resolves into a hard colour boundary. */ .edition-contents--atmosphere-gradient::before{ background:linear-gradient(to bottom, rgba(223,227,231,0) 0%, rgba(223,227,231,0) 24%, rgba(223,227,231,.025) 34%, rgba(223,227,231,.06) 48%, rgba(223,227,231,.11) 66%, rgba(223,227,231,.17) 84%, rgba(223,227,231,.23) 100%); } /* The Listening blue arrives gradually through the lower half of the project, becoming solid at the Room 001 threshold. The existing graph grid remains. */ #chance-of-katz{ background: linear-gradient(to bottom, var(--paper) 0%, var(--paper) 38%, #e7e5dc 51%, #dce3df 66%, #cadfe1 84%, var(--rain) 100%); } /* The three-part history is no longer placed over the lemon. Its native summary sits beside the lede on wide screens and directly below on phones; the open panel occupies reserved space beneath the photograph. */ .amsp-phl--locked .amsp-phl__essay-lede{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px clamp(18px,2vw,30px); align-items:start; max-width:78ch; margin:20px 0 0; padding-top:16px; border-top:1px solid rgba(240,226,15,.78); } .amsp-phl--locked .amsp-phl__essay-lede>p{ max-width:62ch; margin:0; color:#FCCE34; font-size:clamp(16px,1.45vw,22px); line-height:1.5; text-wrap:pretty; } .amsp-phl--locked .amsp-phl__essay-lede .amsp-phl__parts{ position:static; inset:auto; z-index:2; width:auto; max-width:none; margin:0; padding:0; border:0; background:transparent; color:var(--signal); } .amsp-phl__parts>summary{ display:grid; grid-template-columns:auto 28px; gap:10px; align-items:center; min-height:44px; padding:0 0 0 12px; border-left:1px solid var(--signal); color:var(--signal); cursor:pointer; list-style:none; font:600 10px/1.35 var(--mono); letter-spacing:.085em; text-transform:uppercase; white-space:nowrap; } .amsp-phl__parts>summary::-webkit-details-marker{display:none} .amsp-phl__parts>summary::marker{content:""} .amsp-phl__parts>summary:focus-visible{outline:3px solid var(--signal);outline-offset:4px} .amsp-phl__parts-mark{position:relative;width:28px;height:28px;border:1px solid currentColor} .amsp-phl__parts-mark::before, .amsp-phl__parts-mark::after{ content:""; position:absolute; top:50%; left:50%; background:currentColor; transform:translate(-50%,-50%); } .amsp-phl__parts-mark::before{width:12px;height:1px} .amsp-phl__parts-mark::after{width:1px;height:12px} .amsp-phl__parts[open] .amsp-phl__parts-mark::after{display:none} .amsp-phl--locked .amsp-phl__parts-panel{ position:absolute; top:calc(100% + 14px); left:0; width:min(100%,760px); padding:clamp(14px,1.6vw,20px); border:1px solid rgba(240,226,15,.76); background:rgba(5,10,14,.96); box-shadow:0 8px 28px rgba(0,0,0,.28); color:var(--signal); } .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-note, .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-hinge, .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-list li, .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-list li[aria-current]{color:var(--signal)} .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-list li:not([aria-current]){opacity:.78} .amsp-phl--locked .amsp-phl__intro--photo:has(.amsp-phl__parts[open]){ margin-bottom:clamp(190px,16vw,230px); overflow:visible; } .amsp-phl--locked .amsp-phl__intro--photo:has(.amsp-phl__parts[open]) .amsp-phl__photo-stage{overflow:visible} @media(max-width:860px){ .amsp-phl--locked .amsp-phl__essay-lede{grid-template-columns:1fr;gap:10px;margin-top:14px;padding-top:11px} .amsp-phl--locked .amsp-phl__essay-lede>p{max-width:48ch;font-size:clamp(14px,2.4vw,18px);line-height:1.42} .amsp-phl__parts>summary{width:max-content;max-width:100%;padding-left:0;border-left:0;border-top:1px solid rgba(240,226,15,.62)} .amsp-phl--locked .amsp-phl__parts-panel{top:calc(100% + 10px);width:100%;padding:13px 14px} .amsp-phl--locked .amsp-phl__intro--photo:has(.amsp-phl__parts[open]){margin-bottom:250px} } @media(max-width:620px){ .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-list{grid-template-columns:1fr;gap:7px;margin:10px 0} .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-list li{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:5px;align-items:baseline} .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-name, .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-span, .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-no{display:inline;margin:0;font-size:10px} .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-span::before, .amsp-phl--locked .amsp-phl__parts-panel .amsp-phl__parts-name::before{content:"·";margin-right:1px} } /* Rigatoni's transparent source contains generous outer space; the larger box makes the visible dog roughly half the note width while keeping him behind its top-right edge and clear of the lemon/title field. */ .amsp-phl__rigatoni-popout{ top:-286px; right:-8px; width:clamp(238px,21vw,300px); transform:translateY(118px) scale(.86); } .amsp-phl__publishing-note.is-rigatoni-open .amsp-phl__rigatoni-popout{ opacity:1; transform:none; } .amsp-phl__publishing-note.is-rigatoni-dismissed .amsp-phl__rigatoni-popout{ opacity:0; transform:translateY(118px) scale(.86); } @media(max-width:860px){ .amsp-phl__publishing-note{margin-top:92px} .amsp-phl__rigatoni-popout{top:-252px;right:-8px;width:min(70vw,276px)} } /* This is a sectional turn, not a second hero. */ .amsp-phl-story__turn{font-size:clamp(28px,3vw,42px);line-height:1.12} @media(max-width:620px){.amsp-phl-story__turn{font-size:clamp(28px,8vw,38px)}} /* A second footer line should read as a credit continuation, not a new band. */ .amsp-foot .credits+.credits{margin-top:10px;padding-top:0} /* About contact routes belong with the identity rather than at the bottom of the page. Labels stay quiet; addresses remain comfortably tappable. */ .about-id__links{display:grid;gap:7px;margin-top:10px} .about-id__links p{display:grid;gap:2px;margin:0} .about-id__links p:first-child{margin-bottom:2px} .about-id__links span{ color:var(--muted-deep); font:600 10px/1.35 var(--mono); letter-spacing:.085em; text-transform:uppercase; } .about-id__links a{width:max-content;max-width:100%;overflow-wrap:anywhere} @media(max-width:520px){ .about-id{align-items:flex-start} .about-id>div{min-width:0;width:100%} } /* 04.64m-r4 — two small launch refinements. The About identity gets a little more room without changing its phone stack. The Edition statement picks up a restrained yellow lift from the Continuum below; the overlay is visual only and never intercepts input. */ @media(min-width:1000px){ .about-page h1{max-width:none;white-space:nowrap} } .about-page .about-id{gap:30px} .about-page .about-id__portrait{width:112px;height:112px} @media(max-width:520px){ .about-page .about-id{gap:16px} } #edition.statement-compact{ position:relative; isolation:isolate; } #edition.statement-compact::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(to right,rgba(10,10,10,.075) 1px,transparent 1px), linear-gradient(to bottom,rgba(10,10,10,.075) 1px,transparent 1px), linear-gradient(to top,rgba(255,238,0,.42) 0%,rgba(255,238,0,.28) 58%,rgba(255,238,0,.20) 100%); background-size:24px 24px,24px 24px,auto; } #edition.statement-compact>.wrap{position:relative;z-index:1} #edition.statement-compact .amsp-sec__head>.eyebrow{color:var(--ink);opacity:1} /* 04.64m-r3 — prebuild corrections The Framing cue stacks before its two-column minimum can overrun the viewport. Small utility labels retain a 10px readability floor. */