/* ========================================================= LYFSTYL shared layer: loaded on every page after the page's own styles. P2 Design pass 2 (end of file): tokens, type, links, grids, bands 5 Labels and data 6 Card-to-story transitions 7 Search (Cmd/Ctrl K) 3 Story page reading aids and Up next 4 Stories Index view ========================================================= */ :root{--font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} /* ---------- 5. Labels in Inter caps, data in mono ---------- */ .meta,.eyebrow, .story-card-category,.featured-story-category,.featured-story-kicker,.stories-hero-count, .article-breadcrumb,.article-share-label,.article-credits,.chapter-num, .up-next-label,.up-next-meta,.article-more,.cmdk-group,.cmdk-meta{ font-family:Inter,'Helvetica Neue',Arial,sans-serif;font-size:11px;font-weight:500;letter-spacing:.09em;line-height:1.6;text-transform:uppercase } .footer-bottom{font-family:Inter,'Helvetica Neue',Arial,sans-serif;font-size:12px;letter-spacing:0} /* Mono is reserved for data: dates, read times, story numbers */ .article-meta,.story-card-no,.data,#archive-date{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;text-transform:uppercase} .article-meta{font-size:12.5px} #archive-date{font-size:11.5px} /* ---------- 6. Card-to-story transitions ---------- */ @media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} .site-header{view-transition-name:site-header} .article-hero-img{view-transition-name:story-image} ::view-transition-old(root),::view-transition-new(root){animation-duration:.26s} ::view-transition-group(story-image){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.2,1)} ::view-transition-old(story-image),::view-transition-new(story-image){height:100%;width:100%;object-fit:cover;overflow:clip} ::view-transition-group(site-header){animation:none} } /* ---------- 7. Search trigger + palette ---------- */ .search-trigger{position:relative;display:inline-flex;align-items:center;padding:12px 0;border:0;background:none;color:inherit;font:inherit;cursor:pointer} .search-trigger::after{content:'';position:absolute;bottom:6px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s} .search-trigger:hover::after{transform:scaleX(1)} .search-trigger svg{display:none;width:17px;height:17px;flex-shrink:0} @media(max-width:900px){ .search-trigger{width:34px;height:34px;justify-content:center;padding:0} .search-trigger svg{display:block} .search-trigger .search-label,.search-trigger::after{display:none} } @media(max-width:420px){ .site-header .brand{width:88px} .site-header .nav-links{gap:14px} .site-header .search-trigger{width:30px;height:30px;border:0;margin:0 -6px 0 0} } html.cmdk-lock{overflow:hidden} .cmdk{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:min(14vh,140px) 16px 16px;background:rgba(10,10,10,.38)} html[data-theme="dark"] .cmdk{background:rgba(0,0,0,.6)} .cmdk.is-open{display:flex} .cmdk-panel{width:min(660px,100%);max-height:min(76vh,640px);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:6px;box-shadow:0 30px 90px rgba(0,0,0,.22);overflow:hidden;animation:cmdk-in .18s cubic-bezier(.2,.7,.2,1)} @keyframes cmdk-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}} .cmdk-search{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--rule)} .cmdk-search svg{width:18px;height:18px;color:var(--muted);flex-shrink:0} .cmdk-input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:400 18px/1.3 Inter,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.02em} .cmdk-input::placeholder{color:var(--muted)} .cmdk-esc{font:500 11px/1 Inter,'Helvetica Neue',Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;border-radius:2px;background:var(--surface);color:var(--muted);border:0;cursor:pointer} .cmdk-list{list-style:none;margin:0;padding:8px;overflow-y:auto;overscroll-behavior:contain} .cmdk-group{padding:14px 12px 6px;color:var(--muted)} .cmdk-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:8px 10px;border-radius:3px;cursor:pointer} .cmdk-item[aria-selected="true"]{background:var(--surface)} .cmdk-thumb{width:44px;height:44px;border-radius:2px;overflow:hidden;background:var(--surface);display:grid;place-items:center;color:var(--muted)} .cmdk-thumb img{width:100%;height:100%;object-fit:cover} .cmdk-thumb svg{width:18px;height:18px} .cmdk-title{font-size:15px;line-height:1.3;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cmdk-title mark{background:none;color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .cmdk-meta{margin-top:3px;color:var(--muted)} .cmdk-go{font-size:15px;color:var(--muted);opacity:0} .cmdk-item[aria-selected="true"] .cmdk-go{opacity:1} .cmdk-empty{padding:28px 12px;text-align:center;color:var(--muted);font-size:15px} .cmdk-foot{display:flex;gap:18px;padding:11px 18px;border-top:1px solid var(--rule);font-size:12px;line-height:1.4;color:var(--muted)} .cmdk-foot kbd{font:inherit;padding:2px 5px;border-radius:2px;background:var(--surface)} @media(max-width:600px){.cmdk{padding:12px}.cmdk-panel{max-height:calc(100dvh - 24px)}.cmdk-foot{display:none}} /* ---------- 3. Story pages ---------- */ .site-header .nav{position:relative} .read-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden} .read-progress span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left} .nav-story-title{flex:1 1 auto;min-width:0;margin:0 24px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;letter-spacing:-.01em;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .3s,transform .3s} .site-header.show-story-title .nav-story-title{opacity:1;transform:none} @media(max-width:1000px){.nav-story-title{display:none}} .article-credits{max-width:1520px;margin:16px auto 0;padding-inline:var(--gutter);display:flex;flex-wrap:wrap;gap:6px 28px;font-size:11.5px;text-transform:uppercase;color:var(--muted)} .article-credits b{font-weight:400;color:var(--ink);margin-left:8px;text-transform:none;font-size:13px;letter-spacing:-.005em} .up-next{display:block;margin-top:112px;color:var(--ink)} .up-next-media{position:relative;width:100%;height:min(78vh,760px);overflow:hidden;background:var(--image-bg)} .up-next-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .up-next:hover .up-next-media img{transform:scale(1.03)} .up-next-body{max-width:1520px;margin:0 auto;padding:28px var(--gutter) 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 40px;align-items:start} .up-next-label{grid-column:1 / -1;display:flex;gap:16px;font-size:11.5px;text-transform:uppercase;color:var(--muted)} .up-next-title{font-size:clamp(34px,4vw,64px);font-weight:400;line-height:1.04;letter-spacing:-.05em;margin:0;max-width:20ch} .up-next-arrow{display:block;margin-top:2px;font-size:clamp(34px,4vw,64px);line-height:1.04;font-weight:300;transition:transform .35s cubic-bezier(.2,.7,.2,1)} .up-next:hover .up-next-arrow{transform:translateX(8px)} .article-more{max-width:1520px;margin:0 auto;padding:56px var(--gutter) 96px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12px;text-transform:uppercase;color:var(--muted)} .article-more a{display:inline-flex;gap:10px;color:var(--ink)} .article-more a span{color:var(--muted)} .article-more a:hover{text-decoration:underline;text-underline-offset:4px} @media(max-width:760px){ .up-next{margin-top:72px} .up-next-media{height:auto;aspect-ratio:4/5} .up-next-title{font-size:32px} .up-next-arrow{font-size:32px} .article-more{padding-block:40px 64px;flex-direction:column} } /* ---------- 4. Stories Index view ---------- */ .stories-index-heading{align-items:center} .view-toggle{display:inline-flex;gap:22px} .view-toggle button{min-height:36px;padding:0;border:0;background:none;color:var(--muted);font-size:14px;cursor:pointer;transition:color .2s;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1px} .view-toggle button:hover{color:var(--ink)} .view-toggle button[aria-pressed="true"]{color:var(--ink);text-decoration-color:currentColor} .story-card-no,.story-card-year{display:none} .stories-grid.is-index{display:block;border-bottom:1px solid var(--rule)} .is-index .story-card{transition:opacity .25s} .is-index .story-card-link{display:grid;grid-template-columns:110px minmax(0,1fr) 190px 28px;align-items:baseline;gap:24px;padding:22px 0;border-top:1px solid var(--rule)} .is-index .story-card-img-wrap{display:none} .is-index .story-card-no{display:block;font-size:12px;line-height:1.6;color:var(--accent)} .is-index .story-card-no{order:1} .is-index .story-card-title{order:2;margin:0;font-size:clamp(20px,1.7vw,26px);transition:transform .35s cubic-bezier(.2,.7,.2,1)} .is-index .story-card-category{order:3;margin:0} .is-index .story-card-link::after{order:4;content:'→';font-size:18px;color:var(--muted);text-align:right;transition:color .2s,transform .3s} @media(hover:hover){ .is-index:hover .story-card:not(:hover){opacity:.38} .is-index .story-card-link:hover .story-card-title{transform:translateX(8px)} .is-index .story-card-link:hover::after{color:var(--ink);transform:translateX(4px)} } .index-preview{position:fixed;left:0;top:0;z-index:40;width:300px;aspect-ratio:1.4;border-radius:2px;overflow:hidden;background:var(--image-bg);pointer-events:none;opacity:0;transform:translate3d(-999px,-999px,0) scale(.94);transition:opacity .2s,scale .2s;box-shadow:0 18px 50px rgba(0,0,0,.18)} .index-preview.is-visible{opacity:1} .index-preview img{width:100%;height:100%;object-fit:cover} @media(max-width:760px){ .stories-index-heading{flex-wrap:wrap} .is-index .story-card-link{grid-template-columns:52px minmax(0,1fr);gap:4px 14px;padding:18px 0} .is-index .story-card-no{grid-row:1 / span 2} .is-index .story-card-title{grid-column:2;font-size:20px} .is-index .story-card-category{grid-column:2;order:3} .is-index .story-card-link::after{display:none} .index-preview{display:none} } @media(prefers-reduced-motion:reduce){.cmdk-panel{animation:none}.index-preview{display:none}} @media print{.search-trigger,.cmdk,.read-progress,.index-preview{display:none!important}} /* ========================================================= P2. Design pass 2 Warm paper, one red accent, one headline voice, one link style, near-square photographs, fewer rules, uneven grids. ========================================================= */ /* ---------- Tokens ---------- */ :root{ --paper:#F5F4F0;--ink:#151515;--muted:#5F5E59;--rule:#DCDAD3;--surface:#EAE8E2;--image-bg:#E7E5DF; --band:#ECEAE3;--accent:#C40016;--image-radius:2px;--panel-radius:4px } html[data-theme="dark"]{--paper:#0f0f0e;--ink:#f1f1ee;--muted:#a2a29c;--rule:#2a2a28;--surface:#1c1c1b;--image-bg:#1a1a19;--band:#171716;--accent:#E5484D} .image-wrap{background:var(--image-bg)} html[data-theme="dark"] .image-wrap{background:var(--image-bg)} /* ---------- Typesetting ---------- */ h1,h2,h3,.story-title,.story-card-title,.featured-story-title,.article-title,.up-next-title, .belief-line,.belief-deck,.today-line,.now-line,.hero-support,.cmdk-title{text-wrap:balance} p,li,figcaption,blockquote,.article-body{text-wrap:pretty} .article-body,.article-pullquote,blockquote{hanging-punctuation:first allow-end} time,.chapter-num,.footer-bottom{font-variant-numeric:tabular-nums} /* ---------- One headline voice: only the homepage hero shouts ---------- */ .closing h2{font-size:clamp(44px,5.6vw,84px);font-weight:400;line-height:1.02;letter-spacing:-.052em;margin-left:-.045em;text-transform:none} .closing .text-link .arrow{font-size:1em} .about-hero h1{font-size:clamp(54px,6.4vw,100px);font-weight:400;line-height:1;letter-spacing:-.055em;margin-left:-.05em} .stories-hero-title{font-weight:400;text-transform:none;letter-spacing:-.055em;line-height:1} /* ---------- One link style: underline and arrow ---------- */ .text-link.text-link{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;gap:.6em;min-width:0;min-height:0;padding:12px 0 7px;background:none;border-radius:0;font-weight:500} .text-link.text-link::after{content:'';display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);transform:none;transition:background .25s} .text-link.text-link:hover{background:none} .text-link.text-link:hover::after{background:var(--accent)} .hero-copy>.text-link.text-link{margin-top:24px;font-size:15px} .closing .text-link.text-link{padding-bottom:10px} /* Circled arrows become plain arrows */ .hero-story .title-row>.arrow,.featured-story-cta{width:auto;height:auto;border:0;border-radius:0;background:none!important;font-size:24px;margin-top:4px;display:inline-block} .hero-story .story-link:hover .title-row>.arrow,.featured-story-cta:hover{transform:translateX(5px)} .featured-story-cta{transition:transform .25s} /* Filters and share buttons become text */ .filter-bar{gap:6px 24px} .filter-btn,.filter-btn:hover{min-height:36px;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font-size:14px;font-weight:400;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1px;transition:color .2s,text-decoration-color .2s} .filter-btn:hover{color:var(--ink)} html[data-theme="dark"] .filter-btn:hover{background:none} .filter-btn.active,.filter-btn.active:hover{background:none;color:var(--ink);text-decoration-color:currentColor} .article-share{gap:6px 24px} .share-btn,.share-btn:hover,html[data-theme="dark"] .share-btn:hover{min-height:36px;padding:0;border-radius:0;background:none;font-weight:400;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color .2s} .share-btn:hover{text-decoration-color:var(--accent)} .share-btn svg{display:none} /* Active page in the nav carries the accent */ .nav-link[aria-current="page"]::after{background:var(--accent)} /* ---------- Photographs: near-square corners. Panels: small radius ---------- */ .chapter-now,.capabilities>.container,.capabilities>.service-shell{border-radius:var(--panel-radius)} .lightbox-img{border-radius:0} /* ---------- Fewer rules ---------- */ .section,.origin,.closing,.about,.belief,.chapters,.chapter,.stories-index,.article-nav,.article-share,.page-body{border-top:0} /* One full-bleed band per page */ .origin,.belief{background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)} .origin{padding-block:72px 104px;margin-top:24px} .belief{margin-block:24px} .chapters{padding-top:96px} /* ---------- Homepage: copy and the uneven archive ---------- */ @media(min-width:901px){ .origin-spread{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);align-items:end} .origin-body .origin-copy{grid-template-columns:1fr;gap:18px} } .origin-title h2{font-size:clamp(44px,4.6vw,72px)} .origin-body .origin-copy{margin-top:0} @media(min-width:901px){ .archive-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:44px;align-items:start} .archive-grid>.story:first-child{grid-column:1 / span 7;grid-row:1 / span 2} .archive-grid>.story:first-child .image-wrap{aspect-ratio:1.12} .archive-grid>.story:first-child .story-title{font-size:clamp(30px,2.6vw,42px);letter-spacing:-.04em;max-width:18ch} .archive-grid>.story:nth-child(n+2){grid-column:9 / span 4} .archive-grid>.story:nth-child(n+2) .image-wrap{aspect-ratio:1.5} .archive-grid>.story:nth-child(n+2) .story-title{font-size:clamp(20px,1.5vw,24px)} } @media(min-width:621px) and (max-width:900px){ .archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px var(--gap)} .archive-grid>.story:first-child{grid-column:1 / -1} .archive-grid>.story:nth-child(n+2) .story-title{font-size:22px} } /* ---------- Stories grid: 12 columns, a full-width story every ten ---------- */ .stories-grid:not(.is-index){grid-template-columns:repeat(12,minmax(0,1fr));row-gap:64px;align-items:start} .stories-grid:not(.is-index)>.story-card{grid-column:span 4} .stories-grid:not(.is-index) .story-card[data-orient="portrait"] .story-card-img-wrap{aspect-ratio:.8} @media(min-width:1101px){ .stories-grid:not(.is-index)>.story-card.is-feature{grid-column:1 / -1;margin-block:24px} .stories-grid:not(.is-index) .is-feature .story-card-link{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto auto;column-gap:var(--gap)} .stories-grid:not(.is-index) .is-feature .story-card-img-wrap{grid-column:1 / span 8;grid-row:1 / span 3;aspect-ratio:1.6!important} .stories-grid:not(.is-index) .is-feature[data-orient="portrait"] .story-card-img-wrap{grid-column:2 / span 5;aspect-ratio:.8!important} .stories-grid:not(.is-index) .is-feature .story-card-category{grid-column:9 / span 4;grid-row:2;margin:0} .stories-grid:not(.is-index) .is-feature[data-orient="portrait"] .story-card-category,.stories-grid:not(.is-index) .is-feature[data-orient="portrait"] .story-card-title{grid-column:8 / span 5} .stories-grid:not(.is-index) .is-feature .story-card-title{grid-column:9 / span 4;grid-row:3;margin-top:12px;font-size:clamp(32px,2.8vw,46px);line-height:1.08;letter-spacing:-.045em} } @media(max-width:1100px){.stories-grid:not(.is-index)>.story-card{grid-column:span 6}} @media(max-width:760px){ .stories-grid:not(.is-index){grid-template-columns:1fr;row-gap:48px} .stories-grid:not(.is-index)>.story-card{grid-column:1} .stories-grid:not(.is-index) .story-card[data-orient="portrait"] .story-card-img-wrap{aspect-ratio:.9} } .article-more a{font-size:14px;font-weight:400;letter-spacing:-.005em;text-transform:none;align-items:baseline} .article-more a span{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase} @media print{.origin,.belief{background:none;box-shadow:none}} /* Story dates stay in the markup and structured data, hidden from view */ .article-meta time,.article-meta time+.article-meta-sep,.up-next-label span:nth-child(3),.ab-card-meta time,.story-card-year{display:none}