:root { --ink:#10100f; --paper:#f4f1eb; --white:#fff; --smoke:#5e5b55; --line:#d8d2c7; --petrol:#153d3d; --orange:#b14d22; --sand:#d9ceb9; --serif:"Cormorant Garamond", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.5; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:4px; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--white); padding:10px; z-index:9; }
.skip-link:focus { left:10px; }
.site-header { background:var(--white); border-bottom:1px solid var(--line); position:relative; z-index:5; }
.masthead { min-height:96px; display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; padding:0 38px; }
.masthead-left,.masthead-right { display:flex; align-items:center; gap:22px; font-size:12px; font-weight:600; text-transform:uppercase; }
.masthead-right { justify-content:flex-end; }
.brand { display:grid; grid-template-columns:34px auto; grid-template-rows:auto auto; column-gap:9px; align-items:center; font-size:21px; font-weight:700; line-height:1; text-transform:uppercase; letter-spacing:2px; }
.brand img { grid-row:1 / 3; }
.brand small { font-size:8px; letter-spacing:2px; color:var(--smoke); margin-top:5px; }
.icon-link { font-size:11px; }
.film-lead { min-height:720px; position:relative; display:grid; place-items:center; overflow:hidden; background:#111; color:var(--white); }
.film-lead-image,.deals-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.film-shade,.article-hero-shade { position:absolute; inset:0; background:rgba(0,0,0,.42); }
.film-lead-content { position:relative; width:min(100%,780px); box-sizing:border-box; padding:80px 24px 72px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.roadbook-seal { width:150px; height:150px; margin-bottom:24px; }
.issue-line,.eyebrow,.story-kicker,.eyebrow-light { text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:1.6px; }
.issue-line,.eyebrow-light { color:var(--white); }
.film-lead h1 { width:100%; margin:12px 0 14px; font-family:var(--serif); font-weight:600; font-size:clamp(50px,5.6vw,82px); line-height:.9; overflow-wrap:anywhere; }
.film-lead p:not(.issue-line) { max-width:560px; font-size:18px; }
.light-link,.text-link { display:inline-flex; gap:10px; margin-top:16px; font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:1px; }
.light-link { color:var(--white); border-bottom:1px solid currentColor; padding-bottom:6px; }
.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:baseline; border-bottom:1px solid var(--ink); padding-bottom:14px; margin-bottom:26px; }
.section-heading h2 { margin:0; font-family:var(--sans); font-size:18px; text-transform:uppercase; letter-spacing:1px; }
.section-heading a,.section-heading span { font-size:12px; font-weight:600; color:var(--smoke); }
.journal-section { background:var(--white); padding:38px 32px 46px; overflow:hidden; }
.journal-scroll { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px, 32vw); gap:28px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.story-card { min-width:0; }
.story-image { display:block; aspect-ratio:1.28; overflow:hidden; background:#ddd; }
.story-image img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.story-card:hover img,.atlas-card:hover img { transform:scale(1.035); }
.story-copy { padding:14px 0 0; }
.story-kicker { color:var(--orange); display:block; margin-bottom:8px; }
.story-copy h3,.shelf-feature h3,.category-collection h3,.related-grid h3 { font-family:var(--serif); font-size:31px; line-height:.98; margin:0; font-weight:600; }
.story-copy p { color:var(--smoke); font-size:14px; margin:9px 0 0; }
.workshop-post { height:640px; position:relative; overflow:hidden; color:var(--white); background:var(--ink); }
.workshop-post>img { width:100%; height:100%; object-fit:cover; filter:brightness(.58) saturate(.8); }
.workshop-overlay { position:absolute; left:max(8vw,42px); bottom:62px; width:min(650px, calc(100% - 84px)); }
.workshop-overlay h2 { font-family:var(--serif); font-size:clamp(48px,6vw,86px); line-height:.89; margin:10px 0 16px; }
.workshop-overlay p:not(.eyebrow-light) { max-width:530px; font-size:17px; }
.editorial-shelf { padding:82px max(4vw,32px); background:var(--paper); }
.shelf-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr); gap:52px; }
.shelf-feature { display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:end; }
.shelf-feature>a { height:100%; min-height:440px; }
.shelf-feature>a img { width:100%; height:100%; object-fit:cover; }
.shelf-feature h3 { font-size:clamp(43px,4vw,69px); }
.shelf-feature p { color:var(--smoke); }
.shelf-stack { display:flex; flex-direction:column; gap:28px; }
.shelf-mini { display:grid; grid-template-columns:145px 1fr; gap:16px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.shelf-mini .story-image { aspect-ratio:1; }
.shelf-mini .story-copy { padding:0; }
.shelf-mini .story-copy h3 { font-size:27px; }
.shelf-mini .story-copy p { display:none; }
.roadside-kit { background:var(--ink); color:var(--white); display:grid; grid-template-columns:1.1fr .9fr; gap:90px; padding:76px max(8vw,38px); }
.kit-copy h2 { font-family:var(--serif); font-size:clamp(43px,5vw,74px); line-height:.93; margin:10px 0 20px; max-width:730px; }
.kit-copy p:not(.eyebrow-light) { max-width:560px; color:#cfcac0; }
.kit-list { align-self:end; border-top:1px solid #555; }
.kit-list a { display:grid; grid-template-columns:44px 1fr; gap:14px; border-bottom:1px solid #555; padding:19px 0; font-family:var(--serif); font-size:25px; line-height:1; }
.kit-list span { font-family:var(--sans); font-size:12px; color:#e3a47e; padding-top:5px; }
.category-atlas { padding:82px max(4vw,32px); background:#ddd4c4; }
.atlas-grid { display:grid; grid-template-columns:1.3fr .8fr .8fr; grid-template-rows:240px 240px; gap:12px; }
.atlas-card { position:relative; overflow:hidden; background:var(--ink); color:var(--white); padding:22px; display:flex; flex-direction:column; justify-content:flex-end; min-height:0; }
.atlas-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; transition:transform .45s ease; }
.atlas-card::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.3); }
.atlas-card span,.atlas-card strong,.atlas-card i { position:relative; z-index:1; }
.atlas-card span { font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.atlas-card strong { font-family:var(--serif); font-size:36px; line-height:1; margin-top:6px; }
.atlas-card i { position:absolute; right:22px; bottom:20px; font-style:normal; font-size:20px; }
.atlas-1 { grid-row:span 2; }.atlas-4 { grid-column:span 2; }
.site-footer { background:var(--white); border-top:1px solid var(--ink); padding:46px max(4vw,32px) 34px; display:grid; grid-template-columns:1fr 1fr; gap:22px 60px; }
.footer-mark { display:flex; align-items:center; gap:12px; font-size:24px; font-weight:700; text-transform:uppercase; letter-spacing:2px; }.site-footer>p { margin:0; max-width:560px; color:var(--smoke); }.footer-links { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:flex-end; font-size:12px; font-weight:700; text-transform:uppercase; }.footer-disclosure,.copyright { font-size:12px; }.copyright { grid-column:2; text-align:right; }
.archive-mast { min-height:460px; display:grid; grid-template-columns:1fr 1fr; background:#d9d0c2; }.archive-mast>div { padding:80px max(6vw,42px); align-self:center; }.archive-mast h1 { font-family:var(--serif); font-size:clamp(55px,6.5vw,96px); line-height:.88; margin:10px 0; }.archive-mast>img { width:100%; height:100%; object-fit:cover; }.archive-list { padding:20px max(6vw,42px) 86px; background:var(--white); }.archive-row { display:grid; grid-template-columns:62px 200px 1fr 40px; gap:24px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); }.archive-number { font-family:var(--serif); font-size:31px; color:var(--orange); }.archive-photo { height:130px; }.archive-photo img { width:100%; height:100%; object-fit:cover; }.archive-row h2 { font-family:var(--serif); font-size:43px; line-height:.95; margin:0; }.archive-row p { margin:7px 0 0; color:var(--smoke); }.row-link { font-size:27px; }
.category-mast { min-height:580px; display:grid; grid-template-columns:1.15fr .85fr; }.category-mast>img { width:100%; height:100%; object-fit:cover; }.category-mast>div { padding:clamp(56px,8vw,130px) clamp(32px,7vw,100px); display:flex; flex-direction:column; justify-content:center; }.category-mast h1 { font-family:var(--serif); font-size:clamp(62px,8vw,118px); line-height:.82; margin:12px 0; }.category-mast p:not(.eyebrow) { color:var(--smoke); max-width:400px; font-size:17px; }.category-mast.orange { background:#d45c2f; }.category-mast.petrol { background:#163f3e; color:var(--white); }.category-mast.petrol p:not(.eyebrow) { color:#d7e1dc; }.category-mast.ink { background:#111; color:#fff; }.category-mast.ink p:not(.eyebrow) { color:#ddd; }.category-mast.sand { background:#ded4c1; }.category-mast.green { background:#b7c2ae; }.category-editors-note { display:grid; grid-template-columns:220px minmax(0,640px); gap:30px; justify-content:center; padding:44px 32px; background:var(--white); border-bottom:1px solid var(--line); }.category-editors-note span { text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size:12px; }.category-editors-note p { margin:0; font-family:var(--serif); font-size:29px; line-height:1.04; }.category-collection { display:grid; gap:20px; padding:72px max(6vw,42px); background:var(--paper); }.category-layout-1 { grid-template-columns:1.2fr .8fr; }.category-layout-2 { grid-template-columns:repeat(3,1fr); }.category-layout-3 { grid-template-columns:1fr 1fr; background:#151515; color:#fff; }.category-layout-4 { grid-template-columns:repeat(4,1fr); }.category-layout-5 { grid-template-columns:1.4fr .6fr .6fr; }.category-lead { grid-row:span 2; }.category-lead .story-image { aspect-ratio:.95; }.category-layout-2 .category-lead,.category-layout-4 .category-lead { grid-row:auto; }.category-layout-4 .story-image { aspect-ratio:.86; }.category-layout-3 .story-copy p,.category-layout-3 .story-kicker { color:#d8d0c4; }.category-bottom-note { display:grid; grid-template-columns:1fr 1fr; min-height:380px; background:#e7e0d3; }.category-bottom-note img { width:100%; height:100%; object-fit:cover; }.category-bottom-note>div { padding:70px; align-self:center; }.category-bottom-note h2 { font-family:var(--serif); font-size:54px; line-height:.9; margin:10px 0; }
.article-hero { height:min(760px,82vh); position:relative; color:#fff; display:flex; align-items:flex-end; padding:70px max(8vw,42px); overflow:hidden; }.article-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.article-hero-copy { position:relative; max-width:1000px; }.article-hero-copy>p { font-size:12px; font-weight:700; letter-spacing:1.6px; }.article-hero h1 { font-family:var(--serif); font-size:clamp(58px,7.5vw,112px); line-height:.82; margin:13px 0 22px; }.article-hero-copy div { display:flex; gap:18px; font-size:12px; text-transform:uppercase; letter-spacing:1px; }.article-layout { display:grid; grid-template-columns:260px minmax(0,720px); gap:80px; justify-content:center; padding:78px 38px 100px; background:#fff; }.article-sidebar { border-top:2px solid var(--ink); padding-top:14px; font-size:14px; align-self:start; position:sticky; top:20px; }.article-sidebar ul { padding-left:18px; color:var(--smoke); }.article-sidebar li { margin:0 0 12px; }.article-sidebar a { font-size:12px; font-weight:700; text-transform:uppercase; }.article-body { font-size:19px; }.article-dek { font-family:var(--serif); font-size:37px; line-height:1.03; margin:0 0 34px; }.article-body p { margin:0 0 24px; }.article-callout { background:#ede5d6; padding:28px 30px; margin:42px 0; border-left:5px solid var(--orange); }.article-callout p:last-child { margin-bottom:0; }.article-tags { display:flex; flex-wrap:wrap; gap:10px; align-items:center; border-top:1px solid var(--line); padding-top:22px; font-size:12px; }.article-tags a { padding:6px 10px; border:1px solid var(--ink); font-weight:700; }.related-reads { padding:70px max(6vw,42px); background:var(--paper); }.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.deals-hero { min-height:650px; position:relative; color:#fff; display:flex; align-items:flex-end; padding:72px max(8vw,42px); overflow:hidden; }.deals-hero::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.42); }.deals-hero>div { position:relative; z-index:1; width:min(780px,100%); }.deals-hero h1,.dossier-hero h1 { font-family:var(--serif); font-size:clamp(60px,7.5vw,112px); line-height:.84; margin:12px 0 16px; }.deals-hero p:not(.eyebrow-light) { max-width:630px; font-size:18px; }.disclosure-ribbon { padding:22px max(8vw,42px); display:grid; grid-template-columns:180px 1fr auto; gap:26px; align-items:start; background:#d5d1c8; border-bottom:1px solid var(--ink); font-size:13px; }.disclosure-ribbon p { margin:0; }.disclosure-ribbon a { text-transform:uppercase; font-size:11px; font-weight:700; }.kit-dossiers { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink); padding:1px; }.kit-dossiers article { min-height:380px; background:var(--paper); padding:50px 42px; display:flex; flex-direction:column; align-items:flex-start; }.kit-dossiers span { font-weight:700; font-size:12px; letter-spacing:1px; }.kit-dossiers h2 { font-family:var(--serif); font-size:48px; line-height:.91; margin:30px 0 20px; }.kit-dossiers p { color:var(--smoke); }.kit-dossiers a { margin-top:auto; font-size:12px; font-weight:700; text-transform:uppercase; }.dossier-hero { min-height:640px; display:grid; grid-template-columns:1fr 1fr; background:#171717; color:#fff; }.dossier-hero>div { padding:clamp(58px,8vw,130px) clamp(32px,8vw,110px); align-self:center; }.dossier-hero>img { width:100%; height:100%; object-fit:cover; }.dossier-hero p:not(.eyebrow) { max-width:530px; color:#d9d5cd; }.dark-button { display:inline-block; margin-top:20px; padding:13px 18px; border:1px solid #fff; color:#fff; text-transform:uppercase; font-size:12px; font-weight:700; }.dossier-steps { display:grid; grid-template-columns:repeat(3,1fr); padding:72px max(7vw,42px); background:#d7caba; gap:42px; }.dossier-steps span { font-family:var(--serif); font-size:62px; color:var(--orange); }.dossier-steps h2 { font-family:var(--serif); font-size:43px; line-height:.9; margin:9px 0; }.dossier-note { display:grid; grid-template-columns:1fr 1fr; background:#fff; }.dossier-note>img { width:100%; height:100%; min-height:420px; object-fit:cover; }.dossier-note>div { padding:76px max(7vw,42px); align-self:center; }.dossier-note h2 { font-family:var(--serif); font-size:58px; line-height:.88; margin:10px 0; }
.fixed-hero { min-height:450px; display:grid; grid-template-columns:minmax(0,1fr) 42%; background:#d9d1c4; }.fixed-hero>div { min-width:0; padding:80px max(7vw,42px); align-self:center; }.fixed-hero h1 { font-family:var(--serif); font-size:clamp(64px,7vw,105px); line-height:.84; margin:10px 0 16px; overflow-wrap:anywhere; }.fixed-hero p:not(.eyebrow) { max-width:600px; font-size:18px; color:var(--smoke); }.fixed-hero>img { width:100%; height:100%; object-fit:cover; }.fixed-page-layout { display:grid; grid-template-columns:220px minmax(0,790px); gap:66px; justify-content:center; padding:70px 38px 94px; background:var(--paper); }.fixed-page-sidebar { border-top:2px solid var(--ink); padding-top:12px; font-size:13px; }.fixed-page-sidebar p { color:var(--smoke); }.fixed-page-visual-card { background:#fff; padding:clamp(32px,5vw,64px); border:1px solid var(--line); }.fixed-page-visual-card section+section { border-top:1px solid var(--line); margin-top:30px; padding-top:30px; }.fixed-page-visual-card h2 { font-family:var(--serif); font-size:43px; line-height:.9; margin:0 0 14px; }.fixed-page-visual-card p { font-size:16px; color:#393733; }.privacy-route-map .fixed-page-visual-card { background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg,#fff 1px, transparent 1px); background-size:42px 42px; background-color:#fbfaf7; }.contact-garage-desk .fixed-page-visual-card { border-top:8px solid var(--orange); }.about-roadbook .fixed-page-visual-card { border-left:8px solid var(--petrol); }.disclosure-register .fixed-page-visual-card { border-right:8px solid var(--orange); }
@media (max-width:900px) { .masthead { min-height:76px; padding:0 18px; grid-template-columns:1fr auto 1fr; }.masthead-left a:not(:first-child),.masthead-right a:not(:first-child) { display:none; }.masthead-left,.masthead-right { gap:0; }.brand { font-size:15px; grid-template-columns:26px auto; }.brand img { width:26px; height:26px; }.brand small { font-size:6px; }.film-lead { min-height:620px; }.journal-scroll { grid-auto-columns:78vw; }.workshop-post { height:520px; }.shelf-grid,.shelf-feature,.roadside-kit,.category-mast,.category-bottom-note,.article-layout,.dossier-hero,.dossier-note,.fixed-hero,.fixed-page-layout { grid-template-columns:1fr; }.shelf-feature>a { min-height:360px; }.shelf-stack { margin-top:12px; }.roadside-kit { gap:46px; }.atlas-grid { grid-template-columns:1fr 1fr; grid-template-rows:210px 210px 210px; }.atlas-1 { grid-row:span 2; }.atlas-4 { grid-column:span 1; }.site-footer { grid-template-columns:1fr; }.footer-links,.copyright { justify-content:flex-start; text-align:left; grid-column:auto; }.archive-mast { grid-template-columns:1fr; }.archive-mast>img { min-height:320px; }.archive-row { grid-template-columns:36px 100px 1fr 24px; gap:14px; }.archive-photo { height:85px; }.archive-row h2 { font-size:28px; }.archive-row p { display:none; }.category-mast>img { min-height:360px; }.category-collection,.category-layout-1,.category-layout-2,.category-layout-3,.category-layout-4,.category-layout-5 { grid-template-columns:1fr; }.category-lead { grid-row:auto; }.category-lead .story-image { aspect-ratio:1.2; }.category-editors-note { grid-template-columns:1fr; }.category-bottom-note img { min-height:300px; }.category-bottom-note>div { padding:54px 32px; }.article-layout { gap:40px; padding:50px 24px 70px; }.article-sidebar { position:static; }.related-grid,.kit-dossiers,.dossier-steps { grid-template-columns:1fr; }.disclosure-ribbon { grid-template-columns:1fr; }.dossier-hero>img { min-height:350px; }.fixed-page-layout { gap:28px; padding:48px 24px 70px; }.fixed-hero>img { min-height:300px; } }
@media (max-width:520px) { .masthead { padding:0 13px; }.brand { letter-spacing:1px; }.film-lead-content { padding:66px 20px 54px; }.film-lead h1 { font-size:49px; line-height:.93; }.issue-line { max-width:100%; overflow-wrap:anywhere; }.film-lead p:not(.issue-line) { font-size:16px; }.workshop-overlay { left:24px; bottom:40px; width:calc(100% - 48px); }.workshop-overlay h2 { font-size:50px; }.editorial-shelf,.category-atlas { padding:56px 22px; }.journal-section { padding:30px 18px 38px; }.shelf-feature h3 { font-size:49px; }.shelf-mini { grid-template-columns:110px 1fr; }.shelf-mini .story-copy h3 { font-size:25px; }.atlas-grid { display:flex; flex-direction:column; }.atlas-card { min-height:210px; }.article-hero { height:610px; padding:40px 22px; }.article-hero h1 { font-size:50px; line-height:.88; overflow-wrap:anywhere; }.article-dek { font-size:32px; }.deals-hero h1,.dossier-hero h1 { font-size:55px; }.kit-dossiers article { min-height:300px; padding:38px 26px; }.fixed-hero>div { padding:60px 24px; }.fixed-page-visual-card { padding:30px 24px; }.fixed-page-visual-card h2 { font-size:38px; } }