/* ============================================================================= YQR DESIGN — CASE STUDY LAYER Loaded AFTER /css/style.css. Adds only what a case study needs; every colour, font and rhythm value comes from the tokens already declared in style.css. The page has two grounds: .cs-light the client's story — ivory paper, a hint of the client's own accent .cs-dark the studio's thinking — deep ink, YQR gold The turn between them is a change of room, not a change of heading. REUSE: a new case study needs this file plus a content page. Set --client on to that client's brand accent and nothing else changes. ============================================================================= */ :root{ /* client accent — overridden per case study on */ --client:#7b8b6c; /* large marks, rules, ornament */ --client-ink:#4f5d42; /* small text on ivory — AA against #F8FAFC */ --graphite:#14201a; /* studio ground; same ink as the site footer */ --graphite-2:#0f1813; /* inset panel inside the studio ground */ --hair-d:rgba(241,236,225,.17); } /* ---------- shared scaffolding ------------------------------------------- */ .cs-col{max-width:37rem;margin-left:auto;margin-right:auto;} .cs-measure{max-width:37rem;} /* --faint (2.84:1 on paper) fails AA at label sizes; these use --muted (5.16:1) */ .cs-lbl{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;color:var(--muted);} .cs-lbl.gold{color:var(--gold-ink);} .cs-lbl.client{color:var(--client-ink);} .cs-lbl.on-dark{color:rgba(241,236,225,.5);} .cs-lbl.on-dark.gold{color:var(--gold-2);} /* hairline modular grid — gap:1px over a ruled ground makes true hairlines with no doubled borders where cells meet. */ .cs-grid{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);} .cs-grid > .cs-cell{background:var(--bg);padding:clamp(24px,3vw,38px) clamp(20px,2.6vw,32px);} .cs-grid > .cs-cell.flush{padding:0;} .cs-g3{grid-template-columns:1fr 1.45fr 1fr;} .cs-g2{grid-template-columns:1fr 1fr;} .cs-g3even{grid-template-columns:repeat(3,1fr);} .cs-dark .cs-grid{background:var(--hair-d);border-color:var(--hair-d);} .cs-dark .cs-grid > .cs-cell{background:var(--graphite);} .cs-mid{display:flex;flex-direction:column;justify-content:center;} .cs-centre{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:16px;text-align:center;} /* ---------- subbar ------------------------------------------------------- */ .cs-subbar{border-bottom:1px solid var(--hair);} .cs-subbar .shell{display:flex;justify-content:space-between;gap:16px; padding-top:14px;padding-bottom:14px;flex-wrap:wrap;} .cs-subbar a{color:inherit;text-decoration:none;} .cs-subbar a:hover{color:var(--gold-ink);} /* ---------- hero --------------------------------------------------------- */ .cs-hero{padding:clamp(56px,8vw,104px) 0 clamp(32px,4vw,52px);} .cs-hero h1{font-family:var(--serif);font-weight:300;line-height:.94;letter-spacing:-.005em; font-size:clamp(52px,10vw,116px);color:var(--cream);margin:14px 0 0;} .cs-rule{width:52px;height:2px;background:var(--gold);margin:34px 0;} .cs-thesis{font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(21px,3vw,31px);line-height:1.4;color:var(--muted);max-width:31rem;} .cs-scope{margin-top:38px;} .cs-scrollmark{display:flex;align-items:center;gap:20px;margin-top:clamp(40px,6vw,74px);} .cs-scrollmark .ln{flex:1;height:1px;background:var(--hair);} /* ---------- roundel / postmark ------------------------------------------- */ .cs-roundel{width:132px;height:132px;} .cs-roundel text{font-family:var(--sans);font-size:8.2px;font-weight:500; letter-spacing:2.2px;fill:var(--client-ink);text-transform:uppercase;} .cs-roundel .ring{fill:none;stroke:var(--client);stroke-opacity:.5;} .cs-roundel .glyph{fill:none;stroke:var(--client-ink);stroke-width:1.5;stroke-linecap:round;} /* ---------- media -------------------------------------------------------- */ .cs-media{position:relative;overflow:hidden;background:var(--raise);border-radius:var(--r);} .cs-media img{width:100%;height:100%;object-fit:cover;} /* width/height attrs are set on every image for CLS; keep them from fixing height */ .cs-cell img{height:auto;} .cs-grid .cs-media{border-radius:0;} .ar-16x9{aspect-ratio:16/9;} .ar-3x2{aspect-ratio:3/2;} .ar-4x5{aspect-ratio:4/5;} .ar-1x1{aspect-ratio:1/1;} .ar-5x6{aspect-ratio:5/6;} .cs-figure{margin:0;} .cs-cap{font-family:var(--sans);font-size:13px;line-height:1.65;color:var(--muted);margin-top:14px;} .cs-dark .cs-cap{color:rgba(241,236,225,.45);} /* hero split — portrait plate beside the opening facts */ .cs-plate{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;} /* ---------- band + story ------------------------------------------------- */ .cs-band{padding:clamp(64px,8vw,116px) 0 clamp(24px,3vw,40px);text-align:center;} .cs-band h2{font-family:var(--serif);font-weight:300;line-height:1.06; font-size:clamp(32px,5.4vw,58px);color:var(--cream);margin-top:18px;} .cs-story{padding:0 0 clamp(48px,6vw,84px);font-size:19px;line-height:1.72;color:#3a4440;} .cs-story p{margin-bottom:26px;} .cs-story .lede{font-family:var(--serif);font-size:clamp(26px,3.4vw,34px);line-height:1.34; color:var(--cream);font-weight:300;} .cs-story .drop::first-letter{float:left;font-family:var(--serif);font-weight:400; font-size:4.3em;line-height:.74;padding:.06em .1em 0 0;color:var(--client-ink);} .cs-story em{font-style:italic;color:var(--client-ink);font-family:var(--serif);font-size:1.07em;} .cs-pull{font-family:var(--script);font-size:clamp(42px,7vw,74px);line-height:1;color:var(--gold); text-align:center;margin:clamp(44px,6vw,72px) 0;padding:clamp(30px,4vw,46px) 0; border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);} .cs-refuse{font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);line-height:1.45; color:var(--cream);text-align:center;margin:10px 0;} .cs-refuse + .cs-refuse{margin-top:18px;} /* ---------- the turn: studio layer --------------------------------------- */ .cs-dark{background:var(--graphite);color:rgba(241,236,225,.76);} .cs-dark h2,.cs-dark h3,.cs-dark strong{color:var(--ink-on-dark);} .cs-studio{padding:clamp(64px,9vw,128px) 0 clamp(72px,10vw,140px);font-size:17px;line-height:1.78;} .cs-studio h2{font-family:var(--serif);font-weight:300;line-height:1.08; font-size:clamp(32px,5vw,54px);margin:16px 0 28px;} .cs-studio h3{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;color:var(--gold-2);margin:clamp(46px,6vw,72px) 0 20px;} .cs-studio p{margin-bottom:19px;} .cs-studio .brief{font-family:var(--serif);font-size:clamp(22px,2.8vw,29px);line-height:1.4; color:var(--ink-on-dark);font-weight:300;margin-bottom:0;} /* channel cells inside the studio layer */ .cs-chan .n{font-family:var(--serif);font-size:23px;color:var(--ink-on-dark);margin:14px 0 8px;} .cs-chan p{font-size:15px;margin:0;} .cs-plate-type{display:flex;flex-direction:column;align-items:center;justify-content:center; background:var(--graphite-2);border-bottom:1px solid var(--hair-d);} .cs-plate-type .big{font-family:var(--serif);font-weight:300;line-height:1; font-size:clamp(38px,5.5vw,54px);color:var(--ink-on-dark);} .cs-plate-type .bar{display:block;width:28px;height:1px;background:var(--gold);margin:16px 0 14px;} /* routes explored */ .cs-routes{list-style:none;counter-reset:r;} .cs-routes li{counter-increment:r;position:relative;padding:26px 0 26px 62px; border-top:1px solid var(--hair-d);} .cs-routes li:last-child{border-bottom:1px solid var(--hair-d);} .cs-routes li::before{content:"0" counter(r);position:absolute;left:0;top:27px; width:36px;height:36px;border:1px solid var(--hair-d);border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--sans);font-size:10px;letter-spacing:.08em;color:rgba(241,236,225,.55);} .cs-routes .name{display:block;font-family:var(--serif);font-size:22px; color:var(--ink-on-dark);margin-bottom:7px;} .cs-routes p{margin:0;font-size:15px;} .cs-tag{display:inline-block;font-family:var(--sans);font-size:9px;font-weight:500; letter-spacing:.2em;text-transform:uppercase;padding:4px 11px;border-radius:999px; vertical-align:.3em;margin-left:10px;} .cs-tag.killed{border:1px solid var(--hair-d);color:rgba(241,236,225,.5);} .cs-tag.built{background:var(--gold);color:#12130f;} /* the decision */ .cs-decision{margin-top:26px;padding:clamp(26px,3.4vw,44px); background:var(--graphite-2);border:1px solid var(--hair-d);} .cs-decision .first{font-family:var(--serif);font-size:clamp(24px,3vw,30px);line-height:1.36; color:var(--ink-on-dark);font-weight:300;margin-bottom:20px;} .cs-decision p:last-child{margin-bottom:0;} /* ---------- postage composition ----------------------------------------- Flat by design. A drop shadow here would contradict the argument the surrounding section is making. --stamp-bg MUST equal the panel colour: the perforations are painted in it. Change one, change the other. */ .cs-paper{--stamp-bg:#eae7de;background-color:#eae7de; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E"); padding:clamp(26px,4vw,56px) clamp(20px,3.2vw,44px);color:#2b2a24;border-radius:var(--r);} .cs-postage{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(24px,3.4vw,44px);align-items:center;} .cs-postmeta{display:flex;flex-direction:column;gap:20px;} .cs-firstclass{font-family:var(--serif);font-weight:400;letter-spacing:.13em;text-transform:uppercase; font-size:clamp(24px,3.4vw,34px);line-height:1.1;color:#2b2a24;} .cs-postmark{width:158px;height:158px;opacity:.44;transform:rotate(-9deg);margin-left:-6px;} .cs-postmark text{font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:2.1px; fill:#2b2a24;text-transform:uppercase;} .cs-postmark .ring{fill:none;stroke:#2b2a24;stroke-width:1.6;} .cs-hand{font-family:var(--script);font-size:26px;line-height:1.2;color:#5a5346;transform:rotate(-2deg);} .cs-stamps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,32px);} .cs-stamp{position:relative;background:#fff;padding:12px;} .cs-stamp::before{content:"";position:absolute;inset:-6px;pointer-events:none; background: radial-gradient(circle 6px at 6px 6px, var(--stamp-bg) 97%, #0000 100%) 0 0/12px 12px repeat-x, radial-gradient(circle 6px at 6px 6px, var(--stamp-bg) 97%, #0000 100%) 0 100%/12px 12px repeat-x, radial-gradient(circle 6px at 6px 6px, var(--stamp-bg) 97%, #0000 100%) 0 0/12px 12px repeat-y, radial-gradient(circle 6px at 6px 6px, var(--stamp-bg) 97%, #0000 100%) 100% 0/12px 12px repeat-y;} /* a real photograph in a stamp arrives duotoned in the gold */ .cs-stamp-photo{position:relative;overflow:hidden;background:var(--gold);aspect-ratio:4/5;} .cs-stamp-photo img{width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.06);mix-blend-mode:multiply;} /* an empty stamp names the frame that does not exist yet */ .cs-stamp-ph{aspect-ratio:4/5;background:var(--gold);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:16px;text-align:center;padding:22px;} .cs-stamp-ph .loaf{width:62px;height:auto;opacity:.85;} .cs-stamp-ph .n{font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:rgba(24,20,12,.6);} .cs-stamp-ph .what{font-family:var(--serif);font-size:17px;line-height:1.3;color:#1d1a12;} .cs-stamp-cap{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:#67614f;margin-top:13px;text-align:center;} /* ---------- outcome ------------------------------------------------------ */ .cs-outcome{padding:clamp(64px,9vw,124px) 0;} .cs-quote{font-family:var(--serif);font-weight:300;line-height:1.3; font-size:clamp(28px,4.4vw,46px);color:var(--cream);margin:20px 0 22px;} .cs-attrib{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--muted);} .cs-voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px; background:var(--hair);border:1px solid var(--hair);margin-top:clamp(34px,4vw,52px);} .cs-voices blockquote{background:var(--bg);padding:clamp(22px,2.6vw,32px);margin:0; font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--cream);} .cs-voices cite{display:block;font-family:var(--sans);font-style:normal;font-size:10.5px; letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:16px;} /* byline */ .cs-byline{border-top:1px solid var(--hair);margin-top:clamp(44px,5vw,64px);padding-top:36px; display:flex;gap:24px;align-items:center;} .cs-portrait{width:74px;height:74px;flex:0 0 74px;border-radius:50%;overflow:hidden; background:var(--raise);border:1px solid var(--hair);} .cs-portrait img{width:100%;height:100%;object-fit:cover;} .cs-byline .txt{font-family:var(--sans);font-size:15px;line-height:1.7;color:var(--muted);} .cs-byline .txt strong{display:block;color:var(--cream);font-weight:500;font-size:16px;margin-bottom:3px;} /* ---------- related + next ----------------------------------------------- */ .cs-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px; background:var(--hair);border:1px solid var(--hair);} .cs-related a{display:block;background:var(--bg);padding:clamp(24px,3vw,34px); text-decoration:none;transition:background .4s;} .cs-related a:hover{background:var(--raise);} .cs-related .cs-lbl{display:block;} .cs-related .t{display:block;font-family:var(--serif);font-size:21px;line-height:1.3; color:var(--cream);margin:12px 0 8px;} .cs-related p{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--muted);margin:0;} .cs-next{border-top:1px solid var(--hair);padding:clamp(58px,7vw,104px) 0 clamp(64px,8vw,116px); text-align:center;} .cs-next .kicker{font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(21px,2.8vw,28px);line-height:1.42;color:var(--muted); max-width:32rem;margin:20px auto 32px;} /* ---------- input slot — must be greppable before publishing ------------- */ .cs-slot{position:relative;border:1px dashed #b58a3c;background:rgba(190,145,60,.07); padding:32px 24px 24px;margin:26px 0;border-radius:var(--r-sm);} .cs-slot::before{content:"NEEDS YOUR INPUT";position:absolute;top:-8px;left:22px; background:var(--bg);padding:0 8px;font-family:var(--sans);font-size:9px;font-weight:500; letter-spacing:.2em;color:#8c6520;} .cs-slot .ask{font-family:var(--sans);font-size:13.5px;line-height:1.7;color:#7a5a1e;margin-bottom:20px;} /* ---------- responsive --------------------------------------------------- */ @media(max-width:900px){ .cs-g3,.cs-g2,.cs-g3even,.cs-plate,.cs-postage{grid-template-columns:1fr;} .cs-roundel{width:112px;height:112px;} } @media(max-width:560px){ .cs-stamps{grid-template-columns:1fr;gap:30px;} .cs-story{font-size:18px;} .cs-byline{flex-direction:column;align-items:flex-start;} .cs-routes li{padding-left:0;padding-top:56px;} .cs-routes li::before{top:18px;} } @media(prefers-reduced-motion:reduce){ .cs-related a{transition:none;} } /* ---------- case study index (used on /portfolio/) ----------------------- One row per study: number, client, city, thesis. Add a row per case study; nothing else on the portfolio page changes. */ .cs-index{border-top:1px solid var(--hair);} .cs-index .row{display:grid;grid-template-columns:auto 1.1fr 1.6fr auto;gap:clamp(16px,3vw,44px); align-items:center;padding:clamp(24px,3.2vw,38px) 0;border-bottom:1px solid var(--hair); text-decoration:none;transition:padding-left .45s,background .45s;} .cs-index .row:hover{background:var(--raise);padding-left:14px;} .cs-index .no{font-family:var(--sans);font-size:11px;letter-spacing:.22em;color:var(--gold-ink);} .cs-index .client{font-family:var(--serif);font-size:clamp(24px,3vw,32px);font-weight:300; line-height:1.1;color:var(--cream);} .cs-index .client .where{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--muted);margin-top:8px;} .cs-index .thesis{font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(17px,1.9vw,21px);line-height:1.42;color:var(--muted);} .cs-index .go{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-ink);white-space:nowrap;} @media(max-width:820px){ .cs-index .row{grid-template-columns:1fr;gap:12px;} .cs-index .row:hover{padding-left:0;} .cs-index .go{margin-top:4px;} } @media(prefers-reduced-motion:reduce){ .cs-index .row{transition:none;} } /* ═══════════════════════════════════════════════════════════════════════════ PORTFOLIO PAGE — case-study-led blocks The portfolio leads with the thinking and closes with the wall of images. ═══════════════════════════════════════════════════════════════════════════ */ /* ---------- featured case study ------------------------------------------ */ .pf-feature{display:grid;grid-template-columns:1fr 1fr;gap:0; border:1px solid var(--hair);background:var(--hair);} .pf-feature > *{background:var(--bg);} .pf-feature .shot{position:relative;overflow:hidden;min-height:340px;} .pf-feature .shot img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.1s cubic-bezier(.2,.7,.2,1);} .pf-feature:hover .shot img{transform:scale(1.035);} .pf-feature .shot .badge{position:absolute;left:0;top:0;padding:12px 18px; background:var(--bg);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair); font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--gold-ink);} .pf-feature .body{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column; justify-content:center;} .pf-feature .who{font-family:var(--serif);font-weight:300;line-height:1.02; font-size:clamp(34px,4.6vw,58px);color:var(--cream);margin:14px 0 0;} .pf-feature .thesis{font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(19px,2.2vw,26px);line-height:1.4;color:var(--muted);margin:22px 0 0;} .pf-feature .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--hair);border:1px solid var(--hair);margin:clamp(26px,3vw,38px) 0 0;} .pf-feature .facts div{background:var(--bg);padding:16px 14px;} .pf-feature .facts .k{display:block;font-family:var(--sans);font-size:9.5px;font-weight:500; letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;} .pf-feature .facts .v{display:block;font-family:var(--serif);font-size:clamp(16px,1.7vw,19px); line-height:1.25;color:var(--cream);} .pf-feature .go{margin-top:clamp(26px,3vw,38px);} /* ---------- the studio, in one circle ------------------------------------ */ .pf-studio{display:flex;gap:clamp(22px,3vw,40px);align-items:center;flex-wrap:wrap;} .pf-studio .ring{width:150px;height:150px;flex:0 0 150px;border-radius:50%;overflow:hidden; border:1px solid var(--hair);background:var(--raise);} .pf-studio .ring img{width:100%;height:100%;object-fit:cover;display:block;} .pf-studio .say{flex:1 1 320px;} .pf-studio .say .q{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.6vw,29px); line-height:1.42;color:var(--cream);margin:12px 0 14px;} .pf-studio .say .n{font-family:var(--sans);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--muted);} /* ---------- method band --------------------------------------------------- */ .pf-method{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--hair);border:1px solid var(--hair);} .pf-method article{background:var(--bg);padding:clamp(26px,3vw,40px);} .pf-method .step{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;color:var(--gold-ink);} .pf-method h3{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.8vw,31px); line-height:1.14;color:var(--cream);margin:16px 0 14px;} .pf-method p{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.75; color:var(--muted);margin:0 0 14px;} .pf-method p:last-child{margin-bottom:0;} .pf-method em{font-style:italic;font-family:var(--serif);font-size:1.08em;color:var(--gold-ink);} @media(max-width:900px){ .pf-feature{grid-template-columns:1fr;} .pf-feature .shot{min-height:0;aspect-ratio:4/3;} .pf-method{grid-template-columns:1fr;} } @media(max-width:560px){ .pf-feature .facts{grid-template-columns:1fr;} .pf-studio .ring{width:118px;height:118px;flex:0 0 118px;} } @media(prefers-reduced-motion:reduce){ .pf-feature .shot img,.pf-feature:hover .shot img{transition:none;transform:none;} } /* ═══════════════════════════════════════════════════════════════════════════ LONG-FORM ARTICLE LAYER (.mc) For a case study whose Part One is a full researched article rather than a narrative. Everything is scoped under .mc so the article's generic class names (.sec, .stat, .fig, .tag …) cannot collide with the site stylesheet. CHART COLOUR — decided, not guessed. Two-series marks use #2a78d6 / #eb6834. Against surface #F8FAFC this is the only pair tested that passes all six checks (lightness band, chroma floor, CVD separation ΔE 24.7 protan, normal-vision ΔE 33.6, contrast ≥3:1). Every muted YQR-toned pair tried — gold vs teal, gold vs slate — FAILS the chroma floor: desaturating for the brand is exactly what makes two hues read as the same grey. Data marks answer to legibility, not to the palette. Single-series bars carry no identity problem and use YQR gold, with a value printed on every bar so the hue is never load-bearing. ═══════════════════════════════════════════════════════════════════════════ */ .mc{--a:var(--gold-ink);--accent:var(--gold-ink);/* alias: the article carries inline var(--accent) */--ink1:var(--cream);--ink2:#3a4440;--mut:var(--muted); --ru:var(--hair-2);--ru2:var(--hair);--pap:var(--bg);--pap2:var(--raise); --s1:#2a78d6;--s2:#eb6834;} .mc .wrap{max-width:39rem;margin-left:auto;margin-right:auto;} .mc .sec{padding:clamp(40px,5vw,72px) 0 0;} .mc .sec-head{margin-bottom:clamp(24px,3vw,38px);} .mc .lbl{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;color:var(--mut);} .mc .lbl.accent{color:var(--a);} .mc h2{font-family:var(--serif);font-weight:300;line-height:1.1;letter-spacing:-.005em; font-size:clamp(30px,4.4vw,46px);color:var(--ink1);margin-bottom:0;} .mc h3{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;color:var(--a);margin:clamp(38px,4.5vw,58px) 0 16px;} .mc p{font-size:19px;line-height:1.72;color:var(--ink2);margin-bottom:26px;} .mc strong{font-weight:500;color:var(--ink1);} .mc em{font-style:italic;} .mc .drop::first-letter{float:left;font-family:var(--serif);font-weight:400;font-size:4.3em; line-height:.74;padding:.06em .1em 0 0;color:var(--a);} .mc .pull{font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(24px,3.2vw,34px);line-height:1.34;color:var(--gold);text-align:left; margin:clamp(38px,4.5vw,58px) 0;padding:clamp(26px,3vw,38px) 0; border-top:1px solid var(--ru2);border-bottom:1px solid var(--ru2);} /* stat row */ .mc .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px; background:var(--ru2);border:1px solid var(--ru2);margin:clamp(30px,3.5vw,44px) 0;} .mc .stat{background:var(--pap);padding:26px 22px;} .mc .stat .v{font-family:var(--serif);font-size:clamp(34px,4vw,44px);font-weight:300;line-height:1; color:var(--ink1);margin-bottom:12px;} .mc .stat .k{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink2);margin:0;} .mc .stat .src{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--mut);margin:12px 0 0;} /* figures + charts */ .mc .fig{margin:clamp(34px,4vw,50px) 0;background:var(--bg-2);border:1px solid var(--ru2); padding:clamp(22px,2.6vw,32px);border-radius:var(--r-sm);} .mc .fig h4{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink1);margin:0 0 6px;} .mc .fig .sub{font-family:var(--sans);font-size:12.5px;color:var(--mut);margin:0 0 24px;line-height:1.55;} .mc .fig .note{font-family:var(--sans);font-size:12px;color:var(--mut);margin:22px 0 0;line-height:1.55;} .mc .bars{display:flex;flex-direction:column;gap:16px;} .mc .bar-row{display:grid;gap:6px;} .mc .bar-lab{font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--ink2);} .mc .bar-track{display:flex;align-items:center;gap:11px;} .mc .bar-fill{height:15px;border-radius:0 4px 4px 0;background:var(--gold);transition:opacity .15s;} .mc .bar-row:hover .bar-fill{opacity:.82;} .mc .bar-val{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink1); font-variant-numeric:tabular-nums;} .mc .grp{display:flex;flex-direction:column;gap:24px;} .mc .grp-cat{display:flex;flex-direction:column;gap:8px;} .mc .cat-lab{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink1);} .mc .grp-pair{display:flex;flex-direction:column;gap:2px;} .mc .legend{display:flex;gap:22px;margin:0 0 22px;flex-wrap:wrap;} .mc .legend span{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px; color:var(--ink2);} .mc .swatch{width:11px;height:11px;border-radius:2px;display:inline-block;} .mc details.table{margin:20px 0 0;} .mc details.table summary{font-family:var(--sans);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--mut);cursor:pointer;} .mc details.table table{width:100%;border-collapse:collapse;margin-top:14px; font-family:var(--sans);font-size:13px;} .mc details.table th,.mc details.table td{text-align:left;padding:8px 10px; border-bottom:1px solid var(--ru2);} .mc details.table th{color:var(--mut);font-weight:500;} .mc details.table td:last-child{text-align:right;font-variant-numeric:tabular-nums;} /* province comparison */ .mc .prov{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ru2); border:1px solid var(--ru2);margin:clamp(30px,3.5vw,44px) 0;} .mc .prov > div{background:var(--pap);padding:28px 24px;} .mc .p-name{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--a);margin:0 0 14px;} .mc .p-rule{font-family:var(--serif);font-size:clamp(20px,2.3vw,25px);line-height:1.32; color:var(--ink1);margin:0 0 12px;font-weight:300;} .mc .p-detail{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--ink2);margin:0;} /* clause plate — the article's own object language */ .mc .plate{border:1px solid var(--ink1);background:var(--pap);position:relative; padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,38px);margin:clamp(34px,4vw,50px) 0;} .mc .cl-no{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;color:var(--mut);margin:0 0 18px;} .mc .cl-body{font-family:var(--serif);font-size:clamp(22px,2.6vw,29px);line-height:1.42; font-weight:300;color:var(--ink1);margin:0 0 34px;} .mc .cl-body em{color:var(--a);font-style:italic;} .mc .sigline{display:grid;grid-template-columns:1fr 1fr;gap:32px;} .mc .sigline > div{border-top:1px solid var(--ink1);padding-top:9px;} .mc .sigline .who{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--mut);margin:0;} .mc .stampdate{position:absolute;top:22px;right:24px;font-family:var(--sans);font-size:9.5px; font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--a); border:1px solid var(--a);padding:5px 10px;transform:rotate(-3deg);opacity:.85;margin:0;} /* numbered lists */ .mc .qs{list-style:none;counter-reset:q;margin:24px 0 0;} .mc .qs li{counter-increment:q;position:relative;padding:22px 0 22px 46px; border-top:1px solid var(--ru2);font-family:var(--serif);font-size:clamp(18px,2vw,21px); line-height:1.5;color:var(--ink1);} .mc .qs li:last-child{border-bottom:1px solid var(--ru2);} .mc .qs li::before{content:counter(q);position:absolute;left:0;top:25px;font-family:var(--sans); font-size:11px;font-weight:500;color:var(--a);} .mc .stages{list-style:none;counter-reset:s;margin:clamp(26px,3vw,38px) 0;} .mc .stages > li{counter-increment:s;position:relative;padding:28px 0 28px 52px; border-top:1px solid var(--ru2);} .mc .stages > li:last-child{border-bottom:1px solid var(--ru2);} .mc .stages > li::before{content:"0" counter(s);position:absolute;left:0;top:32px; font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--a);} .mc .stages .st{font-family:var(--serif);font-size:clamp(21px,2.3vw,25px);line-height:1.3; margin:0 0 10px;color:var(--ink1);font-weight:300;} .mc .stages p{font-family:var(--sans);font-size:15px;line-height:1.7;color:var(--ink2);margin:0 0 12px;} .mc .stages p:last-child{margin-bottom:0;} .mc .stages .was{font-size:13.5px;color:var(--mut);} /* one-directional → mutual */ .mc .swap{margin:clamp(26px,3vw,38px) 0;border:1px solid var(--ru2);} .mc .swap-row{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ru2);} .mc .swap-row + .swap-row{margin-top:1px;} .mc .swap-row > div{background:var(--pap);padding:22px 20px;} .mc .swap-row .old{background:var(--pap2);} .mc .swap .tag{font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;margin:0 0 11px;} .mc .swap .old .tag{color:var(--mut);} .mc .swap .new .tag{color:var(--a);} .mc .swap .q{font-family:var(--serif);font-size:17px;line-height:1.45;margin:0;color:var(--ink1);} .mc .swap .old .q{color:var(--ink2);} .mc .swap .why{font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--mut);margin:11px 0 0;} /* disclaimer + sources */ .mc .disclaim{background:var(--pap2);border:1px solid var(--ru2);padding:24px; font-family:var(--sans);font-size:13.5px;line-height:1.7;color:var(--ink2); margin:clamp(34px,4vw,50px) 0 0;border-radius:var(--r-sm);} .mc .sources{border-top:1px solid var(--ru2);margin-top:clamp(44px,5vw,70px); padding:clamp(32px,4vw,48px) 0 0;} .mc .sources ol{font-family:var(--sans);font-size:13px;line-height:1.75;color:var(--ink2); padding-left:20px;margin:18px 0 0;} .mc .sources li{margin-bottom:10px;} .mc .sources a{color:var(--a);} /* article figures + inline diagrams */ .mc figure{margin:clamp(34px,4vw,50px) 0;} .mc figure img{width:100%;height:auto;display:block;border-radius:var(--r);} .mc figcaption{font-family:var(--sans);font-size:13px;line-height:1.65;color:var(--muted); margin-top:14px;} /* diagrams — the article's own object language */ .mc .dia{margin:clamp(30px,3.5vw,46px) 0;color:var(--cream);} .mc .dia-title{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--mut);margin:0 0 22px;} .mc .dotpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px);align-items:start;} .mc .dotpair svg{width:100%;height:auto;max-width:200px;display:block;} .mc .dot-lab{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink2);margin:16px 0 0;} .mc .dot-lab b{display:block;font-family:var(--serif);font-size:30px;font-weight:300; color:var(--ink1);line-height:1;margin-bottom:6px;} .mc .dia > svg{width:100%;height:auto;display:block;} .mc .dia-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;} .mc .dia-scroll > svg{min-width:560px;} @media(max-width:660px){ .mc p{font-size:18px;} .mc .prov,.mc .swap-row,.mc .sigline{grid-template-columns:1fr;} .mc .sigline{gap:20px;} .mc .qs li,.mc .stages > li{padding-left:38px;} .mc .dotpair{grid-template-columns:1fr;} } /* ── the satisfaction gap ──────────────────────────────────────────────── Two groups, one measure. A dumbbell was the first instinct, but at a twelve-point gap the two value labels overlap at every width worth supporting — so this is a paired bar instead: one row per group, both growing from a true zero, women first because 76.3 is the smaller number and the smaller number reads first. Colour follows the entity: women keep --s1 and men --s2 here exactly as they do in the minutes-per-day chart above, and each bar is directly labelled so the hue is never the only thing carrying identity. */ .mc .gapfig{margin:clamp(34px,4vw,52px) 0;background:var(--bg-2); border:1px solid var(--ru2);border-radius:var(--r-sm); padding:clamp(24px,3vw,36px);} .mc .gapfig h4{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink1); margin:0 0 6px;} .mc .gapfig .sub{font-family:var(--sans);font-size:12.5px;color:var(--mut); margin:0 0 26px;line-height:1.55;} .mc .gapfig .rows{display:flex;flex-direction:column;gap:20px;} .mc .gapfig .row{display:grid;grid-template-columns:1fr;gap:9px;} .mc .gapfig .who{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink2);} /* grid, not flex: the bar column must be identical on both rows or the two percentages are drawn on different scales */ .mc .gapfig .track{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;} .mc .gapfig .barwrap{display:block;background:var(--hair);border-radius:0 4px 4px 0;} .mc .gapfig .bar{display:block;height:22px;border-radius:0 4px 4px 0;min-width:2px;} .mc .gapfig .bar.w{background:var(--s1);} .mc .gapfig .bar.m{background:var(--s2);} .mc .gapfig .num{display:block;text-align:right;font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.4vw,34px); line-height:1;color:var(--ink1);font-variant-numeric:tabular-nums;} /* the gap, stated once, where the two bars differ */ .mc .gapfig .delta{display:flex;align-items:baseline;gap:12px;margin-top:22px; padding-top:18px;border-top:1px solid var(--ru2);} .mc .gapfig .delta .d{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.4vw,34px); line-height:1;color:var(--a);} .mc .gapfig .delta .t{flex:1;text-align:left;font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink2);} .mc .gapfig .minor{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ru2); border:1px solid var(--ru2);margin-top:clamp(26px,3vw,38px);} .mc .gapfig .minor > div{background:var(--bg-2);padding:18px 20px;} .mc .gapfig .minor .n2{font-family:var(--serif);font-weight:300;font-size:28px;line-height:1; color:var(--ink1);margin:0;} .mc .gapfig .minor .k2{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--ink2); margin:10px 0 0;} .mc .gapfig .sw{display:inline-block;width:9px;height:9px;border-radius:2px; margin-right:8px;vertical-align:.04em;} .mc .gapfig .sw.w{background:var(--s1);} .mc .gapfig .sw.m{background:var(--s2);} .mc .gapfig table caption{text-align:left;font-family:var(--sans);font-size:12px; color:var(--mut);padding:0 0 10px;} .mc .gapfig table th[scope="row"]{font-weight:400;color:var(--ink2);text-align:left;} .mc .gapfig .src{font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--mut); margin:22px 0 0;} .mc .gapfig .src a{color:var(--a);} .mc .gapfig .src .cite{display:block;margin-top:10px;font-size:11.5px;} .mc .gapfig .stamp{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; margin:20px 0 0;padding-top:16px;border-top:1px solid var(--ru2); font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--mut);} .mc .gapfig .stamp a{color:var(--a);text-decoration:none;} .mc .gapfig .stamp a:hover{text-decoration:underline;} @media(max-width:560px){ .mc .gapfig .minor{grid-template-columns:1fr;} .mc .gapfig .num{font-size:24px;} } /* both value columns are numeric, so both align right */ .mc .gapfig table td{text-align:right;font-variant-numeric:tabular-nums;} /* ── keyword / intent table (case study No.03) ──────────────────────────── */ .cs-dark .kwscroll{overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid var(--hair-d);border-radius:var(--r-sm);} .cs-dark .kwtable{width:100%;min-width:520px;border-collapse:collapse; font-family:var(--sans);font-size:14px;} .cs-dark .kwtable caption{text-align:left;padding:16px 18px;font-size:12px; color:rgba(241,236,225,.5);border-bottom:1px solid var(--hair-d);} .cs-dark .kwtable th,.cs-dark .kwtable td{text-align:left;padding:13px 18px; border-bottom:1px solid var(--hair-d);vertical-align:top;} .cs-dark .kwtable thead th{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-2);font-weight:500;} .cs-dark .kwtable tbody th{font-weight:500;color:var(--ink-on-dark);} .cs-dark .kwtable td{color:rgba(241,236,225,.7);} .cs-dark .kwtable .kw{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px;color:var(--gold-2);} .cs-dark .kwtable tbody tr:last-child th,.cs-dark .kwtable tbody tr:last-child td{border-bottom:0;} /* ── published price card ───────────────────────────────────────────────── */ .cs-dark .pricecard{border:1px solid var(--hair-d);border-radius:var(--r-sm); padding:clamp(24px,3vw,36px);background:var(--graphite-2);} .cs-dark .pricecard .ph{font-family:var(--serif);font-weight:300; font-size:clamp(24px,3vw,32px);line-height:1.15;color:var(--ink-on-dark);margin:0 0 10px;} .cs-dark .pricecard .pd{font-family:var(--sans);font-size:13px;line-height:1.6; color:rgba(241,236,225,.5);margin:0 0 26px;} .cs-dark .pricecard .pg{font-family:var(--sans);font-size:10.5px;font-weight:500; letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin:26px 0 12px;} .cs-dark .pricecard .plist{list-style:none;margin:0;padding:0;} .cs-dark .pricecard .plist li{display:flex;justify-content:space-between;align-items:baseline; gap:18px;padding:11px 0;border-bottom:1px solid var(--hair-d);} .cs-dark .pricecard .plist li:last-child{border-bottom:0;} .cs-dark .pricecard .plist span{font-family:var(--sans);font-size:14.5px; color:rgba(241,236,225,.78);} .cs-dark .pricecard .plist b{font-family:var(--serif);font-weight:300;font-size:22px; color:var(--ink-on-dark);font-variant-numeric:tabular-nums;} .cs-dark .pricecard .pf{font-family:var(--sans);font-size:12px;line-height:1.65; color:rgba(241,236,225,.45);margin:26px 0 0;padding-top:18px; border-top:1px solid var(--hair-d);} .cs-dark .pricecard .pf a{color:var(--gold-2);} /* product cells: images differ in height, so bottom-align the captions */ .cs-grid .cs-cell.prodcell{justify-content:flex-end;} .cs-grid .cs-cell.prodcell img{max-height:230px;width:auto;object-fit:contain;}