/* Shared by the standalone project pages and their seamless in-page entrance. */
html { scrollbar-gutter:stable; }
html.case-locked { overflow: hidden; }
#portfolio-home-layer { display:contents; }
html.case-locked:not(.work-zoom-locked) #portfolio-home-layer { visibility:hidden; }
html.case-locked #portfolio-home-layer *,html.work-zoom-locked #ning-water-garden * { animation-play-state:paused!important; }
.case-page { --case-ink:#eee9df; --case-muted:#aab3b0; --case-gold:#bca47e; box-sizing:border-box; min-height:100svh; background:radial-gradient(ellipse at 88% 0,#303c3226,transparent 42%),#090f10; color:var(--case-ink); font:14px/1.65 Arial,"Microsoft YaHei",sans-serif; }
.case-page *, .case-page *::before, .case-page *::after { box-sizing:border-box; }
.case-page a { color:inherit; text-decoration:none; }
.case-page a:hover { color:#e1c594; }
.case-page a:focus-visible { outline:2px solid #d4b57e; outline-offset:6px; }
.case-page h1:focus { outline:none; }
.case-page.case-routed { position:fixed; inset:0; width:100vw; z-index:200; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.case-page.case-staged { opacity:0; pointer-events:none; }
.case-nav, .case-main { width:min(1280px,88%); margin-inline:auto; }
.case-nav { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:104px; }
.case-nav > a:first-child { min-height:44px; display:flex; align-items:center; gap:14px; font-size:12px; }
.case-signature { font:25px Georgia,serif; letter-spacing:-.04em; }
.case-signature span { color:var(--case-gold); }
.case-number, .case-eyebrow { font-size:10px; letter-spacing:.16em; color:var(--case-gold); text-transform:uppercase; }
.case-intro { padding:70px 0 48px; }
.case-eyebrow { margin:0 0 16px; }
.case-intro h1 { font:normal clamp(66px,9.3vw,140px)/1.08 Georgia,serif; letter-spacing:-.055em; margin:0 0 34px; overflow-wrap:anywhere; }
.case-intro-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
.case-intro-bottom p { max-width:520px; margin:0; font:normal clamp(18px,2vw,25px)/1.5 Georgia,serif; color:#d5d6ce; }
.case-discover { display:flex; gap:32px; align-items:center; min-height:44px; font-size:11px; white-space:nowrap; }
.case-discover span { font-size:20px; color:var(--case-gold); }
.case-cover, .case-sequence figure { margin:0; }
.case-cover img, .case-sequence img { display:block; width:100%; height:auto; background:#111919; }
.case-cover { border:1px solid #ac987536; }
.case-page figcaption { display:flex; justify-content:space-between; gap:20px; padding:14px 0; font-size:11px; color:var(--case-muted); }
.case-page figcaption a { text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.case-overview { display:grid; grid-template-columns:1fr 1.4fr; gap:10%; padding:94px 0 72px; scroll-margin-top:36px; }
.case-overview h2 { font:normal clamp(32px,4vw,53px)/1.2 Georgia,serif; letter-spacing:-.03em; margin:0; }
.case-description { font-size:17px; line-height:1.85; max-width:640px; margin:0 0 32px; color:#d5d6ce; }
.case-facts { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:0; padding-top:24px; }
.case-facts dt { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--case-gold); margin-bottom:12px; }
.case-facts dd { margin:0; color:var(--case-muted); font-size:13px; }
.case-facts-wide { grid-column:1/-1; }
.case-facts-wide dd { line-height:1.8; max-width:560px; }
.case-sequence { display:grid; gap:56px; }
.case-cover + .case-overview { padding-top:94px; }
.case-cover + .case-sequence:not(:empty) { margin-top:56px; }
.case-footer { margin-top:64px; padding:36px 0 62px; display:flex; justify-content:space-between; gap:32px; align-items:center; }
.case-footer > a:first-child { font-size:12px; }
.case-footer > a:last-child { text-align:right; }
.case-footer span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--case-gold); }
.case-footer strong { font:normal clamp(24px,3vw,40px)/1.6 Georgia,serif; }
.case-archive-note { color:var(--case-muted); padding:28px 0; font-size:12px; }
.case-skip { position:absolute; left:6%; top:-100px; padding:12px; z-index:2; background:#eee9df; color:#090f10!important; }
.case-skip:focus { top:12px; }
.case-resources { display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:30px; }
.case-resources a { display:inline-flex; align-items:center; gap:16px; min-height:44px; border-bottom:1px solid #c9b58c55; font-size:12px; }
.case-resources a span { color:var(--case-gold); }
.case-page[data-case="fellou"] { --case-gold:#b9a8e3; --chapter-nav-bg:#0c0d12; background:radial-gradient(ellipse at 88% 0,#38235130,transparent 32%),#0c0d12; }
.case-page[data-case="fellou"] .case-intro { padding-bottom:42px; }
.case-page[data-case="fellou"] .case-cover { border:0; }
.case-page[data-case="fellou"] .case-cover img { background:#100e1a; }
.case-page[data-case="fellou"] .case-overview { padding-top:76px; }
.fellou-story { --fellou-line:#b9a8e32b; }
.fellou-story h2 { margin:0; font:normal clamp(34px,4.1vw,56px)/1.13 Georgia,serif; letter-spacing:-.035em; }
.fellou-story h3 { margin:0 0 20px; font:normal clamp(27px,2.8vw,36px)/1.22 Georgia,serif; letter-spacing:-.025em; }
.fellou-story p:not(.case-eyebrow) { color:#b9bbc8; font-size:15px; line-height:1.85; margin:0; }
/* One background layer stays still while narrow chapter lists scroll inside it. */
.case-page .case-chapter-nav { display:block; position:sticky; top:0; z-index:20; isolation:isolate; padding-block:18px 36px; padding-inline:calc((100vw - 100%) / 2); margin-inline:calc((100% - 100vw) / 2); margin-bottom:62px; border:0; background:transparent; }
.case-page .case-chapter-nav::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:color-mix(in srgb,var(--chapter-nav-bg,#090f10) 90%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 18px),transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 18px),transparent 100%); }
.case-page .case-chapter-links { display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; gap:26px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.case-page .case-chapter-links::-webkit-scrollbar { display:none; }
.case-page .case-chapter-nav a { display:inline-flex; flex:none; align-items:center; gap:12px; min-height:44px; padding:0; font-size:14px; line-height:1.5; white-space:nowrap; }
.case-page .case-chapter-nav a > span:first-child { font:12px/1 monospace; color:var(--case-gold); }
.case-page .case-chapter-nav a > span[aria-hidden="true"] { display:none; }
.case-page[data-case] .case-chapter-nav a:focus-visible { outline-offset:-2px; }
html[data-appearance="light"] .case-page .case-chapter-nav { --chapter-nav-bg:var(--nz-bg); }
.fellou-chapter { margin-bottom:90px; padding-top:66px;  scroll-margin-top:110px; }
.fellou-chapter-head { display:grid; grid-template-columns:1fr 1.4fr; gap:10%; align-items:start; margin-bottom:42px; }
.fellou-chapter-head > p { max-width:580px; padding-top:32px; }
.fellou-identity { padding-top:0; border-top:0; }
.fellou-identity-art { display:grid; grid-template-columns:1fr 1.18fr; gap:30px; }
.fellou-identity-art > figure { display:flex; flex-direction:column; }
.fellou-direction { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr); gap:7%; margin-top:clamp(40px,5vw,72px); padding-top:36px; border-top:1px solid var(--fellou-line); }
.fellou-direction-head { min-width:0; }
.fellou-direction h3 { margin:0 0 22px; font:normal clamp(27px,2.8vw,36px)/1.25 Georgia,serif; letter-spacing:-.025em; color:var(--case-ink); }
.fellou-direction-head > p { max-width:38ch; }
.fellou-direction-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 36px; margin:0; padding:0; }
.fellou-direction-list > div { min-width:0; }
.fellou-direction-list dt { margin:0 0 12px; font:normal 20px/1.4 Georgia,serif; color:var(--case-ink); }
.fellou-direction-list dd { margin:0; font-size:var(--portfolio-small,15px); line-height:1.8; color:var(--case-muted); }
.fellou-figure.fellou-wordmarks > a { flex:1; display:flex; align-items:center; background:#fff; padding:clamp(20px,3vw,42px); }
.fellou-wordmarks img { background:#fff; }
.fellou-chapter-copy > p:not(.case-eyebrow) { margin-top:28px; max-width:420px; }
.fellou-detail { padding-top:25px; margin-top:34px; }
.fellou-detail > span { display:block; color:var(--case-gold); font-size:10px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:14px; }
.fellou-detail p { font-size:13px!important; max-width:370px; }
.fellou-figure { min-width:0; margin:0; }
.fellou-figure > a { display:block; }
.fellou-figure img { display:block; width:100%; height:auto; background:#202020; }
.fellou-poster-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 36px; }
.fellou-poster-grid .fellou-figure { padding:clamp(14px,2.3vw,32px) clamp(14px,2.3vw,32px) 4px; background:#16161c; border:1px solid #b9a8e315; }
.fellou-poster-grid figcaption { font-size:10px; gap:10px; }
.fellou-campaign-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:7%; align-items:stretch; }
.fellou-merchandise { display:flex; flex-direction:column; justify-content:space-between; gap:38px; }
.fellou-merchandise .fellou-detail { margin:0; border:0; padding-top:8px; }
.fellou-merchandise .fellou-detail p { max-width:390px; }
.fellou-badge-study { display:grid; grid-template-columns:1fr 1.4fr; gap:10%; align-items:center; margin-top:50px; padding:38px 0; }
.fellou-badge-study > .fellou-detail { border:0; margin:0; padding:0; }
.fellou-badge-pair { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.fellou-badge-pair a { border-radius:50%; transition:transform .25s ease; }
.fellou-badge-pair a:hover { transform:translateY(-4px); }
.fellou-badge-pair img { background:transparent; }
html[data-appearance="dark"] .fellou-badge-black > a { box-shadow:0 0 2px 2px rgba(255,255,255,.28); }
.fellou-badge-pair figcaption { justify-content:center; padding-bottom:0; }
.fellou-film { margin-bottom:0; }
.fellou-video { width:min(100%,848px); margin:0 auto; }
.fellou-video video { display:block; width:100%; height:auto; aspect-ratio:1920/1046; background:#100e1a; border:1px solid var(--fellou-line); }
.fellou-video video:focus-visible { outline:2px solid var(--case-gold); outline-offset:6px; }
.case-page[data-case="nexo"] { --case-ink:#ecf0ed; --case-gold:#b8cbd8; --case-muted:#9ca9ad; --nexo-line:#b8cbd82b; --nexo-bleed:clamp(20px,3vw,48px); --chapter-nav-bg:#0b1113; background:#0b1113; }
.case-page[data-case="nexo"] .case-intro { display:grid; grid-template-columns:1.2fr 1fr; gap:28px 7%; padding:90px 0 82px; }
.case-page[data-case="nexo"] .case-intro > .case-eyebrow { grid-column:1/-1; margin:0; }
.case-page[data-case="nexo"] .case-intro h1 { font:400 clamp(110px,14.6vw,214px)/.88 Arial,sans-serif; letter-spacing:-.085em; margin:0 0 0 -.065em; }
.case-page[data-case="nexo"] .case-intro-bottom { display:block; align-self:end; padding-bottom:4px; }
.case-page[data-case="nexo"] .case-intro-bottom p { max-width:360px; font-size:clamp(20px,2.15vw,30px); line-height:1.3; }
.case-page[data-case="nexo"] .case-discover { justify-content:space-between; max-width:360px; margin-top:22px; border-bottom:1px solid var(--nexo-line); }
.case-page[data-case="nexo"] .case-intro > .case-resources { grid-column:1/-1; margin:28px 0 0; gap:18px 42px; }
.case-page[data-case="nexo"] .case-intro > .case-resources a { border:0; font-size:11px; }
.case-page[data-case="nexo"] .case-cover { border:0; }
.case-page[data-case="nexo"] .case-cover figcaption { border:0; }
.case-page[data-case="nexo"] .case-overview { padding:130px 0 0; }
.case-page[data-case="nexo"] a:focus-visible,.case-page[data-case="nexo"] button:focus-visible { outline:2px solid #c1d4ec; outline-offset:5px; }
.case-page[data-case="nexo"] a:hover { color:#c1d4ec; }
.nexo-story { --nexo-line:#b8cbd82b; padding-top:96px; }
.nexo-story h2 { font:normal clamp(32px,3.9vw,52px)/1.15 Georgia,serif; letter-spacing:-.035em; margin:0; }
.nexo-story h3 { font:normal 29px/1.3 Georgia,serif; letter-spacing:-.02em; margin:0 0 18px; }
.nexo-story p:not(.case-eyebrow) { color:#bfc6c1; font-size:15px; line-height:1.85; margin:0; }
.nexo-credits,.nexo-chapter-head { display:grid; grid-template-columns:1fr 1.4fr; gap:10%; align-items:start; }
.nexo-credits { padding:66px 0 0; }
.nexo-credits h2 { font-size:clamp(30px,3vw,40px); }
.nexo-team { display:grid; grid-template-columns:1.7fr 1fr; gap:24px; padding-top:26px; margin:28px 0 0; }
.nexo-team dt { color:var(--case-gold); font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.nexo-team dd { margin:0; font-size:12px; color:var(--case-muted); }
.nexo-chapter { padding:0; margin-bottom:clamp(140px,16vw,220px); }
.nexo-chapter-head { margin-bottom:80px; }
.nexo-chapter--insight > .nexo-chapter-head { margin:76px 0 0; }
.nexo-chapter h2,.nexo-credits h2 { scroll-margin-top:40px; }
.nexo-chapter-head > p { padding-top:30px; max-width:560px; }
.nexo-figure { margin:0; }
.nexo-figure a { display:block; }
.nexo-figure img { width:100%; height:auto; display:block; background:#111919; }
.nexo-figure + .nexo-figure { margin-top:100px; }
.nexo-scenario { display:grid; grid-template-columns:.8fr 1.5fr; gap:10%; align-items:center; margin-top:120px; }
.nexo-note { max-width:320px; margin:0; }
.nexo-system-image { width:82%; margin-left:auto; }
.nexo-chapter[aria-labelledby="nexo-visual"] .nexo-figure + .nexo-figure { width:72%; margin-left:auto; }
.nexo-flow-heading { margin:90px 0 38px; }
.nexo-flow { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; margin:0; gap:26px; }
.nexo-flow li { padding:24px 0 0; border-top:2px solid #bdd6ff; }
.nexo-flow li:nth-child(2) { border-color:#ffc6e7; }.nexo-flow li:nth-child(3) { border-color:#ffe583; }.nexo-flow li:nth-child(4) { border-color:#b7c577; }
.nexo-flow li > span { color:var(--case-muted); font:12px monospace; }.nexo-flow h4 { font-size:20px; font-weight:400; margin:18px 0 10px; }
.nexo-flow p:not(.case-eyebrow) { font-size:13px; }
.nexo-prototype-gallery { --nexo-device-width:clamp(176px,calc((88vw - 180px) / 4),232px); --nexo-device-gap:clamp(32px,4.5vw,72px); margin:110px 0 90px; }
.nexo-screen-group + .nexo-screen-group { margin-top:160px; }
.nexo-screen-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:9%; margin:0 0 60px; }
.nexo-screen-heading .case-eyebrow { margin:0 0 18px; }
.nexo-screen-heading h3 { font:normal clamp(28px,2.8vw,36px)/1.15 Georgia,serif; letter-spacing:-.035em; margin:0; }
.nexo-screen-heading p:not(.case-eyebrow) { max-width:360px; font-size:13px; color:var(--case-muted); }
.nexo-screen-grid { display:grid; grid-template-columns:repeat(3,var(--nexo-device-width)); justify-content:space-evenly; gap:64px 0; margin:0; align-items:start; }
.nexo-screen-group--now .nexo-screen-heading { margin-bottom:72px; }
.nexo-screen-group--now .nexo-screen-grid { grid-template-columns:repeat(2,var(--nexo-device-width)); justify-content:center; gap:clamp(64px,10vw,144px); }
.nexo-screen-group--memory .nexo-screen-grid { grid-template-columns:repeat(4,var(--nexo-device-width)); justify-content:space-between; }
.nexo-screen-group--personal { width:100%; }
.nexo-screen { margin:0; width:var(--nexo-device-width); min-width:0; }
.nexo-screen > a { display:block; width:100%; border-radius:18% / 9%; transition:transform .25s ease; }
.nexo-screen > a:hover { transform:translateY(-5px); }
.nexo-screen img { display:block; width:100%; height:auto; background:transparent; }
.nexo-screen figcaption { align-items:baseline; gap:12px; color:var(--case-muted); padding-top:22px; }
.nexo-screen figcaption > span:first-child { display:flex; align-items:baseline; gap:12px; }
.nexo-screen figcaption small { font:10px/1.6 monospace; color:var(--case-gold); }
.nexo-screen figcaption > span:last-child { color:var(--case-gold); }
.nexo-prototype-link { display:flex; align-items:center; justify-content:space-between; gap:20px; width:min(100%,620px); margin-left:auto; border-bottom:1px solid var(--nexo-line); padding:26px 0; font:normal clamp(22px,2.8vw,35px)/1.35 Georgia,serif; }
.nexo-prototype-link small { display:block; font:10px/1.8 Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; color:var(--case-gold); margin-bottom:8px; }
.nexo-prototype-link > span:last-child { color:var(--case-gold); }
.nexo-closing { padding:70px var(--nexo-bleed); margin:0 calc(-1 * var(--nexo-bleed)) 180px; background:#10191c; scroll-margin-top:28px; }
.nexo-film-kicker { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:70px; }
.nexo-film-kicker .case-eyebrow { margin:0; }
.nexo-film-kicker > span { color:var(--case-muted); font:10px/1.5 monospace; text-transform:uppercase; letter-spacing:.08em; }
.nexo-film-spread { display:grid; grid-template-columns:1fr 1fr; gap:15%; align-items:center; width:90%; margin:auto; }
.nexo-film-copy { padding:0; }
.nexo-film-copy h2 { font-size:clamp(46px,5.1vw,66px); line-height:1.04; letter-spacing:-.045em; }
.nexo-film-copy h2 em { font-weight:normal; color:#b8cbd8; }
.nexo-film-copy > p:not(.case-eyebrow) { max-width:340px; font-size:14px; margin-top:28px; }
.nexo-film-play { display:flex; align-items:center; gap:15px; padding:0; margin:30px 0 34px; border:0; background:none; color:var(--case-ink); font:12px/1.5 Arial,sans-serif; cursor:pointer; }
.nexo-play-icon { display:grid; place-items:center; width:46px; height:46px; border:1px solid #a7bac577; border-radius:50%; font-size:11px; transition:background .2s,color .2s; }
.nexo-film-play:hover .nexo-play-icon { background:#c4d4df; color:#0b1113; }
.nexo-film-play small { color:var(--case-muted); font:10px monospace; margin-left:10px; }
.nexo-film-navigation { width:min(100%,340px); }
.nexo-film-navigation summary { display:flex; justify-content:space-between; gap:20px; align-items:center; min-height:48px; border-bottom:1px solid var(--nexo-line); cursor:pointer; list-style:none; font-size:11px; color:var(--case-muted); }
.nexo-film-navigation summary::-webkit-details-marker { display:none; }
.nexo-film-navigation summary span { font-size:18px; }
.nexo-film-navigation[open] summary span { transform:rotate(45deg); }
.nexo-film-navigation summary:focus-visible { outline:2px solid #c1d4ec; outline-offset:5px; }
.nexo-film-chapters { width:min(100%,390px); border-top:1px solid var(--nexo-line); }
.nexo-film-navigation .nexo-film-chapters { border-top:0; }
.nexo-film-chapters button { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:14px; width:100%; min-height:46px; padding:12px 0; border:0; border-bottom:1px solid var(--nexo-line); border-radius:0; background:none; color:var(--case-muted); font:11px/1.5 Arial,sans-serif; text-align:left; cursor:pointer; }
.nexo-chapter-dot { width:6px; height:6px; border-radius:50%; background:#bdd6ff; opacity:.4; }
.nexo-film-chapters button:nth-child(2) .nexo-chapter-dot { background:#ffc6e7; }
.nexo-film-chapters button:nth-child(3) .nexo-chapter-dot { background:#ffe583; }
.nexo-film-chapters button:nth-child(4) .nexo-chapter-dot { background:#b7c577; }
.nexo-film-chapters time { font:10px monospace; }
.nexo-film-chapters button:hover,.nexo-film-chapters button[aria-current] { color:var(--case-ink); }
.nexo-film-chapters button[aria-current] .nexo-chapter-dot { opacity:1; }
.nexo-film-copy .nexo-film-status { font-size:12px!important; }
.nexo-film-status:empty { display:none; }
.nexo-video { width:min(100%,390px); margin:0 0 0 auto; }
.nexo-video-mat { padding:0; }
.nexo-video video { display:block; width:100%; height:auto; aspect-ratio:540/727; background:#f1f1f1; }
.nexo-video video:focus-visible { outline:2px solid var(--case-gold); outline-offset:6px; }
.nexo-video figcaption { font-size:10px; letter-spacing:.025em; }
.nexo-resources { margin-top:100px; padding-top:36px; }
.nexo-resources > .case-eyebrow { color:var(--case-muted); }
.nexo-resources .case-resources { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:24px; }
.nexo-resources .case-resources a { display:flex; justify-content:space-between; align-items:center; gap:16px; border-color:var(--nexo-line); padding:0 0 16px; font-size:13px; }
.nexo-resources .case-resources a > span:first-child { color:var(--case-ink); }
.nexo-resources small { display:block; font:9px/1.5 monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--case-muted); margin-bottom:11px; }
.nexo-endmatter .nexo-concept-note { font-size:11px!important; margin-top:40px!important; color:var(--case-muted)!important; max-width:760px!important; }
@media(max-width:1000px) {
  .fellou-direction { grid-template-columns:1fr; gap:30px; }
  .fellou-direction-head { display:grid; grid-template-columns:1fr 1.4fr; gap:10%; align-items:start; }
  .fellou-direction-head > p { max-width:none; }
  .nexo-prototype-gallery { --nexo-device-width:min(232px,calc((88vw - 48px) / 2)); --nexo-device-gap:28px; }
  .nexo-screen-group--now .nexo-screen-heading { margin-bottom:60px; }
  .nexo-screen-grid,.nexo-screen-group--now .nexo-screen-grid,.nexo-screen-group--memory .nexo-screen-grid { grid-template-columns:repeat(2,var(--nexo-device-width)); justify-content:space-evenly; gap:64px 0; }
  .nexo-screen-group--personal .nexo-screen:last-child { grid-column:1/-1; margin-inline:auto; }
}
@media(max-width:760px) {
  .case-nav,.case-main { width:88%; }
  .case-nav { min-height:84px; gap:12px; }
  .case-number { display:none; }
  .case-signature { font-size:22px; }
  .case-intro { padding:46px 0 30px; }
  .case-intro h1 { font-size:clamp(52px,13vw,90px); margin-bottom:24px; }
  .case-intro-bottom { display:block; }
  .case-intro-bottom p { font-size:19px; }
  .case-discover { margin-top:20px; justify-content:space-between; }
  .case-overview { grid-template-columns:1fr; gap:28px; padding:50px 0; }
  .case-description { font-size:15px; }
  .case-page[data-case="fellou"] .case-intro { padding-bottom:30px; }
  .case-page[data-case="fellou"] .case-overview { padding-top:44px; }
  .case-page .case-chapter-nav { padding-block:6px 24px; margin-bottom:30px; }
  .case-page .case-chapter-links { gap:24px; }
  .case-page .case-chapter-nav a { gap:8px; }
  .case-page .case-chapter-nav a > span:first-child { display:none; }
  .fellou-chapter { padding-top:40px; margin-bottom:52px; scroll-margin-top:72px; }
  .fellou-chapter-head,.fellou-identity-art,.fellou-badge-study { grid-template-columns:1fr; gap:28px; }
  .fellou-chapter-head { margin-bottom:28px; }
  .fellou-chapter-head > p { padding-top:0; }
  .fellou-identity { padding-top:0; }
  .fellou-chapter-copy > p:not(.case-eyebrow) { margin-top:22px; }
  .fellou-story p:not(.case-eyebrow) { font-size:14px; }
  .fellou-identity-art { max-width:520px; margin-inline:auto; }
  .fellou-direction { margin-top:36px; padding-top:28px; gap:28px; }
  .fellou-direction-head { grid-template-columns:1fr; gap:16px; }
  .fellou-direction h3 { margin:0; }
  .fellou-direction-list { grid-template-columns:1fr; gap:24px; }
  .fellou-direction-list dt { font-size:20px; margin-bottom:8px; }
  .fellou-figure.fellou-wordmarks > a { padding:28px 20px; }
  .fellou-badge-study { margin-top:28px; padding:28px 0; }
  .fellou-badge-pair { width:min(100%,480px); margin-inline:auto; gap:20px; }
  .fellou-detail { margin-top:24px; padding-top:20px; }
  .fellou-poster-grid { gap:20px; }
  .fellou-poster-grid .fellou-figure { padding:12px 12px 2px; }
  .fellou-campaign-grid { gap:30px; }
  .fellou-merchandise { gap:26px; }
  .fellou-merchandise .fellou-detail { padding:0; }
  .fellou-film { margin-bottom:0; }
  .case-sequence { gap:28px; }
  .case-page figcaption { font-size:10px; }
  .case-footer { margin-top:38px; padding-bottom:40px; }
  .case-resources { gap:5px 24px; margin-top:24px; }
  .nexo-credits,.nexo-chapter-head { grid-template-columns:1fr; gap:24px; }
  .nexo-story { padding-top:64px; }
  .nexo-chapter--insight > .nexo-chapter-head { margin:48px 0 0; }
  .nexo-credits { padding:46px 0 0; }
  .nexo-team { grid-template-columns:1fr; gap:20px; }
  .nexo-chapter { padding:0; margin-bottom:110px; }
  .nexo-chapter-head { margin-bottom:52px; gap:32px; }
  .nexo-chapter-head > p { padding-top:0; }
  .nexo-story p:not(.case-eyebrow) { font-size:14px; }
  .nexo-system-image { width:100%; }
  .nexo-scenario { grid-template-columns:1fr; gap:32px; margin-top:72px; }
  .nexo-note { margin:0; max-width:440px; }
  .nexo-figure + .nexo-figure { margin-top:64px; }
  .nexo-chapter[aria-labelledby="nexo-visual"] .nexo-figure + .nexo-figure { width:88%; }
  .nexo-flow { grid-template-columns:1fr 1fr; gap:28px 24px; }
  .nexo-flow-heading { margin-top:64px; }
  .nexo-story h3 { font-size:25px; }
  .nexo-screen-heading { display:block; margin-bottom:38px; }
  .nexo-prototype-gallery { margin:70px 0 54px; }
  .nexo-screen-heading p:not(.case-eyebrow) { margin-top:18px; }
  .nexo-screen-group + .nexo-screen-group { margin-top:90px; }
  .nexo-screen-group--now .nexo-screen-heading { margin-bottom:42px; }
  .nexo-screen-group--personal { width:100%; }
  .nexo-screen-grid,.nexo-screen-group--now .nexo-screen-grid,.nexo-screen-group--memory .nexo-screen-grid { gap:48px 0; }
  .nexo-screen figcaption > span:first-child { gap:8px; }
  .case-page[data-case="nexo"] .case-intro { grid-template-columns:1fr; gap:32px; padding:58px 0 58px; }
  .case-page[data-case="nexo"] .case-intro h1 { font-size:clamp(110px,25vw,180px); }
  .case-page[data-case="nexo"] .case-intro-bottom { max-width:430px; }
  .case-page[data-case="nexo"] .case-intro > .case-resources { margin-top:0; gap:0 22px; }
  .case-page[data-case="nexo"] .case-overview { padding:82px 0 0; }
  .nexo-closing { padding-top:46px; padding-bottom:46px; margin-bottom:110px; }
  .nexo-film-kicker { margin-bottom:42px; }
  .nexo-film-spread { display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .nexo-film-copy { display:contents; }
  .nexo-film-copy h2 { font-size:clamp(46px,9vw,60px); order:0; }
  .nexo-film-copy > p:not(.case-eyebrow) { max-width:430px; margin:28px 0 42px; order:1; }
  .nexo-film-spread .nexo-video { order:2; margin:0 auto; width:min(100%,360px); }
  .nexo-film-play { order:3; margin:28px 0; }
  .nexo-film-navigation { order:4; width:100%; }
  .nexo-film-chapters { width:100%; }
  .nexo-film-copy .nexo-film-status { order:5!important; }
  .nexo-resources { margin-top:72px; }
  .nexo-resources .case-resources { grid-template-columns:1fr; gap:24px; }
}
@media(max-width:540px) {
  .nexo-screen figcaption { font-size:9px; }
  .nexo-screen figcaption > span:first-child { display:block; }
  .nexo-screen figcaption small { display:block; margin-bottom:5px; }
  .fellou-poster-grid,.fellou-campaign-grid { grid-template-columns:1fr; }
  .fellou-poster-grid .fellou-figure { padding:14px 14px 2px; }
  .fellou-video figcaption { gap:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .nexo-screen > a,.nexo-play-icon { transition:none; }
}

/* Scoped draft styles; append to the shared stylesheet when the originals arrive. */
.case-page[data-case="msu"] { --case-gold:#b6c7a1; --msu-line:#b6c7a12b; --chapter-nav-bg:#0d1512; background:#0d1512; }
.case-page[data-case="msu"] .case-intro { padding-block:90px 66px; }
.case-page[data-case="msu"] .case-cover { width:84%; margin-inline:auto; border:0; }
.case-page[data-case="msu"] .case-cover img { background:#345f29; }
.case-page[data-case="msu"] .case-overview { padding-block:110px 82px; }
.msu-story h2 { margin:0; font:normal clamp(32px,3.8vw,54px)/1.14 Georgia,serif; letter-spacing:-.035em; }
.msu-story p:not(.case-eyebrow) { color:#bbc6bb; font-size:15px; line-height:1.8; margin:0; }
.msu-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; padding-block:10px; margin-bottom:110px; }
.msu-index a { display:flex; align-items:center; gap:16px; min-height:56px; font-size:12px; }
.msu-index a span { color:var(--case-gold); font-size:11px; }
.msu-index a span:last-child { margin-left:auto; }
.msu-chapter { margin-bottom:clamp(120px,14vw,200px); scroll-margin-top:56px; }
.msu-chapter-head,.msu-role { display:grid; grid-template-columns:1.1fr 1fr; gap:12%; }
.msu-chapter-head { margin-bottom:68px; align-items:end; }
.msu-chapter-head > p { max-width:410px; }
.msu-figure { min-width:0; margin:0; }
.msu-figure a { display:block; }
.msu-figure img { display:block; width:100%; height:auto; }
.msu-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:36px; }
.msu-supporting { display:grid; grid-template-columns:1fr 3fr; gap:7%; align-items:center; margin-top:70px; }
.msu-story .msu-margin-note { font:italic 20px/1.6 Georgia,serif; color:var(--case-gold); }
.msu-ticket-stage { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:5%; padding:7%; background:#e8e4d9; }
.msu-ticket-stage .msu-figure:nth-child(2) { margin-top:21%; }
.msu-ticket-stage img { box-shadow:0 12px 30px #33220c1f; }
.msu-ticket-stage figcaption { color:#555a4f; padding-bottom:0; }
.msu-recruitment { width:78%; margin-inline:auto; }
.msu-event-pair { margin-top:72px; }
.msu-role { padding-top:55px; margin-bottom:100px; }
.msu-role h2 { font-size:clamp(30px,3vw,42px); }
.msu-role > div > p + p { margin-top:24px; }
@media(max-width:760px) {
  .case-page[data-case="msu"] .case-intro { padding-block:52px 40px; }
  .case-page[data-case="msu"] .case-cover { width:100%; }
  .case-page[data-case="msu"] .case-overview { padding-block:68px 48px; }
  .msu-index { display:block; margin-bottom:76px; padding-block:8px; }
  .msu-index a { min-height:46px; }
  .msu-chapter { margin-bottom:100px; }
  .msu-chapter-head,.msu-role { grid-template-columns:1fr; gap:26px; }
  .msu-chapter-head { margin-bottom:38px; }
  .msu-story p:not(.case-eyebrow) { font-size:14px; }
  .msu-pair { gap:32px; grid-template-columns:1fr; }
  .msu-supporting { display:block; margin-top:48px; }
  .msu-story .msu-margin-note { margin-bottom:30px; font-size:20px; }
  .msu-ticket-stage { grid-template-columns:1fr; padding:9%; gap:40px; }
  .msu-ticket-stage .msu-figure:nth-child(2) { margin-top:0; }
  .msu-recruitment { width:100%; }
  .msu-event-pair { margin-top:46px; }
  .msu-role { padding-top:38px; margin-bottom:70px; }
}

/* NExO product guidelines. All rules are scoped to this case section. */
@font-face { font-family:"Nexo Recursive"; src:url("assets/works/nexo/recursive-mono-latin-v1.woff2") format("woff2"); font-style:normal; font-weight:300 700; font-display:swap; }
.nexo-ds-jump { display:inline-flex; align-items:center; min-height:44px; margin:0 0 28px; color:var(--case-gold); font-size:13px; }
.nexo-ds { --nx-rule:color-mix(in srgb,var(--case-ink) 17%,transparent); --nx-panel:color-mix(in srgb,var(--case-ink) 4%,transparent); margin:0 0 130px; color:var(--case-ink); font:400 14px/1.75 Arial,"Microsoft YaHei",sans-serif; font-synthesis:none; }
.nexo-ds * { box-sizing:border-box; }
.nexo-ds img { max-width:100%; object-fit:contain; }
.nexo-ds a { text-decoration:none; }
.nexo-ds a:focus-visible { outline:2px solid var(--case-gold); outline-offset:5px; }
.nexo-story .nexo-ds p { font:400 14px/1.8 Arial,"Microsoft YaHei",sans-serif; color:var(--case-muted); margin:0; }
.nexo-story .nexo-ds h3 { color:var(--case-ink); font:600 clamp(25px,2.8vw,35px)/1.4 "Nexo Recursive","Microsoft YaHei",monospace; letter-spacing:-.025em; margin:0 0 16px; text-wrap:balance; }
.nexo-ds h4 { color:var(--case-ink); font:600 16px/1.55 "Nexo Recursive","Microsoft YaHei",sans-serif; margin:0 0 10px; }
.nexo-ds code { font:400 11px/1.6 "Nexo Recursive",monospace; white-space:nowrap; }
.nexo-ds-heading { display:grid; grid-template-columns:175px minmax(0,1fr); gap:36px; margin-bottom:35px; }
.nexo-ds-heading > span { color:var(--case-gold); font-size:10px; letter-spacing:.08em; padding-top:8px; }
.nexo-ds-heading p { max-width:730px; }
.nexo-story .nexo-ds .nexo-ds-kicker { font-size:10px; letter-spacing:.09em; color:var(--case-gold); margin-top:20px; }
.nexo-story .nexo-ds .nexo-ds-note { max-width:970px; font-size:12px; line-height:1.85; margin:22px 0 0; }
.nexo-ds-kicker + .nexo-ds-note { margin-top:6px!important; }
.nexo-ds-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 28px; margin:35px 0 65px; }
.nexo-ds-nav a { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:54px; padding:14px 0; font-size:13px; }
.nexo-ds-nav a > span { color:var(--case-gold); }
.nexo-ds-section { scroll-margin-top:36px; margin-top:80px; padding-top:42px; }
.nexo-ds-color-lead { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.nexo-ds-color-lead > article { min-height:245px; border-radius:20px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:28px; }
.nexo-ds-brand-dark { background:#000; color:#fff; }
.nexo-ds-brand-light { background:#fff; color:#000; border:1px solid #0000000e; }
.nexo-ds-brand-dark > img { width:90px; height:92px; margin-bottom:25px; }
.nexo-ds-brand-light > img { width:210px; height:92px; object-fit:contain; margin-bottom:25px; }
.nexo-story .nexo-ds .nexo-ds-color-lead p { color:inherit; font-size:13px; margin-bottom:6px; }
.case-page[data-case="nexo"] .nexo-ds-color-lead .nexo-ds-brand-dark p { color:#fff!important; }
.case-page[data-case="nexo"] .nexo-ds-color-lead .nexo-ds-brand-light p { color:#000!important; }
.nexo-ds-palette { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:42px 0; }
.nexo-ds-palette h4 { font-size:14px; }
.nexo-ds-palette article { min-width:0; }
.nexo-story .nexo-ds .nexo-ds-palette p { font-size:12px; }
.nexo-ds-swatch { display:flex; align-items:flex-end; height:150px; border-radius:16px; background:var(--swatch); color:#000; padding:17px; margin-bottom:20px; }
.nexo-ds-swatch span { font:400 12px "Nexo Recursive",monospace; }
.nexo-ds-contrast { display:grid; grid-template-columns:1fr 1fr; gap:45px; align-items:center; margin-top:32px; padding:28px 0; }
.nexo-ds-contrast-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.nexo-ds-contrast-list > div { display:flex; flex-direction:column; gap:12px; padding:20px 16px; border-radius:13px; color:#000; }
.nexo-ds-contrast-list b { font-size:13px; font-weight:400; }
.nexo-story .nexo-ds .nexo-ds-source { margin-top:14px; font-size:11px; }
.nexo-ds-type-specimens { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--nx-rule); margin-bottom:30px; }
.nexo-ds-type-specimens > div { display:flex; flex-direction:column; min-width:0; padding:28px 18px 30px; font-family:"Nexo Recursive",monospace; }
.nexo-ds-type-specimens > div + div { border-left:1px solid var(--nx-rule); }
.nexo-ds-type-specimens span { font-size:clamp(50px,6.5vw,90px); line-height:1.3; margin-bottom:22px; }
.nexo-ds-type-specimens b { font-size:13px; font-weight:inherit; }
.nexo-ds-type-specimens small { font-size:11px; margin-top:8px; overflow-wrap:anywhere; color:var(--case-muted); }
.nexo-ds-type-line { font:400 clamp(21px,3vw,40px)/1.6 "Nexo Recursive",monospace; padding:20px 0 25px; overflow-wrap:anywhere; }
.nexo-ds-type-line > span { font-size:14px; color:var(--case-muted); }
.nexo-ds-table-wrap { width:100%; margin-top:26px; }
.nexo-ds-table { border-collapse:collapse; width:100%; table-layout:fixed; font-size:12px; line-height:1.75; }
.nexo-ds-table th,.nexo-ds-table td { vertical-align:top; text-align:left; padding:17px 20px 17px 0; border-bottom:1px solid var(--nx-rule); overflow-wrap:anywhere; }
.nexo-ds-table th { font-weight:400; color:var(--case-ink); }
.nexo-ds-table thead th { color:var(--case-gold); font-size:11px; }
.nexo-ds-table td { color:var(--case-muted); }
.nexo-ds-table th:first-child { width:22%; }
.nexo-ds-table:has(th:nth-child(4)) th:nth-child(2) { width:24%; }
.nexo-ds-table:has(th:nth-child(4)) th:nth-child(3) { width:14%; }
.nexo-ds-table th:last-child,.nexo-ds-table td:last-child { padding-right:0; }
.nexo-ds-two { display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:36px; }
.nexo-story .nexo-ds .nexo-ds-two p { font-size:13px; }
.nexo-ds-mark-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:38px; }
.nexo-ds-mark-pair > div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:23px; border-radius:20px; background:#fff; padding:35px; }
.nexo-ds-mark-pair > div:last-child { background:#000; }
.nexo-ds-mark-pair img:first-child { width:110px; height:111px; }
.nexo-ds-mark-pair img:last-child { width:200px; height:88px; }
.nexo-ds-geometry { display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; }
.nexo-ds-clearspace { background:#eef3f9; border-radius:20px; padding:22px; margin:0; }
.nexo-ds-clearspace svg { display:block; width:100%; height:auto; }
.nexo-ds-clearspace figcaption { font-size:11px; line-height:1.7; color:#43566a; text-align:center; }
.nexo-ds-specs { margin:0; }
.nexo-ds-specs > div { padding:15px 0; border-bottom:1px solid var(--nx-rule); }
.nexo-ds-specs dt { font-weight:600; margin-bottom:6px; }
.nexo-ds-specs dd { font-size:13px; line-height:1.8; margin:0; color:var(--case-muted); }
.nexo-ds-icon-row { display:grid; grid-template-columns:repeat(4,40px) 1fr; gap:22px; align-items:center; margin-top:40px; }
.nexo-ds-icon-row svg { width:36px; height:36px; }
.nexo-story .nexo-ds .nexo-ds-icon-row p { font-size:12px; }
.nexo-ds-object { margin:0 0 35px; }
.nexo-ds-object > img { display:block; width:100%; height:auto; border-radius:18px; }
.nexo-ds-object figcaption { font-size:11px; color:var(--case-muted); margin-top:12px; }
.nexo-ds-material-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.nexo-ds-material-grid h4 { font-size:14px; }
.nexo-story .nexo-ds .nexo-ds-material-grid p { font-size:12px; }
.nexo-ds-material-sample { height:156px; border-radius:17px; display:grid; place-items:center; overflow:hidden; margin-bottom:22px; }
.nexo-ds-material-sample--matte { background:#131616; }
.nexo-ds-material-sample--matte i { width:138px; height:82px; border-radius:100%; transform:rotate(-18deg); background:linear-gradient(150deg,#5c6060,#252828 45%,#0c0e0e 90%); box-shadow:0 10px 20px #0005; }
.nexo-ds-material-sample--metal { background:#26292a; }
.nexo-ds-material-sample--metal i { width:70%; height:85px; border-radius:40% / 20%; transform:rotate(-12deg); background:linear-gradient(110deg,#2e3334,#c2c5c5 24%,#6d7778 48%,#acb0b0 69%,#343a3b); }
.nexo-ds-material-sample--interface { background:#f4f6fa; }
.nexo-ds-material-sample--interface i { width:65%; height:80px; border-radius:18px; background:#BDD6FF; }
.nexo-ds-view-heading,.nexo-ds-state-heading { padding-top:34px; margin-top:32px; border-top:1px solid var(--nx-rule); }
.nexo-ds-usage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px 25px; }
.nexo-ds-usage-grid h4 { font-size:14px; }
.nexo-story .nexo-ds .nexo-ds-usage-grid p { font-size:12px; }
.nexo-ds-usage-art { background:#f1f4f8; color:#000; min-height:175px; padding:20px; border-radius:17px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:20px; }
.nexo-ds-use-good h4 > span { color:#78a489; }
.nexo-ds-use-bad h4 > span { color:#be8289; }
.nexo-ds-mini-tile { background:#000; padding:13px; border-radius:22px; line-height:0; }
.nexo-ds-distort { transform:scale(1.7,.65); }
.nexo-ds-use-label { display:flex; align-items:center; gap:12px; background:#BDD6FF; border-radius:16px; padding:18px 14px; }
.nexo-ds-use-label > span { font:400 31px "Nexo Recursive",monospace; }
.nexo-ds-use-label b { font-size:12px; font-weight:400; max-width:64px; }
.nexo-ds-low-contrast { padding:24px; background:#FFCDE7; color:#fff; font-size:14px; border-radius:15px; }
.nexo-ds-correct-type { font:600 18px/1.55 "Nexo Recursive",monospace; }
.nexo-ds-wrong-type { font:italic 40px Georgia,serif; color:#3f5774; text-shadow:2px 2px 0 #c1c8e5; }
.nexo-ds-applications { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.nexo-ds-phone { background:var(--nx-panel); border-radius:22px; padding:24px; margin-bottom:25px; }
.nexo-ds-phone img { display:block; width:min(100%,218px); height:auto; margin:auto; }
.nexo-story .nexo-ds .nexo-ds-applications p { font-size:13px; }
.nexo-ds-states { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:30px; }
.nexo-ds-states > article { border-top:2px solid #BDD6FF; padding-top:16px; }
.nexo-ds-states > article:nth-child(2) { border-color:#FFCDE7; }
.nexo-ds-states > article:nth-child(3) { border-color:#FFE16D; }
.nexo-ds-states > article:nth-child(4) { border-color:#B3C577; }
.nexo-ds-states > article > span { color:var(--case-muted); font:400 11px "Nexo Recursive",monospace; }
.nexo-ds-states h4 { font-size:14px; margin-top:15px; }
.nexo-story .nexo-ds .nexo-ds-states p { font-size:12px; }
.nexo-ds-closing { padding:28px 0; margin-top:40px; }
.nexo-story .nexo-ds .nexo-ds-closing > p:first-child { color:var(--case-ink); font-size:17px; margin-bottom:10px; }
.nexo-story .nexo-ds .nexo-ds-closing > p + p { font-size:12px; max-width:850px; }
.nexo-ds-closing a { display:inline-flex; align-items:center; min-height:44px; font-size:12px; margin-top:10px; }
@media(max-width:1000px) {
  .nexo-ds-heading { grid-template-columns:135px minmax(0,1fr); gap:25px; }
  .nexo-ds-palette { grid-template-columns:1fr 1fr; }
  .nexo-ds-type-specimens { grid-template-columns:1fr 1fr; }
  .nexo-ds-type-specimens > div:nth-child(3) { border-left:0; }
  .nexo-ds-type-specimens > div:nth-child(n+3) { border-top:1px solid var(--nx-rule); }
  .nexo-ds-usage-grid { grid-template-columns:1fr 1fr; }
  .nexo-ds-states { grid-template-columns:1fr 1fr; gap:30px; }
  .nexo-ds-phone { padding:14px; }
}
@media(max-width:680px) {
  .nexo-ds { margin-bottom:80px; }
  .nexo-ds-heading { grid-template-columns:1fr; gap:14px; margin-bottom:26px; }
  .nexo-ds-section { margin-top:55px; padding-top:30px; }
  .nexo-ds-nav { grid-template-columns:1fr 1fr; gap:0 22px; margin-bottom:45px; }
  .nexo-ds-nav a { font-size:12px; }
  .nexo-ds-color-lead > article { padding:20px; min-height:215px; }
  .nexo-ds-brand-dark > img { width:76px; height:77px; }
  .nexo-ds-brand-light > img { width:160px; height:77px; }
  .nexo-ds-contrast,.nexo-ds-two,.nexo-ds-geometry { grid-template-columns:1fr; gap:26px; }
  .nexo-ds-palette { gap:26px 20px; }
  .nexo-ds-swatch { height:115px; padding:14px; }
  .nexo-ds-mark-pair > div { padding:25px 15px; gap:16px; }
  .nexo-ds-mark-pair img:first-child { width:80px; height:81px; }
  .nexo-ds-mark-pair img:last-child { width:145px; height:64px; }
  .nexo-ds-icon-row { grid-template-columns:repeat(4,36px); gap:20px; }
  .nexo-ds-icon-row > div { grid-column:1/-1; }
  .nexo-ds-material-grid { grid-template-columns:1fr; gap:28px; }
  .nexo-ds-material-grid article { display:grid; grid-template-columns:115px 1fr; gap:0 20px; }
  .nexo-ds-material-sample { grid-row:1/3; height:125px; margin:0; }
  .nexo-ds-material-sample--matte i { width:90px; }
  .nexo-ds-material-grid h4 { align-self:end; }
  .nexo-ds-applications { grid-template-columns:1fr; gap:30px; }
  .nexo-ds-applications > article { display:grid; grid-template-columns:minmax(120px,42%) 1fr; gap:0 24px; }
  .nexo-ds-phone { grid-row:1/3; margin-bottom:0; }
  .nexo-ds-applications h4 { align-self:end; }
  .nexo-ds-table th,.nexo-ds-table td { padding:14px 12px 14px 0; font-size:11px; }
  .nexo-ds-table:has(th:nth-child(4)) tr { display:grid; grid-template-columns:1fr 1.2fr .6fr; }
  .nexo-ds-table:has(th:nth-child(4)) th,.nexo-ds-table:has(th:nth-child(4)) td { width:auto; border:0; }
  .nexo-ds-table:has(th:nth-child(4)) tr { border-bottom:1px solid var(--nx-rule); }
  .nexo-ds-table:has(th:nth-child(4)) tbody tr > :last-child { grid-column:1/-1; padding-top:0; }
  .nexo-ds-table:has(th:nth-child(4)) thead tr > :last-child { display:none; }
}
@media(max-width:420px) {
  .nexo-ds-type-specimens > div { padding:23px 12px; }
  .nexo-ds-type-specimens b { font-size:11px; }
  .nexo-ds-color-lead { gap:10px; }
  .nexo-ds-color-lead > article { padding:16px; }
  .nexo-ds-usage-grid { grid-template-columns:1fr; }
  .nexo-ds-usage-art { min-height:150px; }
  .nexo-ds-material-grid article { grid-template-columns:95px 1fr; gap:0 16px; }
  .nexo-ds-applications > article { gap:0 16px; }
}

/* WORK PROJECT DESIGN GUIDELINES — native, static and scoped to four case studies. */
.case-page .work-ds { --work-line:color-mix(in srgb,var(--case-ink) 17%,transparent); --work-surface:color-mix(in srgb,var(--case-ink) 4%,transparent); margin:100px 0 30px; padding-top:64px; scroll-margin-top:32px; font-family:Arial,"Microsoft YaHei",sans-serif; }
.case-page .work-ds p { font-size:15px; line-height:1.85; color:var(--case-muted); margin:0; max-width:75ch; }
.case-page .work-ds h2 { font:400 clamp(34px,4.2vw,58px)/1.22 Georgia,"Songti SC",serif; letter-spacing:-.025em; margin:20px 0 22px; }
.case-page .work-ds h3 { font:400 clamp(26px,3vw,39px)/1.35 Georgia,"Songti SC",serif; margin:0 0 18px; letter-spacing:-.02em; }
.case-page .work-ds h4 { font:600 17px/1.55 Arial,"Microsoft YaHei",sans-serif; letter-spacing:0; color:var(--case-ink); margin:18px 0 10px; }
.case-page .work-ds-jump { display:flex; align-items:center; justify-content:space-between; width:fit-content; min-height:44px; padding:0 0 6px; margin:-40px 0 56px; border-bottom:1px solid var(--case-gold); font-size:13px; color:var(--case-ink); }
.case-page .work-ds-opening { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6%; margin-bottom:32px; }
.case-page .work-ds-kicker,.case-page .work-ds-heading > span { font:11px/1.6 Arial,sans-serif; letter-spacing:.1em; color:var(--case-gold); }
.case-page .work-ds-opening .work-ds-hero img { height:300px; background:var(--work-surface); }
.case-page .work-ds .work-ds-note { padding:16px 0 16px 20px; border-left:2px solid var(--work-accent); margin:28px 0; font-size:13px; max-width:90ch; }
.case-page .work-ds-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:34px 0 0; }
.case-page .work-ds-nav a { min-height:62px; padding:16px 8px; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--work-line); font-size:13px; }
.case-page .work-ds-nav a span { color:var(--case-muted); font-size:10px; }
.case-page .work-ds-nav a b { margin-left:auto; font-weight:400; }
.case-page .work-ds-section { margin-top:64px; padding-top:48px; scroll-margin-top:30px; }
.case-page .work-ds-heading { display:grid; grid-template-columns:210px 1fr; gap:4%; margin-bottom:36px; }
.case-page .work-ds-heading > span { padding-top:8px; }
.case-page .work-ds-palette,.case-page .work-ds-materials,.case-page .work-ds-usage,.case-page .work-ds-applications { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 24px; }
.case-page .work-ds-swatch { height:150px; padding:18px; display:flex; align-items:flex-end; border:1px solid #80808025; border-radius:2px; }
.case-page .work-ds-swatch code { font:12px/1.5 Arial,sans-serif; color:inherit; letter-spacing:.04em; }
.case-page .work-ds-palette p,.case-page .work-ds-materials p,.case-page .work-ds-usage p,.case-page .work-ds-applications p { font-size:14px; line-height:1.8; }
.case-page .work-ds-contrast { margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.case-page .work-ds-contrast h4 { margin-top:0; }
.case-page .work-ds-contrast-sample { display:flex; flex-direction:column; justify-content:center; gap:20px; padding:30px; min-height:150px; }
.case-page .work-ds-contrast-sample strong { font:500 22px/1.5 Arial,"Microsoft YaHei",sans-serif; color:inherit; }
.case-page .work-ds-contrast-sample code { font:11px/1.5 Arial,sans-serif; color:inherit; }
.case-page .work-ds-type-board { display:grid; grid-template-columns:1fr 1.6fr; gap:5%; align-items:center; padding:38px; margin-bottom:30px; background:var(--work-surface); border-block:1px solid var(--work-line); }
.case-page .work-ds-letter { display:flex; flex-direction:column; gap:12px; }
.case-page .work-ds-letter > span { font:400 clamp(70px,10vw,132px)/1 Arial,sans-serif; letter-spacing:-.07em; }
.case-page .work-ds-type-board small { display:block; font:12px/1.7 Arial,sans-serif; color:var(--case-muted); }
.case-page .work-ds-type-sample strong { display:block; font:700 clamp(22px,3.2vw,40px)/1.3 Arial,sans-serif; margin-bottom:12px; letter-spacing:-.025em; }
.case-page .work-ds .work-ds-type-sample p { font:400 17px/1.6 Arial,sans-serif; margin-bottom:20px; }
.case-page .work-ds--editorial .work-ds-letter > span,.case-page .work-ds--editorial .work-ds-type-sample strong { font-family:Georgia,serif; }
.case-page .work-ds-table-wrap { overflow:auto; }
.case-page .work-ds table { width:100%; border-collapse:collapse; font-size:13px; text-align:left; }
.case-page .work-ds caption { text-align:left; font-size:12px; color:var(--case-muted); padding-bottom:16px; }
.case-page .work-ds th,.case-page .work-ds td { border-bottom:1px solid var(--work-line); padding:17px 14px 17px 0; font-weight:400; vertical-align:top; }
.case-page .work-ds thead th { font-size:11px; color:var(--case-muted); }
.case-page .work-ds tbody th { width:22%; font-weight:600; }
.case-page .work-ds td:nth-child(2) { width:20%; font-variant-numeric:tabular-nums; }
.case-page .work-ds td:nth-child(3) { width:12%; }
.case-page .work-ds-identity { display:grid; grid-template-columns:1.1fr 1fr; gap:5%; align-items:start; }
.case-page .work-ds-figure { margin:0; min-width:0; }
.case-page .work-ds-figure a { display:block; }
.case-page .work-ds-figure img { display:block; width:100%; height:320px; object-fit:contain; background:#f7f7f5; }
.case-page .work-ds-figure figcaption { font-size:11px; line-height:1.6; display:flex; gap:16px; justify-content:space-between; padding:12px 0; color:var(--case-muted); }
.case-page .work-ds-figure figcaption span { flex:none; }
.case-page .work-ds-rules { margin:0; }
.case-page .work-ds-rules > div { display:grid; grid-template-columns:160px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--work-line); }
.case-page .work-ds-rules dt { font-size:14px; font-weight:600; }
.case-page .work-ds-rules dd { font-size:14px; line-height:1.85; margin:0; color:var(--case-muted); }
.case-page .work-ds-identity .work-ds-rules > div { grid-template-columns:110px 1fr; gap:20px; padding-top:0; padding-bottom:18px; margin-bottom:18px; }
.case-page .work-ds-material { height:140px; display:grid; place-items:center; overflow:hidden; background:var(--work-surface); }
.case-page .work-ds-material i { display:block; width:88px; height:88px; background:var(--work-accent); border-radius:24px; }
.case-page .work-ds-material--glass { background:#242739; }
.case-page .work-ds-material--glass i { border-radius:50%; background:conic-gradient(#f9d294,#8b89b2,#a8dce5,#bb9dea,#f9d294); box-shadow:inset 0 0 0 20px #292e4c; }
.case-page .work-ds-material--spectrum i { width:100%; height:100%; border-radius:0; background:linear-gradient(115deg,#e9af66,#aa8dd0 50%,#93cbd5); }
.case-page .work-ds-material--paper { background:#e9e5dd; }.case-page .work-ds-material--paper i { background:#faf6ec; border-radius:0; transform:rotate(-8deg); box-shadow:4px 7px 0 #0000000d; }
.case-page .work-ds-material--matte i { border-radius:35px 16px; background:linear-gradient(120deg,#d6e6dd,#9eafa6); }
.case-page .work-ds-material--soft i { width:122px; height:64px; border-radius:50%; background:#accabc; box-shadow:inset 0 -8px 14px #58796933; }
.case-page .work-ds-material--metal i { background:linear-gradient(120deg,#a9b0ac,#e6ebe8 40%,#7e8883); border-radius:50%; box-shadow:inset 0 0 0 26px #acb4af; }
.case-page .work-ds-material--flat i { width:126px; height:72px; background:#b9d8e8; border-radius:18px; }
.case-page .work-ds-material--ink { background:#f5f1e8; }.case-page .work-ds-material--ink i { background:none; border:2px solid #181b18; border-radius:47% 53% 60% 40%; transform:rotate(-12deg); }
.case-page .work-ds-material--aged { background:#3b3030; }.case-page .work-ds-material--aged i { background:linear-gradient(90deg,#8e6d53,#b29878,#76624f); border-radius:3px; }
.case-page .work-ds-material--reflective { background:#19131b; }.case-page .work-ds-material--reflective i { width:130px; background:linear-gradient(135deg,#25202e 15%,#b754b8 16%,#ede0f1 32%,#65c7cc 33%,#3b2153 60%,#cc8ebb 85%); border-radius:0; }
.case-page .work-ds-material--screen { background:#19131b; }.case-page .work-ds-material--screen i { width:140px; background:radial-gradient(ellipse,#ee8969,#953c5e 55%,#302430); border:8px solid #343136; border-radius:10px; }
.case-page .work-ds-view-heading { margin:48px 0 28px; max-width:80ch; }
.case-page .work-ds-view-heading h4 { font-size:22px; }
.case-page .work-ds-views { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:24px; margin-bottom:22px; }
.case-page .work-ds-views img { height:330px; }
.case-page .work-ds-fold { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:30px; min-height:180px; background:#f5f1e8; color:#181b18; }
.case-page .work-ds-fold > div { display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:20px; border-right:1px dashed #181b1845; }
.case-page .work-ds-fold > div:last-child { border-right:0; background:#bdd1b4; }.case-page .work-ds-fold > div:nth-child(2) { background:#f4e6ac; }.case-page .work-ds-fold > div:nth-child(3) { background:#b9d8e8; }.case-page .work-ds-fold > div:nth-child(4) { background:#e8bcd0; }
.case-page .work-ds-fold span { font-size:11px; }.case-page .work-ds-fold b { font-size:15px; color:#181b18; font-weight:500; }
.case-page .work-ds-flow { display:grid; grid-template-columns:1.1fr 26px 1fr 26px 1fr; gap:12px; align-items:center; margin:32px 0; }
.case-page .work-ds-flow article { padding:24px; background:var(--work-surface); border:1px solid var(--work-line); }
.case-page .work-ds-flow > div { display:grid; gap:12px; }.case-page .work-ds-flow > span { text-align:center; }.case-page .work-ds-flow b { font-weight:600; font-size:16px; }.case-page .work-ds-flow p { font-size:12px; margin-top:5px; }
.case-page .work-ds-usage-art { display:flex; align-items:center; justify-content:center; height:165px; background:#ecebe6; color:#25272b; overflow:hidden; border-radius:2px; }
.case-page .work-ds-status { display:flex; gap:8px; align-items:center; font-size:11px; margin-top:16px; color:var(--case-muted); }
.case-page .work-ds-status b { border:1px solid currentColor; border-radius:50%; width:20px; height:20px; display:grid; place-items:center; font-size:14px; line-height:1; font-weight:400; }
.case-page .work-ds-usage h4 { margin-top:9px; }
.case-page .work-ds-art-source { width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.case-page .work-ds-art-source img { width:78%; height:80%; object-fit:contain; background:white; }
.case-page .work-ds-art-stretch img { transform:scale(1.2,.5); }.case-page .work-ds-art-cropped img { transform:scale(2); }
.case-page .work-ds-art-sequence { display:flex; align-items:center; gap:14px; }.case-page .work-ds-art-sequence b { font:400 20px/1 Arial,sans-serif; padding:15px 10px; border-bottom:2px solid #627b66; }.case-page .work-ds-art-sequence i { font-style:normal; font-size:13px; }
.case-page .work-ds-art-label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 12px; padding:22px; background:#fff; max-width:92%; }.case-page .work-ds-art-label span { grid-row:span 2; font-size:28px; }.case-page .work-ds-art-label strong { font:600 14px/1.5 Arial,"Microsoft YaHei",sans-serif; color:#25272b; }.case-page .work-ds-art-label small { font:12px/1.5 Arial,"Microsoft YaHei",sans-serif; color:#555b60; }
.case-page .work-ds-art-crowded { position:relative; width:100%; height:100%; display:grid; place-items:center; overflow:hidden; background:#282b43; }.case-page .work-ds-art-crowded i { position:absolute; width:190px; height:190px; border-radius:50%; border:24px solid #d6a250; transform:rotate(30deg); left:10%; top:35px; }.case-page .work-ds-art-crowded i:nth-child(2) { border-color:#a3cfdd; left:25%; top:-60px; }.case-page .work-ds-art-crowded i:nth-child(3) { border-color:#b998df; left:60%; top:-10px; }.case-page .work-ds-art-crowded strong { position:relative; color:#fff; font:700 26px/1 Arial,sans-serif; mix-blend-mode:overlay; }
.case-page .work-ds-art-tiny { font:6px/1.4 Arial,sans-serif; max-width:150px; }.case-page .work-ds-art-claim { display:grid; gap:15px; text-align:center; }.case-page .work-ds-art-claim b { font-size:34px; }.case-page .work-ds-art-claim small { font-size:12px; }.case-page .work-ds-art-flash { display:flex; width:100%; height:100%; }.case-page .work-ds-art-flash i { flex:1; background:#fafafa; }.case-page .work-ds-art-flash i:nth-child(even) { background:#262231; }.case-page .work-ds-art-repeat { font-size:36px; letter-spacing:.2em; color:#aa4a6d; }
.case-page .work-ds-applications img { height:300px; }.case-page .work-ds--editorial .work-ds-applications img { height:400px; object-fit:contain; background:var(--work-surface); }
.case-page #fellou-ds-application .work-ds-figure img { background:transparent; }
.case-page .work-ds-applications figcaption { font-size:15px; color:var(--case-ink); }
.case-page .work-ds-state-title { margin:48px 0 24px; }
.case-page .work-ds-states { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.case-page .work-ds-states article { padding-top:18px; border-top:1px solid var(--work-line); }.case-page .work-ds-states article > span { font-size:11px; color:var(--case-gold); }.case-page .work-ds-states p { font-size:13px; }
.case-page .work-ds-footer { margin-top:54px; padding-top:24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; font-size:12px; }.case-page .work-ds-footer a { min-height:44px; display:flex; align-items:center; }
@media(max-width:1000px) { .case-page .work-ds-heading { grid-template-columns:160px 1fr; }.case-page .work-ds-palette,.case-page .work-ds-usage { grid-template-columns:repeat(2,minmax(0,1fr)); }.case-page .work-ds-identity { grid-template-columns:1fr; gap:24px; }.case-page .work-ds-identity .work-ds-rules > div { grid-template-columns:140px 1fr; }.case-page .work-ds-states { grid-template-columns:repeat(2,minmax(0,1fr)); }.case-page .work-ds-opening .work-ds-hero img { height:260px; }.case-page .work-ds-flow { grid-template-columns:1fr; }.case-page .work-ds-flow > div { grid-template-columns:1fr 1fr; }.case-page .work-ds-flow > span { transform:rotate(90deg); }.case-page .work-ds-fold > div { padding:14px 10px; } }
@media(max-width:680px) { .case-page .work-ds { margin-top:64px; padding-top:38px; }.case-page .work-ds-jump { margin-top:-20px; margin-bottom:36px; }.case-page .work-ds-opening { grid-template-columns:1fr; gap:26px; }.case-page .work-ds-opening .work-ds-hero img { height:230px; }.case-page .work-ds h2 { font-size:34px; }.case-page .work-ds h3 { font-size:27px; }.case-page .work-ds-heading { grid-template-columns:1fr; gap:16px; margin-bottom:26px; }.case-page .work-ds-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }.case-page .work-ds-nav a { gap:8px; padding-inline:3px; font-size:12px; }.case-page .work-ds-section { margin-top:42px; padding-top:34px; }.case-page .work-ds-palette { gap:26px 16px; }.case-page .work-ds-swatch { height:110px; padding:12px; }.case-page .work-ds-palette h4 { font-size:15px; }.case-page .work-ds-palette p { font-size:13px; }.case-page .work-ds-contrast { grid-template-columns:1fr; gap:18px; }.case-page .work-ds-contrast-sample { padding:24px; }.case-page .work-ds-type-board { grid-template-columns:1fr; padding:24px; gap:28px; }.case-page .work-ds-letter { flex-direction:row; align-items:flex-end; justify-content:space-between; gap:20px; }.case-page .work-ds-letter > span { font-size:82px; }.case-page .work-ds table { font-size:12px; }.case-page .work-ds th,.case-page .work-ds td { padding:14px 7px 14px 0; }.case-page .work-ds tbody th { width:23%; }.case-page .work-ds td:nth-child(2) { width:25%; }.case-page .work-ds td:nth-child(3) { width:13%; }.case-page .work-ds-rules > div,.case-page .work-ds-identity .work-ds-rules > div { grid-template-columns:1fr; gap:8px; }.case-page .work-ds-figure img,.case-page .work-ds-views img { height:260px; }.case-page .work-ds-materials,.case-page .work-ds-applications { grid-template-columns:1fr; gap:30px; }.case-page .work-ds-material { height:120px; }.case-page .work-ds-usage { gap:26px 16px; }.case-page .work-ds-usage-art { height:130px; }.case-page .work-ds-usage h4 { font-size:15px; }.case-page .work-ds-usage p { font-size:13px; }.case-page .work-ds-art-label { padding:13px; display:block; }.case-page .work-ds-art-label span { display:none; }.case-page .work-ds-art-label strong { font-size:12px; }.case-page .work-ds-art-label small { display:block; font-size:10px; margin-top:4px; }.case-page .work-ds-art-sequence { gap:5px; }.case-page .work-ds-art-sequence b { font-size:14px; padding:8px 3px; }.case-page .work-ds-art-crowded strong { font-size:17px; }.case-page .work-ds-art-repeat { font-size:26px; letter-spacing:0; }.case-page .work-ds-fold { min-height:155px; }.case-page .work-ds-fold b { font-size:12px; overflow-wrap:anywhere; }.case-page .work-ds-flow article { padding:18px; }.case-page .work-ds-flow b { font-size:14px; }.case-page .work-ds-states { gap:26px 18px; }.case-page .work-ds-states h4 { font-size:16px; }.case-page .work-ds-applications img { height:320px; }.case-page .work-ds--editorial .work-ds-applications img { height:420px; } }

.case-page .work-ds-art-overprint { position:relative; width:100%; height:100%; overflow:hidden; display:grid; place-items:center; }
.case-page .work-ds-art-overprint img { position:absolute; width:100%; height:100%; object-fit:cover; }
.case-page .work-ds-art-overprint strong { position:relative; font:700 28px/1 Arial,sans-serif; color:#919caa; }
.case-page .work-ds-material--glass i { display:grid; place-items:center; box-shadow:none; }
.case-page .work-ds-material--glass i::after { content:""; width:48px; height:48px; border-radius:50%; background:#292e4c; }

/* Original typography references and guidelines placed beside related case content. */
.case-page .work-ds-continuation { margin-top:48px; padding-top:0; border-top:0; }
.case-page .work-ds-continuation > .work-ds-section:first-child { margin-top:0; }
.case-page .study-section .work-ds-continuation { margin-bottom:44px; }
.case-page .work-type-evidence { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:center; margin:0 0 34px; padding:28px; background:var(--work-surface); }
.case-page .work-type-evidence figure { margin:0; min-width:0; }
.case-page .work-type-evidence img { display:block; width:100%; height:auto; max-height:290px; object-fit:contain; }
.case-page .work-type-evidence h4 { margin:14px 0 12px; font-size:21px; }
.case-page .work-type-evidence figcaption { padding-top:14px; font-size:12px; line-height:1.6; }
.case-page .work-type-evidence p { font-size:14px; }
.case-page .work-ds td:nth-child(3) { width:16%; }
@media(max-width:760px) { .case-page .work-type-evidence { grid-template-columns:1fr; padding:20px; gap:24px; }.case-page .work-ds-continuation { margin-top:36px; }.case-page .work-ds td:nth-child(3) { width:18%; } }

/* Hiring review: concise facts, visible contribution and optional specifications. */
.case-page .case-snapshot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0 0 44px;padding:24px 0;}
.case-snapshot dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--case-gold);margin-bottom:10px}
.case-snapshot dd{font-size:14px;line-height:1.65;margin:0;color:var(--case-muted)}
.case-page .case-role-story{display:grid;grid-template-columns:1fr 1.4fr;gap:10%;padding:40px 0 54px;margin-bottom:46px}
.case-page .case-role-story h2,.case-page .case-delivery h2{font-size:clamp(30px,3vw,42px);line-height:1.25;margin:16px 0 0}
.case-role-story p:not(.case-eyebrow){margin:0 0 18px;line-height:1.8}
.case-page .nexo-story>.nexo-credits:first-child{margin-bottom:70px;padding-top:40px}
.case-delivery{margin:64px 0;padding:44px 0;}
.case-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:6%;margin-top:36px}
.case-result-grid strong{display:block;font:normal clamp(36px,4.5vw,64px)/1.2 Georgia,serif;color:var(--case-ink)}
.case-result-grid strong small{font:14px Arial,sans-serif}.case-page .case-result-grid h3{font:500 16px/1.5 Arial,sans-serif;margin:16px 0 10px}.case-result-grid p{max-width:44ch}
.case-page[data-case="fellou"] .case-result-grid strong{font-family:"Times New Roman",serif;font-variant-numeric:lining-nums tabular-nums;line-height:1}
.case-page[data-case="fellou"] .case-result-grid .case-time-metric{display:flex;align-items:baseline;gap:.2em;white-space:nowrap}
.case-time-metric .case-metric-arrow{align-self:center;width:.7em;height:.3em;flex:none;stroke:currentColor;stroke-width:1.5;fill:none}
.case-time-metric small{margin-left:.15em}
.case-page .case-guidelines{margin:40px 0;}
.case-guidelines>summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;padding:20px 0;list-style:none;cursor:pointer;color:var(--case-ink)}
.case-guidelines>summary::-webkit-details-marker{display:none}
.case-guidelines>summary strong{font-size:16px;font-weight:500;line-height:1.5}.case-guidelines>summary small{display:block;font-size:12px;line-height:1.6;margin-top:5px;color:var(--case-muted)}
.case-guidelines>summary>b{font:normal 26px/1 Arial;flex-shrink:0;transition:transform .2s ease}
.case-guidelines[open]>summary>b{transform:rotate(45deg)}
.case-guidelines>summary:focus-visible{outline:2px solid var(--case-gold);outline-offset:4px}
.case-page .case-guidelines-content>.work-ds,.case-page .case-guidelines-content>.nexo-ds,.case-page .case-guidelines-content>.mood-ds{margin-top:0;padding-top:26px;border-top:0}
.case-guidelines-content{padding-bottom:24px}.case-validation-content{padding:8px 0 28px}.case-validation-content ol{padding-left:22px;display:grid;grid-template-columns:1fr 1fr;gap:20px 48px}
.case-validation-content li{padding-left:6px}.case-page .case-validation-content h4{font-size:16px;margin:10px 0}.case-page .case-validation-content p{font-size:14px;line-height:1.8}
@media(max-width:760px){.case-page .case-snapshot{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.case-snapshot div{display:grid;grid-template-columns:90px 1fr;gap:16px}.case-snapshot dt{margin:3px 0 0}.case-page .case-role-story{grid-template-columns:1fr;gap:24px;padding:20px 0 30px}.case-page .nexo-story>.nexo-credits:first-child{margin-bottom:46px}.case-result-grid{grid-template-columns:1fr;gap:30px}.case-validation-content ol{grid-template-columns:1fr}.case-page .case-guidelines{margin:28px 0}.case-guidelines>summary small{max-width:40ch}}
@media(prefers-reduced-motion:reduce){.case-guidelines>summary>b{transition:none}}
@media print{.case-guidelines>div{display:block!important}.case-guidelines{break-inside:auto}.case-guidelines>summary>b{display:none}}

/* Editorial case studies, using supplied originals and portfolio artwork. */
.case-page:is([data-case="solitude"],[data-case="stone-roses"],[data-case="ms-tomato"],[data-case="mood-tracker"]) { --study-line:color-mix(in srgb,var(--case-gold) 23%,transparent); --study-panel:#ffffff05; }
.case-page[data-case="solitude"] { --case-gold:#d6c585; --study-paper:#d0b99d; --chapter-nav-bg:#101713; background:#101713; }
.case-page[data-case="stone-roses"] { --case-gold:#b7cbb7; --study-paper:#f3faf9; --chapter-nav-bg:#101718; background:#101718; container-type:inline-size; }
.case-page[data-case="ms-tomato"] { --case-gold:#f0a595; --study-paper:#070707; --chapter-nav-bg:#100f13; background:#100f13; }
.case-page[data-case="mood-tracker"] { --case-gold:#c0b8ed; --study-paper:#eeeafa; --chapter-nav-bg:#13141d; background:#13141d; }
.case-page:is([data-case="solitude"],[data-case="stone-roses"],[data-case="ms-tomato"],[data-case="mood-tracker"]) .case-intro { padding-block:76px 56px; }
.case-page:is([data-case="solitude"],[data-case="stone-roses"],[data-case="ms-tomato"],[data-case="mood-tracker"]) .case-cover { border:0; }
.case-page:is([data-case="solitude"],[data-case="stone-roses"],[data-case="ms-tomato"],[data-case="mood-tracker"]) .case-cover img { width:100%; max-height:740px; aspect-ratio:16/10; object-fit:contain; background:var(--study-paper); }
.case-page[data-case="ms-tomato"] .case-cover img { object-fit:cover; }
.stone-cover-art { position:relative; aspect-ratio:16/10; max-height:740px; overflow:hidden; background:var(--study-paper); }
/* Bleed one display pixel beyond the frame to hide the antialiased cut edge. */
.case-page[data-case="stone-roses"] .case-cover .stone-cover-art img { position:absolute; left:0; bottom:0; width:110%; height:auto; max-width:none; max-height:none; aspect-ratio:auto; background:transparent; transform:translateY(calc(var(--cover-transparent-foot) + 1px)); }
.case-page:is([data-case="solitude"],[data-case="stone-roses"],[data-case="ms-tomato"],[data-case="mood-tracker"]) .case-overview { padding-block:100px 86px; }
.study-story { padding-bottom:32px; }
.study-story h2 { font:normal clamp(34px,4.5vw,66px)/1.08 Georgia,serif; letter-spacing:-.035em; margin:0; text-wrap:balance; }
.study-story h3 { font:normal clamp(24px,2.5vw,34px)/1.22 Georgia,serif; letter-spacing:-.025em; margin:0 0 17px; }
.study-story p:not(.case-eyebrow) { color:var(--case-muted); font-size:15px; line-height:1.85; margin:0; }
.study-index { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; padding-block:18px; margin-bottom:clamp(90px,10vw,150px); }
.study-index a { min-height:44px; display:flex; align-items:center; gap:14px; font-size:11px; }
.study-index a span { color:var(--case-gold); font-size:10px; }
.study-index a span:last-child { margin-left:auto; }
.study-section { margin-bottom:clamp(110px,12vw,178px); scroll-margin-top:50px; }
.study-heading { max-width:820px; margin-bottom:58px; }
.study-heading > p:not(.case-eyebrow) { max-width:620px; margin-top:28px; }
.study-figure { margin:0; min-width:0; }
.study-figure > a { display:block; }
.study-figure img { width:100%; height:auto; display:block; }
.study-figure figcaption { line-height:1.6; font-size:11px; padding-top:16px; }
.study-figure figcaption span:last-child { color:var(--case-gold); }
.study-wide { width:100%; }
.study-triptych { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.study-triptych:not(.study-comparison) img { aspect-ratio:16/10; object-fit:cover; }
.study-spread { display:grid; grid-template-columns:1.35fr 1fr; gap:9%; align-items:center; margin-top:60px; }
.study-spread-reverse { grid-template-columns:1fr 1.35fr; margin-top:110px; }
.study-copy > p + p { margin-top:20px; }
.study-small { width:170px; margin-top:34px; }
.study-small img { border-radius:50%; }
.study-small figcaption { display:none; }
/* Keep the original illustration intact, integrated with the reading column. */
.case-page[data-case="solitude"] #solitude-3 .study-small{
 width:clamp(170px,18vw,230px);max-width:100%;margin:30px 0 0;
}
.case-page[data-case="solitude"] #solitude-3 .study-small img{
 width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;
 filter:invert(1);mix-blend-mode:screen;
}
html[data-appearance="light"] .case-page[data-case="solitude"] #solitude-3 .study-small img{
 filter:none;mix-blend-mode:multiply;
}

.study-paper { background:var(--study-paper); padding:clamp(22px,4vw,56px); }
.study-paper figcaption { color:#4d4b49; }
.study-paper figcaption span:last-child { color:inherit; }
.study-paper > .study-figure:last-child figcaption { padding-bottom:0; }
.study-product { margin-top:62px; padding:clamp(38px,6vw,86px); }
.study-product img { max-height:420px; object-fit:contain; }
.study-product figcaption { margin-top:25px; }
.study-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; margin:0 0 62px; list-style:none; gap:32px; }
.study-steps li { padding-top:24px; }
.study-steps li > span { display:block; color:var(--case-gold); font-size:11px; margin-bottom:27px; }
.study-steps h3 { font-size:25px; margin-bottom:13px; }
.study-steps p { font-size:13px!important; max-width:210px; }
.study-decisions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5%; }
.study-decisions > article { padding-top:27px; }
.study-decisions > article > span { display:block; color:var(--case-gold); font:italic 40px Georgia,serif; margin-bottom:40px; }
.study-decisions h3 { font-size:28px; }
.study-taskline { display:flex; flex-wrap:wrap; gap:20px 44px; padding-block:24px; color:var(--case-gold); font-size:12px; }
.study-taskline span { display:flex; align-items:center; gap:12px; }
.study-taskline span::before { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }
.study-comparison article { min-width:0; }
.study-comparison .study-figure { background:#e3e6dc; padding:20px 20px 0; }
.study-comparison img { aspect-ratio:1; object-fit:contain; }
.study-comparison figcaption { color:#434a40; }
.study-comparison figcaption span:last-child { color:inherit; }
.study-comparison h3 { font-size:25px; margin-top:27px; }
.study-comparison p { font-size:14px!important; }
.study-note { border-left:1px solid var(--case-gold); padding:2px 0 2px 30px; margin-top:50px; max-width:760px; }
.study-note p:not(.case-eyebrow) { font-size:14px; }
.study-two-notes { display:grid; grid-template-columns:1fr 1fr; gap:10%; padding-top:38px; }
.study-two-notes h3 { font-size:29px; }
.study-storyboard { max-width:380px; margin-inline:auto; }
.study-narrative article + article { padding-top:36px; margin-top:36px; }
.study-narrative article > span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.13em; color:var(--case-gold); margin-bottom:17px; }
.study-narrative h3 { font-size:29px; }
.study-growth { margin-top:70px; padding:40px 5% 10px; background:#090909; }
.study-tools { margin:35px 0 0; }
.study-tools > div { display:grid; grid-template-columns:110px 1fr; gap:20px; padding-block:17px; font-size:12px; }
.study-tools dt { color:var(--case-gold); }
.study-tools dd { margin:0; color:var(--case-muted); }
.study-screen-intro { max-width:560px; margin-block:96px 48px; }
.study-phones { display:grid; grid-template-columns:repeat(var(--phone-count),minmax(0,1fr)); gap:clamp(22px,4vw,56px); padding:52px clamp(26px,5vw,70px) 38px; background:color-mix(in srgb,var(--case-gold) 8%,transparent); }
.study-phone { width:100%; max-width:230px; justify-self:center; }
.study-phone > a { padding:7px; border:1px solid #ffffff35; border-radius:24px; background:#252726; box-shadow:0 16px 32px #0003; overflow:hidden; }
.study-phone img { aspect-ratio:9/19; object-fit:contain; background:white; border-radius:17px; }
/* Keep the original UI at its native proportions. Different source heights
   share a top status baseline and a bottom-pinned navigation strip. */
.study-phone-screen { display:flex; flex-direction:column; aspect-ratio:9/19; box-sizing:border-box; padding-top:14px; background:#fff; border-radius:17px; overflow:hidden; }
.study-phone-content { display:block; flex:none; aspect-ratio:var(--phone-content-ratio); overflow:hidden; }
.study-phone-nav { display:block; position:relative; flex:none; margin-top:auto; aspect-ratio:var(--phone-nav-ratio); overflow:hidden; background:#fff; }
.case-page[data-case="solitude"] .study-phone-screen img { width:100%; height:auto; aspect-ratio:auto; object-fit:contain; border-radius:0; padding:0; animation:none; transition:none; }
.case-page[data-case="solitude"] .study-phone-nav img { position:absolute; bottom:0; left:0; }
.study-phone figcaption { font-size:11px; }
.study-atlas { margin-top:24px; }
.study-atlas summary { display:flex; justify-content:space-between; align-items:center; min-height:60px; gap:20px; cursor:pointer; color:var(--case-muted); font-size:12px; list-style:none; }
.study-atlas summary::-webkit-details-marker { display:none; }
.study-atlas summary span { font-size:22px; color:var(--case-gold); }
.study-atlas[open] summary span { transform:rotate(45deg); }
.study-atlas > .study-figure { max-width:920px; margin:20px auto 30px; }
.study-atlas summary:focus-visible { outline:2px solid var(--case-gold); outline-offset:4px; }
/* Frame the complete source canvases in the page without modifying the artwork. */
.study-figure > .study-image-window { position:relative; overflow:hidden; }
.study-figure > .study-image-window img { position:absolute; width:var(--image-width); height:auto; max-height:none; left:var(--image-left); top:var(--image-top); }
.study-scenarios,.study-cad-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.study-scenarios { margin-top:52px; }
.study-scenarios .study-image-window { filter:brightness(.625) contrast(4); }
.study-line-drawing > a { background:#fff; }
.study-line-drawing figcaption { color:var(--case-muted); }
/* The arm's cropped root meets the page edge, including in the routed scroller.
   Container units exclude the scrollbar; the reading column remains aligned. */
.study-reaching {
 --reach-bleed:max(6cqw,calc((100cqw - 1280px)/2));
 width:calc(100% + var(--reach-bleed));
 margin:74px 0 0 calc(-1 * var(--reach-bleed));
 padding:0;
 background:transparent;
 overflow:hidden;
 view-timeline-name:--stone-arm;
 view-timeline-axis:block;
}
.study-reaching .study-image-window { background:transparent; }
.study-reaching figcaption { margin-top:24px; padding-left:var(--reach-bleed); }
@keyframes stone-arm-reach {
 from { transform:translateX(-100%); }
 to { transform:translateX(0); }
}
@supports (animation-timeline: view()) {
 .study-reaching .study-image-window {
  animation:stone-arm-reach 1s linear both;
  animation-timeline:--stone-arm;
  animation-range:entry 0% entry 100%;
 }
}
body.motion-off .study-reaching .study-image-window,
.study-reaching:focus-within .study-image-window { animation:none; transform:none; }
@media(prefers-reduced-motion:reduce) {
 .study-reaching .study-image-window { animation:none; transform:none; }
}
.study-sketch-board { background:#fff; padding:clamp(18px,3.5vw,48px); }
.study-sketch-board figcaption { color:#4d4b49; }
.study-sketch-board figcaption span:last-child { color:inherit; }
.study-subsection { margin:76px 0 36px; }
.study-subsection .study-copy { max-width:600px; }
.study-cad-pair { align-items:start; }
.study-cad-pair .study-line-drawing > a { aspect-ratio:1.6; }
.study-cad-pair .study-line-drawing > a:not(.study-image-window) img { height:100%; object-fit:contain; }
.study-mechanism-intro { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:10%; }
.study-mechanism-intro h3 { margin:0; }
.study-cutaway > a { background:#000; }
.study-making { grid-template-columns:1fr 1.5fr; gap:7%; align-items:start; }
/* Center the process image against the complete title and explanation. */
#tomato-3 .study-making { margin-top:0; align-items:center; }
.study-making-copy { min-width:0; }
.study-making-copy .study-heading { margin-bottom:36px; }
.study-node-view > a { border:1px solid #ffffff20; background:#191919; }
@media(max-width:760px) {
 .case-page:is([data-case="solitude"],[data-case="stone-roses"],[data-case="ms-tomato"],[data-case="mood-tracker"]) .case-intro { padding-block:48px 38px; }
 .case-page:is([data-case="solitude"],[data-case="stone-roses"],[data-case="ms-tomato"],[data-case="mood-tracker"]) .case-intro h1 { font-size:clamp(48px,12vw,78px); }
 .case-page:is([data-case="solitude"],[data-case="stone-roses"],[data-case="ms-tomato"],[data-case="mood-tracker"]) .case-overview { padding-block:62px 56px; }
 .study-index { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 24px; margin-bottom:80px; padding-block:14px; }
 .study-index a { font-size:10px; gap:10px; }
 .study-section { margin-bottom:95px; }
 .study-heading { margin-bottom:38px; }
 .study-heading > p:not(.case-eyebrow) { margin-top:24px; }
 .study-story p:not(.case-eyebrow) { font-size:14px; }
 .study-spread,.study-spread-reverse,.study-decisions,.study-two-notes { grid-template-columns:1fr; gap:34px; }
 .study-spread { margin-top:40px; }
 .study-spread-reverse { margin-top:64px; }
 .study-triptych { grid-template-columns:1fr; gap:32px; }
 .study-triptych:not(.study-comparison) img { aspect-ratio:16/10; }
 .study-comparison { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
 .study-comparison .study-figure { padding:8px 8px 0; }
 .study-comparison figcaption { font-size:9px; }
 .study-comparison figcaption span:last-child { display:none; }
 .study-comparison h3 { font-size:20px; }
 .study-comparison p { font-size:12px!important; }
 .study-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-bottom:40px; }
 .study-steps li > span { margin-bottom:20px; }
 .study-decisions > article > span { margin-bottom:20px; }
 .study-small { display:none; }
 .study-note { margin-top:35px; padding-left:22px; }
 .study-storyboard { max-width:300px; }
 .study-narrative h3 { font-size:27px; }
 .study-growth { padding:18px 0 0; }
 .study-tools > div { grid-template-columns:100px 1fr; }
 .study-screen-intro { margin-block:62px 36px; }
 .study-phones { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 22px; padding:28px 20px; }
 .study-phone > a { padding:4px; border-radius:18px; }
 .study-phone img { border-radius:13px; }
 .study-phone-screen { border-radius:13px; }
 .study-phone:last-child:nth-child(odd) { grid-column:1/-1; width:calc(50% - 11px); }
 .study-phone figcaption { font-size:10px; gap:5px; }
 /* Keep the source UI legible on phones instead of shrinking two screens into
    narrow columns. The next card remains visible as a swipe affordance. */
 .case-page[data-case="solitude"] .study-phones { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(70vw,230px); gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:20px; scrollbar-width:thin; scrollbar-color:#80785b transparent; }
 .case-page[data-case="solitude"] .study-phone { max-width:none; width:100%; grid-column:auto; scroll-snap-align:start; }
 .study-scenarios,.study-cad-pair,.study-mechanism-intro,.study-making { grid-template-columns:1fr; gap:34px; }
 .study-scenarios { margin-top:36px; }
 .study-reaching { margin-top:48px; }
 .study-reaching figcaption { margin-top:18px; }
 .study-subsection { margin-top:54px; margin-bottom:28px; }
 .study-mechanism-intro { gap:20px; }
}
@media(max-width:430px) {
 .study-comparison { grid-template-columns:1fr; gap:42px; }
 .study-comparison article { display:grid; grid-template-columns:42% 1fr; gap:0 20px; align-content:center; }
 .study-comparison .study-figure { grid-row:1/3; }
 .study-comparison h3 { margin-top:10px; margin-bottom:12px; }
 .study-comparison p { align-self:start; }
}

@font-face { font-family:Roboto; font-style:normal; font-weight:400 500; font-display:swap; src:url("assets/works/academic/roboto-latin-v1.woff2") format("woff2"); }
/* Mood Tracker: source artwork and a separately labelled interaction refinement. */
.case-page[data-case="mood-tracker"] { --case-muted:#b8b7c8; }
.case-page[data-case="mood-tracker"] .case-cover img { aspect-ratio:3/2; object-fit:cover; }
.mood-premise { display:flex; align-items:center; gap:34px; margin-top:64px; padding:35px 0; }
.mood-premise > span { font:60px Georgia,serif; color:#c0b8ed; }
.study-story .mood-premise p { font:clamp(22px,2.7vw,34px)/1.55 Georgia,serif; color:#e1ddec; }
.mood-premise strong { font-weight:normal; color:#c0b8ed; }
.mood-role-map { display:grid; grid-template-columns:1fr 160px 1fr; gap:35px; align-items:center; margin-bottom:56px; }
.mood-role-map article { position:relative; padding:32px; border:1px solid var(--study-line); }
.mood-role-map h3 { font-size:26px; }
.mood-role-dot { display:block; width:15px; height:15px; border-radius:50%; margin-bottom:28px; background:#f9c5d7; box-shadow:0 0 0 7px #f9c5d711; }
.mood-role-dot.parent { background:#8d98d3; box-shadow:0 0 0 7px #8d98d311; }
.mood-handoff { text-align:center; }
.mood-handoff > span { font-size:38px; color:var(--case-gold); }
.study-story .mood-handoff p { font-size:11px; }
.mood-demo { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,1fr); gap:8%; padding:clamp(28px,4.8vw,66px); background:radial-gradient(ellipse at 95% 10%,#78649c19,transparent 70%),#1c1c2a; border:1px solid var(--study-line); }
.mood-demo-guide h3 { font-size:clamp(30px,3.1vw,43px); }
.study-story .mood-demo-guide > p:not(.case-eyebrow) { font-size:13px; max-width:350px; }
.mood-demo-steps { list-style:none; padding:0; margin:30px 0; }
.mood-demo-steps li { display:flex; align-items:center; gap:17px; padding:9px 0; color:#b2aec2; font-size:13px; }
.mood-demo-steps li > span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1px solid #c0b8ed4d; font-size:10px; }
.mood-demo-steps li[aria-current] { color:#c0b8ed; }
.mood-demo-steps li[aria-current] > span { background:#c0b8ed; color:#292333; border-color:#c0b8ed; }
.mood-demo-steps li.is-complete > span { border-color:#a99ccf; color:#ddd5f2; }
.mood-demo-rule { border-left:2px solid #a99ccf; padding-left:20px; }
.mood-demo-rule .case-eyebrow { font-size:9px; margin-bottom:10px; }
.study-story .mood-demo-rule p:not(.case-eyebrow) { font-size:12px; line-height:1.75; }
.mood-demo button { cursor:pointer; font-family:inherit; }
.mood-demo button:focus-visible,.mood-demo input:focus-visible { outline:3px solid #5662ab; outline-offset:4px; }
.mood-restart { display:flex; justify-content:space-between; gap:24px; align-items:center; border:0; border-bottom:1px solid #c0b8ed50; color:#eee9df; background:transparent; font-size:12px; min-height:44px; padding:10px 0; margin-top:25px; }
.mood-restart:hover,.mood-restart:focus-visible { color:#c0b8ed; border-bottom-color:#c0b8ed; }
.mood-demo-guide button:focus-visible { outline-color:#c0b8ed; }
.study-story .mood-demo-guide .mood-demo-disclaimer { color:#aaa5bd; font-size:10px; margin-top:20px; line-height:1.7; }
.mood-device-stage { width:100%; max-width:350px; justify-self:center; }
.mood-device { color-scheme:light; padding:10px 10px 12px; border:1px solid #69617d; background:#24212f; border-radius:36px; box-shadow:0 24px 60px #0004; }
.mood-device-bar { display:flex; justify-content:space-between; background:#faf8fc; border-radius:26px 26px 0 0; color:#393247; padding:16px 22px 10px; font-size:10px; }
.mood-device-content { min-height:540px; background:#faf8fc; border-radius:0 0 24px 24px; padding:20px 22px 28px; color:#322c42; }
.mood-device-content h4 { margin:0 0 12px; font:500 27px/1.2 Roboto,sans-serif; letter-spacing:-.03em; }
.mood-device-content h4:focus { outline:none; }
.study-story .mood-device-content .mood-role-label { color:#665889; font:10px/1.5 Roboto,sans-serif; margin-bottom:20px; }
.study-story .mood-device-content .mood-phone-copy { color:#655e72; font:12px/1.7 Roboto,sans-serif; margin-bottom:24px; }
.mood-device fieldset { border:0; padding:0; margin:24px 0; min-width:0; }
.mood-device legend { font-size:11px; font-weight:500; margin-bottom:12px; color:#4b425e; }
.mood-picks { display:flex; gap:8px; }
.mood-picks button { flex:1; min-width:0; border:1px solid #d7d0e3; background:#fff; color:#655779; border-radius:12px; padding:10px 3px; font-size:11px; }
.mood-picks button > span { display:block; font:30px/1.3 Roboto,sans-serif; color:#5c639d; margin-bottom:5px; }
.mood-device [aria-pressed="true"] { border-color:#685894; background:#eee7f8; box-shadow:0 0 0 1px #685894; }
.mood-audience button { width:100%; text-align:left; border:1px solid #ded6e7; background:#fff; color:#4d435e; border-radius:10px; padding:10px 12px; margin:9px 0; font-size:12px; min-height:54px; }
.mood-audience small { display:block; margin-top:4px; color:#746b80; font-size:10px; }
.mood-device input { accent-color:#67558d; margin:3px 0 0; }
.mood-primary,.mood-secondary { width:100%; border:0; min-height:44px; padding:12px 13px; border-radius:10px; font-size:12px; line-height:1.5; margin-top:10px; }
.mood-primary { background:#65568e; color:#fff; }
.mood-primary:hover:not(:disabled) { background:#514271; }
.mood-primary:disabled { background:#e2ddec; color:#776f83; cursor:default; }
.mood-secondary { background:transparent; color:#615076; border:1px solid #ddd5e6; }
.mood-secondary:hover { background:#f0eaf6; }
.mood-options button { display:block; width:100%; min-height:44px; padding:11px; text-align:left; color:#4d435e; background:#fff; border:1px solid #ded6e7; border-radius:10px; margin-bottom:9px; font-size:12px; }
.mood-entry { background:linear-gradient(135deg,#fce8ef,#eef0fc); padding:19px; border-radius:16px; margin:22px 0; }
.mood-entry > span { display:block; color:#6a5975; font-size:10px; margin-bottom:9px; }
.mood-entry strong { font:22px/1.35 Roboto,sans-serif; }
.study-story .mood-device .mood-entry p { color:#665f74; font:11px/1.7 Roboto,sans-serif; margin-top:10px; }
.mood-agreement { display:grid; gap:13px; margin:22px 0; }
.mood-agreement span { display:flex; justify-content:space-between; gap:14px; font-size:10px; }
.mood-agreement b { font-weight:400; color:#635083; }
.mood-tasks label,.mood-share-reflection { display:flex; gap:10px; align-items:flex-start; font-size:12px; line-height:1.6; padding:10px 0; }
.mood-tasks input,.mood-share-reflection input { flex-shrink:0; }
.mood-device-home { height:4px; width:80px; margin:10px auto 0; background:#8d819e; border-radius:4px; }
.study-story .mood-demo-status { min-height:46px; font-size:11px; text-align:center; line-height:1.7; margin:20px 8px 0; }
.mood-end-mark { color:#9b7bad; background:#f5e0ed; border-radius:50%; width:110px; height:110px; display:grid; place-items:center; font:72px Roboto,sans-serif; margin:35px auto; }
.mood-branches { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:35px; }
.mood-branches article { padding-top:20px; }
.mood-branches span { color:#d7cee9; font-size:11px; }
.study-story .mood-branches p { margin-top:12px; font-size:12px; }
.mood-palette { display:flex; gap:16px; margin-bottom:64px; }
.mood-palette span { flex:1; max-width:145px; color:#c9c0d7; font-size:10px; }
.mood-palette span::before { content:""; display:block; height:8px; margin-bottom:12px; background:var(--swatch); }
.mood-gallery-heading { display:grid; grid-template-columns:50px minmax(0,640px); gap:24px; margin:70px 0 34px; }
.mood-gallery-heading > span { color:var(--case-gold); font:italic 32px Georgia,serif; }
.mood-gallery-heading h3 { font-size:30px; }
.mood-originals { background:linear-gradient(125deg,#292538,#232438); padding-block:50px 35px; }
.mood-originals .study-phone { max-width:205px; }
.mood-originals .study-phone img { aspect-ratio:auto; border-radius:11px; }
.mood-originals .study-phone > a { border-radius:18px; padding:5px; background:#272431; }
.mood-rules { margin:0 0 80px; }
.mood-rules > div { display:grid; grid-template-columns:1fr 1.6fr; gap:12%; padding:27px 0; }
.mood-rules dt { color:#ded7ee; font:25px/1.35 Georgia,serif; }
.mood-rules dd { margin:0; color:var(--case-muted); font-size:14px; line-height:1.85; }
.mood-scope { margin-bottom:50px; }
@media(max-width:1000px) {
 .mood-demo { gap:35px; grid-template-columns:minmax(0,1fr) minmax(290px,1fr); padding:30px; }
 .mood-role-map { grid-template-columns:1fr 110px 1fr; gap:20px; }
 .mood-role-map article { padding:24px; }
}
@media(max-width:760px) {
 .mood-premise { margin-top:40px; gap:24px; }
 .mood-role-map { grid-template-columns:1fr; gap:18px; }
 .mood-handoff { display:flex; justify-content:center; gap:20px; align-items:center; }
 .mood-handoff > span { transform:rotate(90deg); }
 .mood-role-dot { margin-bottom:18px; }
 .mood-role-map article { padding:24px; }
 .mood-demo { grid-template-columns:1fr; padding:24px 18px; gap:28px; }
 .mood-demo-guide h3 { font-size:30px; }
 .mood-demo-steps { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; margin:20px 0; }
 .mood-demo-steps li { font-size:10px; gap:8px; }
 .mood-demo-steps li > span { flex-shrink:0; width:23px; height:23px; }
 .mood-demo-rule { padding-left:14px; }
 .mood-demo-guide .mood-restart { margin-top:18px; }
 .mood-device-content { padding:18px 17px 24px; min-height:530px; }
 .mood-device-content h4 { font-size:26px; }
 .mood-branches { grid-template-columns:1fr; gap:24px; }
 .mood-gallery-heading { grid-template-columns:30px 1fr; gap:15px; margin-top:52px; }
 .mood-gallery-heading h3 { font-size:26px; }
 .mood-originals { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(70vw,230px); gap:24px; padding:28px 22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:22px; }
 .mood-originals .study-phone { max-width:none; width:100%; scroll-snap-align:start; }
 .mood-originals .study-phone:last-child:nth-child(odd) { grid-column:auto; width:100%; }
 .mood-rules > div { grid-template-columns:1fr; gap:15px; }
 .mood-rules dt { font-size:24px; }
 .mood-rules dd { font-size:13px; }
 .mood-palette { gap:12px; margin-bottom:40px; }
}
@media(max-width:390px) {
 .mood-demo { padding-inline:12px; }
 .mood-device-content { padding-inline:13px; }
 .mood-picks { gap:6px; }
}

/* Visual refinement: use shared artwork while keeping the existing state machine. */
.mood-ui-board { margin:0; }
.mood-board-scroll { border-radius:20px; overflow:hidden; }
.mood-board-scroll > a { display:block; }
.mood-ui-board img { display:block; width:100%; height:auto; }
.mood-ui-board figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; }
.mood-ui-board figcaption > span:first-child { flex:1; }
.mood-board-swipe { display:none; }
.mood-screen-details .mood-originals { margin:24px 0; }
.mood-device { border:1px solid #d6d2e3; padding:7px 7px 10px; background:#eae7f1; box-shadow:0 18px 48px #16132626; }
.mood-device-bar,.mood-device-content { background:#fcfbfe; }
.mood-device-content { padding:22px 23px 30px; }
.mood-device-content h4 { font:500 27px/1.25 Roboto,sans-serif; letter-spacing:-.035em; }
.study-story .mood-device-content .mood-phone-copy { font-size:13px; line-height:1.65; margin-bottom:26px; }
.mood-device legend { font-size:12px; margin-bottom:13px; }
.mood-picks { gap:10px; }
.mood-picks button { border:1px solid transparent; border-radius:18px; background:#f0edf8; padding:14px 3px; color:#414365; }
.mood-picks button:nth-of-type(2) { background:#edf1fa; }
.mood-picks button:nth-of-type(3) { background:#fbedf2; }
.mood-picks button > span { margin-bottom:8px; }
.mood-audience button,.mood-options button { border:1px solid transparent; border-radius:15px; background:#f2eff8; padding:14px; margin:8px 0; color:#414365; }
.mood-audience small { font-size:11px; line-height:1.5; }
.mood-device button[aria-pressed="true"] { border-color:transparent; background:#e2e2f7; box-shadow:inset 0 0 0 1.5px #8388bb; }
.mood-primary,.mood-secondary { border-radius:15px; min-height:48px; font-size:13px; }
.mood-primary { background:#656da8; }
.mood-primary:hover:not(:disabled) { background:#50598f; }
.mood-secondary { border:0; background:#f0edf7; color:#545276; }
.mood-secondary:hover { background:#e9e4f4; }
.mood-entry { padding:22px; border-radius:21px; background:linear-gradient(135deg,#fce8ef,#efedfb); }
.mood-entry strong { font:500 20px/1.4 Roboto,sans-serif; }
.study-story .mood-device .mood-entry p { font-size:12px; }
.mood-agreement { padding:18px; border-radius:16px; background:#f2eff8; }
.mood-agreement span { font-size:11px; }
.mood-device-home { background:#afa8c1; }
/* Fixed screen height so the device frame does not resize between prototype steps; longer content scrolls inside. */
.mood-device-content { box-sizing:border-box; height:628px; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.mood-device-content::-webkit-scrollbar { display:none; }
@media(max-width:760px) {
 .mood-board-scroll { overflow-x:auto; overscroll-behavior-x:contain; border-radius:14px; scrollbar-width:none; }
 .mood-board-scroll::-webkit-scrollbar { display:none; }
 .mood-board-scroll > a { width:max(100%,780px); }
 .mood-board-swipe { display:block; flex-basis:100%; color:var(--case-muted); }
 .mood-device-content { padding:22px 18px 28px; }
 .mood-device-content h4 { font-size:25px; }
}

/* Wrist companion: the same vector character family is used throughout. */
.case-page[data-case="mood-tracker"] .study-index { grid-template-columns:repeat(5,minmax(0,1fr)); }
.mood-watch-demo { display:grid; grid-template-columns:minmax(300px,1.05fr) minmax(250px,1fr); gap:clamp(28px,4vw,64px); align-items:center; }
.mood-watch-stage { position:relative; min-height:550px; display:grid; place-items:center; isolation:isolate; overflow:hidden; border-radius:28px; background:radial-gradient(ellipse at 50% 42%,#ebe8fb,#d9d8ed); }
.mood-watch-stage::before { content:""; position:absolute; width:168px; height:100%; z-index:-1; background:linear-gradient(90deg,#b8b5d1,#d0cde1 20%,#d7d3e5 50%,#c4bfd9 88%,#aaa7c7); border-radius:60px; box-shadow:inset 0 0 0 1px #f9f6ff50; }
.mood-watch-stage-label,.mood-watch-stage-note { position:absolute; left:20px; right:20px; text-align:center; color:#565877; font:10px/1.5 Roboto,sans-serif; letter-spacing:.13em; z-index:2; }
.mood-watch-stage-label { top:26px; }
.mood-watch-stage-note { bottom:25px; letter-spacing:.02em; font-size:11px; }
.mood-wrist { position:relative; width:276px; padding:9px; border-radius:60px; background:linear-gradient(135deg,#f7f5ff,#b7b4ca 34%,#edeaf6 56%,#9996b3); box-shadow:0 20px 34px #3d35532b,inset 0 0 0 1px #fff9; }
.mood-wrist::after { content:""; position:absolute; width:8px; height:36px; border-radius:3px 6px 6px 3px; right:-7px; top:85px; background:linear-gradient(90deg,#9993b4,#c9c4dc,#aca5c3); }
.mood-wrist-glass { border:4px solid #29283d; border-radius:51px; background:#faf8ff; overflow:hidden; color:#30364f; font:14px/1.4 Roboto,sans-serif; }
.mood-wrist-bar { display:flex; justify-content:space-between; height:37px; align-items:center; padding:5px 27px 0; font-size:11px; font-weight:500; }
.mood-wrist-bar > span:last-child { color:#72779c; font-size:9px; }
.mood-wrist-screen { height:310px; padding:5px 19px 20px; text-align:center; display:flex; flex-direction:column; align-items:stretch; gap:7px; overflow-y:auto; scrollbar-width:none; }
.mood-wrist-screen::-webkit-scrollbar { display:none; }
.mood-wrist-screen > * { flex-shrink:0; }
.study-story .mood-wrist-screen p { color:#5e6480; font:12px/1.5 Roboto,sans-serif; margin:0; }
.study-story .mood-wrist-screen .mw-kicker { font:10px/1.4 Roboto,sans-serif; letter-spacing:.015em; }
.mood-wrist-screen h4 { font:500 20px/1.2 Roboto,sans-serif; letter-spacing:-.035em; margin:0; color:#30364f; outline:none; }
.mw-feelings { display:flex; gap:5px; }
.mood-wrist button { cursor:pointer; font:12px/1.25 Roboto,sans-serif; border:0; transition:background-color .18s ease,box-shadow .18s ease; }
.mw-feelings button { min-width:0; flex:1; min-height:39px; padding:7px 2px; background:#efedf7; color:#575e7a; border-radius:13px; }
.mw-feelings button[aria-pressed="true"] { color:#333b65; background:#dcdef2; box-shadow:inset 0 0 0 1.5px #9198c3; }
.mood-wrist .mw-primary,.mood-wrist .mw-secondary { display:grid; place-items:center; min-height:42px; width:100%; border-radius:16px; padding:9px 10px; text-decoration:none; font:12px/1.35 Roboto,sans-serif; }
.mood-wrist .mw-primary { background:#737fb7; color:white; }
.mood-wrist .mw-primary:hover:not(:disabled) { background:#626fa8; }
.mood-wrist .mw-primary:disabled { background:#e4e3ee; color:#7a7c90; cursor:default; }
.mood-wrist .mw-secondary { background:#edeaf5; color:#505978; }
.mood-wrist .mw-secondary:hover { background:#e1deef; }
.mood-wrist button:focus-visible,.mood-wrist a:focus-visible { outline:2px solid #414e8a; outline-offset:2px; }
.study-story .mood-wrist-screen .mw-footnote { font-size:10px; line-height:1.45; }
.mood-wrist-screen .mw-choice { min-height:51px; border-radius:15px; background:#eeecf6; color:#434d6b; text-align:left; padding:10px 12px; }
.mw-choice small { display:block; margin-top:4px; font-size:10px; color:#6b6e88; }
.mw-choice[aria-pressed="true"] { background:#e2e4f6; box-shadow:inset 0 0 0 1.5px #9198c3; }
.mw-outcome { display:grid; place-items:center; width:67px; height:67px; margin:12px auto; border-radius:50%; background:#e5e5f8; color:#6673ac; font:32px/1 Roboto,sans-serif; }
.mw-message { padding:17px 14px; background:#f8e6ed; border-radius:20px 20px 20px 5px; margin:10px 0; text-align:left; }
.mood-wrist-screen .mw-message p { color:#4b4f6e; font-size:16px; line-height:1.5; }
.mw-plan { background:#eeecf7; border-radius:18px; padding:13px 10px; margin:7px 0; }
.mw-plan strong { display:block; font-size:15px; line-height:1.3; color:#3e4665; margin-bottom:6px; }
.mw-agreement { display:grid; gap:8px; padding:12px 0; font-size:11px; text-align:left; }
.mw-agreement > span { display:flex; justify-content:space-between; gap:8px; }
.mw-agreement b { color:#6773a5; font-weight:500; }
.mw-progress { width:83px; height:83px; border-radius:50%; display:grid; place-items:center; align-self:center; margin:9px 0; background:conic-gradient(#9ba5d3 var(--mw-progress,50%),#e6e5f3 0); }
.mw-progress span { width:65px; height:65px; display:grid; place-items:center; border-radius:50%; background:#faf8ff; font-size:21px; font-weight:500; color:#566395; }
.mood-watch-guide h3 { margin-bottom:15px; }
.study-story .mood-watch-guide > p:not(.case-eyebrow) { font-size:13px; }
.mood-watch-scenarios { display:grid; gap:8px; margin:27px 0 24px; }
.mood-watch-scenarios button { display:flex; align-items:center; width:100%; gap:17px; padding:14px 15px; color:var(--case-ink,#e3deef); border:0; border-radius:14px; background:transparent; text-align:left; cursor:pointer; font:14px/1.4 Roboto,sans-serif; transition:background-color .2s; }
.mood-watch-scenarios button[aria-pressed="true"] { background:color-mix(in srgb,var(--case-gold) 12%,transparent); }
.mood-watch-scenarios button:hover { background:color-mix(in srgb,var(--case-gold) 9%,transparent); }
.mood-watch-scenarios button > span:first-child { color:var(--case-gold); font:italic 20px Georgia,serif; }
.mood-watch-scenarios button > span:last-child { margin-left:auto; color:var(--case-gold); }
.mood-watch-scenarios small { display:block; margin-top:5px; color:var(--case-muted); font-size:11px; }
.mood-watch-feedback { min-height:50px; border-left:2px solid var(--case-gold); padding-left:16px; }
.mood-watch-parent { display:block; border:0; padding:13px 0; background:none; color:var(--case-gold); font-size:12px; cursor:pointer; text-align:left; }
.mood-watch-parent[hidden] { display:none; }
.mood-watch-guide .mood-restart { margin:15px 0; }
.study-story .mood-watch-guide .mood-watch-disclaimer { font-size:11px; line-height:1.7; }
.mood-watch-notes { margin-top:42px; }
@media(max-width:1000px) { .case-page[data-case="mood-tracker"] .study-index { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) {
 .case-page[data-case="mood-tracker"] .study-index { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .mood-watch-demo { grid-template-columns:minmax(0,1fr); gap:32px; }
 .mood-watch-stage { min-height:490px; border-radius:22px; }
 .mood-watch-stage-label { font-size:9px; top:19px; }
 .mood-watch-stage-note { bottom:18px; }
 .mood-watch-scenarios { grid-template-columns:1fr 1fr; gap:8px; }
 .mood-watch-scenarios button { padding:14px 10px; gap:10px; font-size:12px; }
 .mood-watch-scenarios button > span:last-child { display:none; }
 .mood-watch-scenarios small { font-size:10px; }
}
@media(max-width:360px) { .mood-wrist { width:calc(100% - 26px); max-width:276px; } .mood-wrist-screen { padding-inline:14px; } }
@media(prefers-reduced-motion:reduce) { .mood-wrist button,.mood-watch-scenarios button { transition:none; } }

/* Match the mobile study: milk-white surfaces, blush halos and lavender actions. */
.mood-watch-stage { background:radial-gradient(ellipse at 18% 32%,#fce8efbb,transparent 61%),radial-gradient(ellipse at 86% 76%,#e5effa,transparent 68%),#f0edfa; }
.mood-watch-stage::before { width:164px; background:linear-gradient(90deg,#dcc9df,#eee1ee 22%,#f4e7ef 50%,#e8d8e9 82%,#d5c5e0); box-shadow:inset 0 0 0 1px #ffffff8c; }
.mood-wrist { border-radius:65px; padding:10px; background:linear-gradient(140deg,#fff,#eeebf8 45%,#e2deef); box-shadow:0 18px 38px #72628d24,inset 0 0 0 1px #fff; }
.mood-wrist::after { width:8px; height:31px; background:linear-gradient(90deg,#c9bfd9,#e7deee); border-radius:7px; }
.mood-wrist-glass { border:3px solid #ccc5df; border-radius:54px; background:linear-gradient(155deg,#fffaff,#f7f8ff 68%,#f3f1fc); }
.mood-wrist-bar { color:#515778; }
.mood-wrist-screen h4 { color:#374363; }
.mw-feelings { gap:6px; }
.mw-feelings button { border-radius:15px; background:#fce8ef; color:#6c546a; min-height:41px; }
.mw-feelings button:nth-child(2) { background:#f6f0da; color:#736344; }
.mw-feelings button:nth-child(3) { background:#e9edf9; color:#4d5e85; }
.mw-feelings button[aria-pressed="true"] { box-shadow:inset 0 0 0 1.5px #929ccc; background:#e1e4f6; color:#364b76; }
.mood-wrist .mw-primary { background:#656da8; border-radius:18px; }
.mood-wrist .mw-primary:hover:not(:disabled) { background:#575f9b; }
.mood-wrist .mw-secondary { background:#eeebf8; border-radius:18px; }
.mood-wrist-screen .mw-choice { border-radius:18px; }
.mw-choice[aria-pressed="true"] { background:#e9e8f9; }
.mw-message { background:#fce8ef; }
.mw-outcome { position:relative; background:#fce8ef; color:#7986b4; box-shadow:0 0 0 7px #fce8ef55; }
.mw-outcome::after { content:"✦"; position:absolute; right:-7px; top:-5px; color:#a8acd1; font-size:18px; }
.mw-plan { background:linear-gradient(130deg,#fcebf1,#eeedf9); border-radius:21px; }
.mw-progress { background:conic-gradient(#c0b8e5 var(--mw-progress,50%),#f5dce8 0); }
.mw-progress span { background:#faf8ff; }



/* Shared mood artwork: the SVG owns the entire halo, face and silhouette. */
.mw-drop { display:block; width:92px; height:92px; aspect-ratio:1; align-self:center; flex-shrink:0; margin:6px 0; border:0; border-radius:50%; box-shadow:none; background:url('assets/works/academic/mood-character-upset-v1.svg') center / 100% 100% no-repeat; }
.mw-drop[data-feeling="Happy"] { background-image:url('assets/works/academic/mood-character-happy-v1.svg'); }
.mw-drop[data-feeling="Okay"] { background-image:url('assets/works/academic/mood-character-okay-v1.svg'); }
.mw-drop[data-feeling="Upset"] { background-image:url('assets/works/academic/mood-character-upset-v1.svg'); }
.mood-feeling-art { display:block; width:56px; height:56px; aspect-ratio:1; object-fit:contain; border:0; border-radius:0; box-shadow:none; }
.mood-picks .mood-feeling-art { width:clamp(42px,6vw,56px); height:auto; margin:0 auto 8px; }
.mood-options [data-mood-choice="reflection"] { display:flex; align-items:center; gap:12px; }
.mood-reflection-art { width:42px; height:42px; flex-shrink:0; }
.mood-entry-with-art { display:grid; grid-template-columns:minmax(0,1fr) 68px; column-gap:12px; }
.mood-entry-with-art > .mood-entry-art { grid-column:2; grid-row:1 / span 3; width:68px; height:68px; align-self:center; }
.mood-entry-with-art > span,.mood-entry-with-art > strong,.mood-entry-with-art > p { grid-column:1; }

/* Original product typography; kept separate from portfolio headings. */
.mood-device,.mood-wrist { font-family:Roboto,sans-serif; font-weight:400; font-synthesis:none; }
.study-story .mood-device p,.mood-device button,.mood-device input,.mood-device label,.mood-device legend { font-family:Roboto,sans-serif; }
.mood-device strong,.mood-device b,.mood-wrist strong,.mood-wrist b { font-weight:500; }

/* Mood Tracker documentation, scoped away from the interactive product. */
.mood-ds-jump { display:inline-flex; align-items:center; gap:25px; min-height:44px; margin:0 0 25px; font-size:13px; color:var(--case-gold); }
.mood-ds { margin:72px 0 100px; color:var(--case-ink); font-family:Roboto,"PingFang SC","Microsoft YaHei",sans-serif; font-weight:400; font-synthesis:none; }
.mood-ds * { box-sizing:border-box; }
.mood-ds h4 { font:500 18px/1.45 Roboto,"PingFang SC","Microsoft YaHei",sans-serif; margin:0 0 10px; color:var(--case-ink); }
.study-story .mood-ds p,.mood-ds p { font-size:14px; line-height:1.8; margin:0; color:var(--case-muted); }
.mood-ds code { font:400 12px/1.5 Roboto,monospace; letter-spacing:.025em; }
.mood-ds-heading { display:grid; grid-template-columns:175px minmax(0,1fr); gap:32px; align-items:start; margin-bottom:32px; }
.mood-ds-heading > span { color:var(--case-gold); font-size:10px; line-height:1.7; letter-spacing:.08em; padding-top:6px; }
.study-story .mood-ds h3,.mood-ds h3 { font:500 clamp(25px,3vw,36px)/1.25 Roboto,"PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:-.025em; margin:0 0 17px; text-wrap:balance; color:var(--case-ink); }
.mood-ds-heading p { max-width:680px; }
.mood-ds-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 28px; margin:38px 0 64px; }
.mood-ds-nav a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 0; min-height:48px; font-size:13px; text-decoration:none; }
.mood-ds-nav a span { color:var(--case-gold); }
.mood-ds-nav a:hover { color:var(--case-gold); }
.mood-ds a:focus-visible { outline:2px solid var(--case-gold); outline-offset:5px; }
.mood-ds-section { scroll-margin-top:40px; margin-top:72px; padding-top:40px; }
.mood-ds-feelings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.mood-ds-feeling { min-width:0; }
.mood-ds-character { display:grid; place-items:center; background:#F9F0F5; border-radius:24px; min-height:220px; margin-bottom:22px; }
.mood-ds-character img { width:144px; height:144px; }
.mood-ds-feeling code { display:block; color:var(--case-ink); margin-bottom:12px; }
.study-story .mood-ds .mood-ds-note,.mood-ds .mood-ds-note { margin-top:25px; font-size:12px; line-height:1.8; max-width:890px; }
.mood-ds-palette { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 24px; margin:42px 0; }
.mood-ds-palette h4 { font-size:15px; margin-bottom:5px; }
.mood-ds-palette p { margin-top:10px; font-size:12px; }
.mood-ds-swatch { display:block; height:64px; border-radius:12px; margin-bottom:16px; box-shadow:inset 0 0 0 1px #1723450c; }
.mood-ds-contrast { display:grid; grid-template-columns:1.05fr 1fr; gap:38px; padding:28px 0; }
.study-story .mood-ds .mood-ds-label { font-size:10px; color:var(--case-gold); margin-bottom:12px; }
.mood-ds-contrast-samples { display:grid; gap:12px; align-content:center; }
.mood-ds-contrast-samples > div { display:flex; flex-direction:column; gap:8px; padding:23px; border-radius:16px; }
.mood-ds-contrast-samples b { font-size:20px; font-weight:500; }
.mood-ds-contrast-samples small { font-size:11px; }
.study-story .mood-ds .mood-ds-source { display:flex; flex-wrap:wrap; gap:12px 25px; font-size:11px; margin-top:14px; }
.mood-ds-type-specimen { display:grid; grid-template-columns:1fr 1fr; border-block:1px solid var(--study-line); margin:35px 0 20px; }
.mood-ds-type-specimen > div { display:flex; flex-direction:column; padding:32px 24px 36px; min-width:0; }
.mood-ds-type-specimen > div + div { border-left:1px solid var(--study-line); font-weight:500; }
.mood-ds-type-specimen span { font-size:clamp(70px,11vw,130px); line-height:1.15; margin-bottom:23px; }
.mood-ds-type-specimen strong { font-size:19px; font-weight:inherit; }
.mood-ds-type-specimen small { font-size:12px; color:var(--case-muted); margin-top:10px; word-break:break-word; }
.mood-ds-type-table { margin-top:22px; font-size:13px; font-variant-numeric:tabular-nums; }
.mood-ds-type-table > div { display:grid; grid-template-columns:1fr 1.2fr .6fr 1.6fr; gap:18px; padding:18px 0; border-bottom:1px solid var(--study-line); align-items:center; }
.mood-ds-type-table > div > span { min-width:0; line-height:1.6; }
.mood-ds-type-head { color:var(--case-gold); font-size:11px; }
.mood-ds-type-table > div > span:last-child { color:var(--case-muted); }
.mood-ds-two-notes { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:34px; }
.mood-ds-two-notes h4 { font-size:16px; }
.mood-ds-two-notes p { font-size:13px; }
.mood-ds-geometry { display:grid; grid-template-columns:1fr 1.1fr; gap:45px; align-items:center; }
.mood-ds-construction { margin:0; padding:20px; background:#F4F5FC; border-radius:22px; color:#172345; }
.mood-ds-construction svg { width:100%; height:auto; display:block; }
.mood-ds-construction figcaption { text-align:center; color:#596780; font-size:11px; line-height:1.7; margin-top:5px; }
.mood-ds-spec-list { margin:0; }
.mood-ds-spec-list > div { padding:14px 0; border-bottom:1px solid var(--study-line); }
.mood-ds-spec-list dt { font-size:14px; font-weight:500; margin-bottom:6px; }
.mood-ds-spec-list dd { margin:0; font-size:13px; line-height:1.7; color:var(--case-muted); }
.mood-ds-icon-rule { display:flex; align-items:center; gap:28px; margin-top:32px; }
.mood-ds-icon-rule svg { background:#F4F5FC; border-radius:16px; width:100px; height:100px; flex:0 0 100px; }
.mood-ds-icon-rule p { font-size:13px; }
.mood-ds-surface-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.mood-ds-surface-grid p { font-size:13px; }
.mood-ds-material { height:170px; border-radius:18px; background:#F4F5FC; display:grid; place-items:center; position:relative; margin-bottom:23px; overflow:hidden; }
.mood-ds-flat-block { width:150px; height:96px; border-radius:18px; background:#F9EAF2; border:1px solid #efd9e7; }
.mood-ds-layer-back { position:absolute; width:144px; height:78px; background:#E7D9EE; border-radius:16px; transform:translate(-14px,10px); }
.mood-ds-layer-front { width:144px; height:78px; display:grid; place-items:center; background:#F9EAF2; color:#172345; border-radius:16px; font-size:21px; transform:translate(9px,-10px); }
.mood-ds-space-block { width:175px; height:115px; padding:18px; border:1px dashed #77839d; }
.mood-ds-space-block i { display:block; width:100%; height:100%; border-radius:18px; background:#DBE0F5; }
.mood-ds-usage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 24px; }
.mood-ds-usage-art { height:155px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:16px; background:#F6F5FA; margin-bottom:19px; padding:18px; overflow:hidden; }
.mood-ds-usage-art img { width:30%; max-width:72px; height:auto; }
.mood-ds-usage-art .mood-ds-distorted { width:90px; max-width:none; transform:scale(1.75,.63); }
.mood-ds-usage-grid h4 { font-size:15px; }
.mood-ds-usage-grid p { font-size:12px; }
.mood-ds-use-good h4 > span { color:#518369; }
.mood-ds-use-bad h4 > span { color:#c77479; }
.mood-ds-color-only { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.mood-ds-bad-button { background:#909BD6; color:#fff; font-size:13px; padding:15px 34px; border-radius:12px; }
.mood-ds-good-message { background:#F9EAF2; color:#172345; font-size:11px; line-height:1.8; width:180px; padding:16px; border-radius:14px; }
.mood-ds-good-message b { font-size:17px; font-weight:400; }
.mood-ds-wrong-type { font:italic 23px Georgia,serif; color:#374363; text-shadow:2px 2px #ccbcdc; }
.mood-ds-application-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.mood-ds-application-grid article { padding-top:24px; border-top:2px solid var(--case-gold); }
.mood-ds-application-grid ul { padding-left:18px; margin:20px 0 0; font-size:13px; line-height:1.8; color:var(--case-muted); }
.mood-ds-application-grid li + li { margin-top:12px; }
.mood-ds-states { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:40px; }
.mood-ds-states article > small { color:var(--case-gold); font-size:11px; }
.mood-ds-state-art { display:grid; place-items:center; height:112px; border-radius:15px; background:#F5F3F9; margin:12px 0 20px; }
.mood-ds-state-choice,.mood-ds-state-saved { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-width:130px; min-height:48px; border-radius:15px; padding:12px 18px; color:#414365; background:#fff; font-size:15px; }
.mood-ds-state-choice.is-selected { background:#E2E2F7; box-shadow:inset 0 0 0 1.5px #8388BB; }
.mood-ds-state-saved { background:#E9EFEE; color:#3C6558; font-size:14px; }
.mood-ds-states p { font-size:12px; }
.mood-ds-next { display:flex; flex-wrap:wrap; gap:18px 30px; margin-top:38px; padding-top:25px; font-size:13px; }
@media(max-width:900px) {
 .mood-ds-heading { grid-template-columns:1fr; gap:12px; }
 .mood-ds-feelings,.mood-ds-palette,.mood-ds-surface-grid,.mood-ds-usage-grid,.mood-ds-states { gap:28px 18px; }
 .mood-ds-character { min-height:180px; }
 .mood-ds-character img { width:120px; height:120px; }
 .mood-ds-geometry { gap:28px; }
}
@media(max-width:600px) {
 .mood-ds { margin:55px 0 72px; }
 .mood-ds-nav { grid-template-columns:1fr 1fr; gap:0 20px; }
 .mood-ds-section { margin-top:50px; padding-top:28px; }
 .mood-ds-feelings { grid-template-columns:1fr; }
 .mood-ds-feeling { display:grid; grid-template-columns:108px minmax(0,1fr); gap:0 18px; }
 .mood-ds-character { grid-row:1 / span 3; min-height:145px; margin:0; border-radius:16px; }
 .mood-ds-character img { width:92px; height:92px; }
 .mood-ds-feeling h4 { font-size:16px; align-self:end; }
 .mood-ds-feeling p { font-size:12px; }
 .mood-ds-palette,.mood-ds-usage-grid { grid-template-columns:1fr 1fr; }
 .mood-ds-contrast,.mood-ds-geometry,.mood-ds-surface-grid,.mood-ds-two-notes,.mood-ds-application-grid { grid-template-columns:1fr; gap:26px; }
 .mood-ds-type-specimen > div { padding:22px 12px; }
 .mood-ds-type-specimen strong { font-size:16px; }
 .mood-ds-type-specimen small { font-size:10px; }
 .mood-ds-type-table > div { grid-template-columns:1.1fr 1.2fr .6fr; gap:7px 12px; font-size:12px; }
 .mood-ds-type-table > div > span:last-child { grid-column:1 / -1; font-size:11px; }
 .mood-ds-type-head > span:last-child { display:none; }
 .mood-ds-icon-rule { gap:18px; align-items:flex-start; }
 .mood-ds-icon-rule svg { width:70px; height:70px; flex-basis:70px; }
 .mood-ds-material { height:145px; }
 .mood-ds-usage-art { height:125px; padding:12px; }
 .mood-ds-usage-grid h4 { font-size:14px; }
 .mood-ds-bad-button { padding:13px 18px; }
 .mood-ds-color-only { width:32px; height:32px; }
 .mood-ds-wrong-type { font-size:19px; }
 .mood-ds-states { grid-template-columns:1fr; }
 .mood-ds-state-art { height:100px; }
}

/* The cursor belongs to opened projects, including directly loaded case pages. */
.case-cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 900;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.case-cursor-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f7f7f5;
  box-shadow: 0 0 5px #ffffffa6, 0 0 17px #dcdcdc55;
  transition: opacity 140ms ease;
}
/* Keep the pointer legible on the light reading surfaces and image edges. */
html[data-appearance="light"] .case-cursor-dot {
  background: #26322f;
  box-shadow: 0 0 0 1px #ffffff99, 0 0 5px #26322f38, 0 0 12px #26322f1a;
}
.case-page.case-cursor-active { cursor: none; }
.case-page.case-cursor-active :is(a, button, summary, input, textarea, select, [role="button"], [contenteditable="true"]) { cursor: auto; }
.case-page.case-cursor-active .case-cursor-target,
.case-page.case-cursor-active .case-cursor-target * { cursor: pointer !important; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .case-page .case-cursor-reactive {
    transition: scale 320ms cubic-bezier(.22, .8, .25, 1), color 240ms ease,
      background-color 200ms ease, transform 250ms ease;
  }
  .case-page.case-cursor-active .case-cursor-target {
    scale: 1.025;
    color: color-mix(in srgb, var(--case-gold) 80%, white);
  }
}
@media (hover: none), (pointer: coarse), (max-width: 760px), (prefers-reduced-motion: reduce) {
  .case-cursor-dot { display: none; }
}

/* Keep the sentence intact: only its emphasis changes, never its geometry. */
.case-page .case-keyword-line {
  --keyword-light: color-mix(in srgb, var(--case-gold) 82%, white);
}
.case-page .case-keyword-token {
  transition: color 180ms ease, opacity 180ms ease, text-shadow 180ms ease;
}
.case-page .case-keyword-line .case-keyword {
  color: inherit;
  font: inherit;
  font-style: italic;
  text-decoration: none;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.case-page .case-keyword-line .case-keyword:focus-visible {
  color: var(--keyword-light);
  opacity: 1;
  outline: 1px solid var(--case-gold);
  outline-offset: 4px;
  text-shadow: 0 0 16px color-mix(in srgb, var(--case-gold) 28%, transparent);
}
.case-page .case-keyword-line:has(.case-keyword:focus-visible) .case-keyword-token:not(:focus-visible) { opacity: .6; }
@media (hover: hover) and (pointer: fine) {
  .case-page .case-keyword-line:has(.case-keyword:hover) .case-keyword-token { opacity: .6; }
  .case-page .case-keyword-line:has(.case-keyword:hover) .case-keyword:hover {
    color: var(--keyword-light);
    opacity: 1;
    text-shadow: 0 0 16px color-mix(in srgb, var(--case-gold) 28%, transparent);
  }
}
.case-page.case-cursor-active .case-keyword { cursor: none !important; }
body.motion-off .case-page .case-keyword-token { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .case-page .case-keyword-token { transition: none; }
}

/* Air around original lettering and live typography samples in every Work case. */
.case-page .work-type-evidence {
  padding-block:clamp(40px,3.4vw,64px);
  row-gap:36px;
}
.case-page .work-type-evidence img {
  box-sizing:content-box;
  padding-block:clamp(24px,2.2vw,40px);
  background:var(--type-reference-paper,#fff);
}
.case-page[data-case="fellou"] .work-type-evidence { --type-reference-paper:#231916; }
.case-page[data-case="solitude"] .work-type-evidence { --type-reference-paper:#efe7b1; }
.case-page[data-case="ms-tomato"] .work-type-evidence { --type-reference-paper:#000; }
.case-page .work-type-evidence figcaption { padding-top:22px; }
.case-page :is(.work-ds-type-board,.nexo-ds-type-specimens > div,.mood-ds-type-specimen > div) {
  padding-block:clamp(40px,3.4vw,64px);
}
@media(max-width:760px) {
  .case-page .work-type-evidence { padding-block:32px; row-gap:32px; }
  .case-page .work-type-evidence img { padding-block:24px; }
  .case-page :is(.work-ds-type-board,.nexo-ds-type-specimens > div,.mood-ds-type-specimen > div) { padding-block:32px; }
}

/* CASE DISCLOSURE V1 — an editorial preview, not an isolated plus sign. */
.case-page details.case-disclosure {
  --disclosure-rule:color-mix(in srgb,var(--case-ink) 19%,transparent);
  border-block:0;
  margin-block:40px;
  overflow-anchor:none;
  scroll-margin-top:var(--chapter-scroll-offset,110px);
}
.case-page details.case-disclosure > summary {
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:clamp(16px,2.5vw,36px);
  align-items:center;
  min-height:140px;
  padding:26px 12px;
  border:0;
  list-style:none;
  cursor:pointer;
  color:var(--case-ink);
  transition:background-color 220ms ease;
}
.case-page details.case-disclosure > summary::-webkit-details-marker { display:none; }
.case-page details.case-disclosure > summary::marker { content:''; }
.case-page details.case-disclosure > summary:focus-visible {
  outline:2px solid var(--case-gold);outline-offset:5px;
}
.case-page details.case-disclosure > summary span {
  font-size:inherit;color:inherit;transform:none;
}
.case-page .case-disclosure .case-disclosure-label {
  min-width:0;display:block;font-size:clamp(17px,1.7vw,22px);line-height:1.5;
  font-weight:400;letter-spacing:-.015em;overflow-wrap:anywhere;
}
.case-page .case-disclosure-label strong { font:inherit;font-weight:500; }
.case-page .case-disclosure-label small {
  display:block;margin-top:9px;max-width:55ch;
  font-size:12px;line-height:1.7;letter-spacing:.01em;color:var(--case-muted);
}
.case-page .case-disclosure > summary .case-disclosure-preview {
  display:flex;gap:7px;align-items:center;
}
.case-page .case-disclosure > summary .case-disclosure-thumb {
  display:block;width:clamp(48px,5vw,72px);height:76px;
  overflow:hidden;border-radius:3px;background:transparent;
  border:0;
  transition:transform 280ms cubic-bezier(.22,.75,.25,1);
}
.case-page .case-disclosure .case-disclosure-thumb img {
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  padding:0;margin:0;border:0;filter:none;transform:none;
}
.case-page .case-disclosure .case-disclosure-thumb--mark img {
  object-fit:contain;filter:brightness(0) invert(1);opacity:.9;
}
:root[data-appearance="light"] .case-page .case-disclosure .case-disclosure-thumb--mark img {
  filter:brightness(0);
}
.case-page .case-disclosure > summary .case-disclosure-action {
  display:flex;align-items:center;justify-content:flex-end;gap:13px;
  font-size:12px;line-height:1.5;white-space:nowrap;
}
.case-page .case-disclosure .case-disclosure-arrow {
  display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;
  border:1px solid var(--disclosure-rule);border-radius:50%;
  transition:background-color 220ms,color 220ms;
}
.case-page .case-disclosure-arrow svg { display:block;transition:transform 320ms cubic-bezier(.22,.75,.25,1); }
.case-page .case-disclosure[data-expanded="true"] > summary .case-disclosure-arrow svg { transform:rotate(180deg); }
.case-page details.case-disclosure-text-only > summary { grid-template-columns:minmax(0,1fr) auto;min-height:104px; }
.case-page .case-disclosure-panel { display:flow-root; }
.case-page .case-disclosure-inner { display:flow-root; }
.case-page .case-disclosure-inner > .study-figure { max-width:920px;margin:28px auto 36px; }
.case-page .case-disclosure-footer {
  display:flex;justify-content:center;padding:28px 0 38px;
}
.case-page .case-disclosure-close {
  display:inline-flex;align-items:center;justify-content:center;gap:28px;
  min-height:48px;padding:10px 12px 10px 24px;margin:0;
  border:1px solid var(--disclosure-rule);border-radius:999px;
  background:transparent;color:var(--case-ink);font:inherit;font-size:13px;
  cursor:pointer;transition:background-color 220ms,border-color 220ms;
}
.case-page .case-disclosure-close .case-disclosure-arrow { width:28px;height:28px;border:0; }
.case-page .case-disclosure-close .case-disclosure-arrow svg { transform:rotate(180deg); }
.case-page .case-disclosure-close:focus-visible { outline:2px solid var(--case-gold);outline-offset:4px; }
@media(hover:hover) {
  .case-page details.case-disclosure > summary:hover { background:color-mix(in srgb,var(--case-ink) 3%,transparent); }
  .case-page .case-disclosure > summary:hover .case-disclosure-thumb:nth-child(1) { transform:translateY(-3px) rotate(-2deg); }
  .case-page .case-disclosure > summary:hover .case-disclosure-thumb:nth-child(2) { transform:translateY(-5px); }
  .case-page .case-disclosure > summary:hover .case-disclosure-thumb:nth-child(3) { transform:translateY(-3px) rotate(2deg); }
  .case-page .case-disclosure > summary:hover .case-disclosure-arrow { background:var(--case-ink);color:var(--nz-bg); }
  .case-page .case-disclosure-close:hover { background:color-mix(in srgb,var(--case-ink) 5%,transparent);border-color:var(--case-muted); }
}
@media(max-width:1000px) {
  .case-page details.case-disclosure > summary { grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;padding:26px 8px; }
  .case-page .case-disclosure > summary .case-disclosure-label { grid-column:1;grid-row:1; }
  .case-page .case-disclosure > summary .case-disclosure-preview { grid-column:2;grid-row:1 / 3; }
  .case-page .case-disclosure > summary .case-disclosure-action { grid-column:1;grid-row:2;justify-content:flex-start; }
  .case-page .case-disclosure > summary .case-disclosure-thumb { width:54px;height:68px; }
  .case-page details.case-disclosure-text-only > summary .case-disclosure-action { grid-column:2;grid-row:1; }
}
@media(max-width:600px) {
  .case-page details.case-disclosure { margin-block:28px; }
  .case-page details.case-disclosure > summary { grid-template-columns:1fr;gap:18px;padding:24px 4px; }
  .case-page .case-disclosure > summary .case-disclosure-label { grid-column:1;grid-row:1;font-size:19px; }
  .case-page .case-disclosure-label small { font-size:12px;max-width:none; }
  .case-page .case-disclosure > summary .case-disclosure-preview { grid-column:1;grid-row:2;justify-content:flex-start;gap:7px; }
  .case-page .case-disclosure > summary .case-disclosure-thumb { width:46px;height:54px; }
  .case-page .case-disclosure > summary .case-disclosure-action { grid-column:1;grid-row:2;justify-self:end;gap:9px;font-size:11px; }
  .case-page .case-disclosure .case-disclosure-arrow { width:36px;height:36px; }
  .case-page details.case-disclosure-text-only > summary { grid-template-columns:1fr; }
  .case-page details.case-disclosure-text-only > summary .case-disclosure-action { grid-column:1;grid-row:2;justify-self:start; }
  .case-page .case-disclosure-footer { padding:24px 0 32px; }
}
@media(max-width:380px) {
  .case-page .case-disclosure > summary .case-disclosure-thumb { width:36px;height:46px; }
  .case-page .case-disclosure > summary .case-disclosure-preview { gap:5px; }
}
/* A clear invitation to open the guidelines, with room for its preview. */
.case-page details.case-disclosure-guidelines > summary .case-disclosure-hint {
  display:block;margin-top:14px;max-width:44ch;
  font-size:13px;line-height:1.65;letter-spacing:0;color:var(--case-muted);
}
.case-page details.case-disclosure-guidelines > summary .case-disclosure-action {
  justify-content:center;gap:14px;min-height:48px;padding:10px 16px 10px 20px;
  border-radius:999px;background:var(--case-ink);color:var(--nz-bg,#090f10);
  font-size:14px;font-weight:500;line-height:1.5;
  transition:background-color 220ms ease,color 220ms ease,box-shadow 220ms ease;
}
.case-page details.case-disclosure-guidelines > summary .case-disclosure-arrow {
  width:24px;height:24px;border:0;background:transparent;color:inherit;
}
.case-page details.case-disclosure-guidelines[data-expanded="true"] > summary .case-disclosure-action {
  background:transparent;color:var(--case-ink);box-shadow:inset 0 0 0 1px var(--disclosure-rule);
}
@media(hover:hover) {
  .case-page details.case-disclosure-guidelines > summary:hover .case-disclosure-action {
    background:color-mix(in srgb,var(--case-ink) 88%,var(--case-gold));color:var(--nz-bg,#090f10);
  }
}
@media(max-width:1000px) {
  .case-page details.case-disclosure-guidelines > summary .case-disclosure-action { justify-self:start; }
}
@media(max-width:600px) {
  .case-page details.case-disclosure-guidelines > summary .case-disclosure-action {
    grid-column:1;grid-row:3;justify-self:stretch;justify-content:space-between;
    gap:12px;font-size:14px;white-space:normal;
  }
  .case-page details.case-disclosure-guidelines.case-disclosure-text-only > summary .case-disclosure-action { grid-row:2; }
}
@media(prefers-reduced-motion:reduce) {
  .case-page .case-disclosure *, .case-page .case-disclosure > summary { transition:none!important; }
}
@media print {
  .case-page .case-disclosure-preview,.case-page .case-disclosure-action,.case-page .case-disclosure-footer,.case-page .case-disclosure-hint { display:none!important; }
  .case-page .case-disclosure-panel { height:auto!important;overflow:visible!important; }
}

/* Keep chapter and guideline headings clear of the shared sticky navigation. */
.case-page :is(.fellou-chapter,.study-section,.nexo-chapter,.nexo-chapter h2,.nexo-closing,.msu-chapter,.msu-role,.work-ds,.work-ds-section,.nexo-ds,.nexo-ds-section,.mood-ds,.mood-ds-section) { scroll-margin-top:var(--chapter-scroll-offset,110px); }
@media(max-width:760px) {
  .case-page { --chapter-scroll-offset:90px; }
}