.guide-page main { overflow:clip; }
.guide-container { width:min(1280px,100% - 96px); margin-inline:auto; }
.guide-hero { padding:150px 0 70px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.guide-hero h1 { font-family:"Playfair Display",serif; font-size:clamp(2.55rem,3.6vw,3.6rem); line-height:1.12; letter-spacing:-.045em; margin:0 0 25px; text-wrap:balance; overflow-wrap:anywhere; }
.guide-hero h1 span { color:var(--orange); }
.guide-hero .lead { color:var(--ink-soft); margin:0 0 30px; font-size:1.0625rem; max-width:560px; }
.guide-hero .button { min-height:52px; }
.guide-hero.guide-hero--breadcrumb { row-gap:24px; }
.hero-breadcrumb { grid-column:1/-1; min-width:0; }
.hero-breadcrumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; list-style:none; margin:0; padding:0; color:var(--ink-soft); font-size:.8125rem; line-height:1.5; }
.hero-breadcrumb li { display:flex; align-items:center; min-width:0; gap:10px; }
.hero-breadcrumb li+li::before { content:'›'; color:#aa9d94; }
.hero-breadcrumb a { display:inline-flex; align-items:center; min-height:28px; }
.hero-breadcrumb a:hover { color:var(--orange-dark); }
.hero-breadcrumb [aria-current=page] { color:var(--ink); overflow-wrap:anywhere; }
.guide-navigation--links { justify-content:flex-end; }
.guide-media-note { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:36px; padding-top:36px; margin-top:32px; border-top:1px solid var(--line); }
.guide-media-note figure { min-width:0; margin:0; padding:10px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.guide-media-note img, .guide-media-note video { display:block; width:100%; height:auto; max-height:440px; object-fit:contain; border-radius:12px; background:#fafafa; }
.guide-media-note figcaption { padding:12px 6px 4px; font-size:.8125rem; color:var(--ink-soft); line-height:1.5; }
.guide-media-note figcaption span { display:block; margin-top:4px; font-size:.75rem; }
.guide-media-note>div { min-width:0; }
.guide-media-note h3 { font-family:'Playfair Display',serif; font-size:clamp(1.45rem,2.2vw,2rem); line-height:1.2; margin:0 0 16px; }
.guide-media-note p { color:var(--ink-soft); margin:0; }
@media(max-width:820px) { .guide-media-note { grid-template-columns:minmax(0,1fr); gap:22px; padding-top:28px; margin-top:28px; } .guide-hero.guide-hero--breadcrumb { row-gap:20px; } .guide-navigation--links { justify-content:flex-start; } }
.guide-visual { min-width:0; margin:0; border:1px solid var(--line); padding:10px; border-radius:26px; background:white; box-shadow:0 22px 60px rgba(50,33,20,.08); }
.guide-visual video, .guide-visual img { width:100%; aspect-ratio:16/9; height:auto; object-fit:contain; border-radius:17px; background:#f6f5f3; }
.guide-visual .portrait { aspect-ratio:4/3; }
.guide-visual figcaption { font-size:.875rem; padding:14px 12px 8px; color:var(--ink-soft); line-height:1.5; }
.guide-visual figcaption a { text-decoration:underline; text-underline-offset:3px; }
.guide-navigation { border-block:1px solid var(--line); padding:18px 0; display:flex; justify-content:space-between; gap:20px; align-items:center; font-size:.875rem; }
.guide-navigation nav { display:flex; gap:22px; flex-wrap:wrap; }
.guide-navigation a:hover { color:var(--orange-dark); }
.guide-navigation .crumb { color:var(--ink-soft); }
.guide-section { padding:76px 0; scroll-margin-top:100px; border-bottom:1px solid var(--line); }
.guide-section .eyebrow { display:block; font-size:.875rem; font-weight:800; color:var(--orange-dark); margin-bottom:16px; }
.guide-section h2 { max-width:820px; font:600 clamp(2rem,3vw,3rem)/1.14 "Playfair Display",serif; letter-spacing:-.035em; margin:0 0 28px; text-wrap:balance; }
.guide-section .section-intro { max-width:810px; color:var(--ink-soft); font-size:1.0625rem; margin:0 0 30px; }
.guide-inline-cta { margin-top:32px; }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.guide-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.editorial-card { min-width:0; padding:28px; border:1px solid var(--line); border-radius:20px; background:white; }
.editorial-card h3 { font-size:1.1875rem; line-height:1.35; margin:0 0 12px; letter-spacing:-.02em; }
.editorial-card p { color:var(--ink-soft); margin:0; font-size:1rem; }
.editorial-card a, .guide-prose a, .link-note a, .selector-result a { color:var(--orange-dark); text-decoration:underline; text-underline-offset:4px; }
.guide-prose { max-width:900px; }
.guide-prose p { color:var(--ink-soft); margin:0 0 20px; font-size:1rem; }
.guide-prose h3 { font-size:1.25rem; line-height:1.35; margin:30px 0 12px; }
.guide-prose ul, .guide-prose ol { padding-left:24px; color:var(--ink-soft); }
.guide-prose li { padding-left:6px; margin-bottom:12px; }
.guide-prose ol { list-style:none; padding-left:0; }
.guide-prose ol li { padding-left:0; }
.link-note { padding:22px 26px; border-left:3px solid var(--orange); background:#fafafa; margin:30px 0 0; color:var(--ink-soft); }
.guide-split { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.guide-split .editorial-card { padding:30px; }
.mini-timeline { display:grid; gap:0; }
.mini-timeline article { padding:24px 0; border-bottom:1px solid var(--line); }
.mini-timeline article:last-child { border-bottom:0; }
.mini-timeline h3 { margin:0 0 9px; font-size:1.125rem; }
.mini-timeline p { margin:0; color:var(--ink-soft); }
.decision-tool { padding:32px; border:1px solid #f0d6c9; background:#fffaf7; border-radius:22px; }
.decision-inputs { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.decision-inputs label { display:grid; gap:10px; font-weight:700; }
.decision-inputs select { width:100%; min-width:0; padding:13px 35px 13px 14px; border:1px solid #d9d1cb; background:#fff; border-radius:10px; font:inherit; color:var(--ink); }
.selector-result { margin:26px 0 0; padding-top:22px; border-top:1px solid #edd9cf; }
.selector-result h3 { font-size:1.2rem; margin:0 0 9px; }
.selector-result p { margin:0 0 12px; }
.quality-check { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quality-check label { display:flex; gap:12px; align-items:flex-start; background:#fff; padding:18px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.quality-check input { flex:0 0 auto; width:20px; height:20px; margin:3px 0 0; accent-color:var(--orange); }
.check-result { font-weight:600; margin-top:25px; color:var(--ink); }
.text-sample { padding:26px; margin:0; border-left:3px solid var(--orange); background:#fafafa; }
.text-sample p { margin:0; font-family:"Playfair Display",serif; font-size:1.45rem; line-height:1.45; }
.text-sample figcaption { font-size:.875rem; color:var(--ink-soft); margin-top:15px; }
.guide-table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.guide-table th, .guide-table td { text-align:left; padding:20px; vertical-align:top; font-size:1rem; border-bottom:1px solid var(--line); }
.guide-table th { background:#fafafa; font-size:.875rem; }
.guide-table tr:last-child td { border-bottom:0; }
.guide-table td { color:var(--ink-soft); }
.guide-table strong { color:var(--ink); }
.guide-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; }
.guide-faq h2 { margin-bottom:18px; }
.guide-faq .faq-answer p { font-size:1rem; padding-right:30px; }
.guide-faq .faq-answer a { color:var(--orange-dark); text-decoration:underline; text-underline-offset:3px; }
.guide-faq button { font-size:1rem; min-height:82px; }
.guide-end { padding:66px 0; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; }
.guide-end h2 { font:600 clamp(2rem,3vw,3rem)/1.14 "Playfair Display",serif; letter-spacing:-.03em; margin:0 0 15px; }
.guide-end p { max-width:750px; color:var(--ink-soft); margin:0; }
.source-note { font-size:.875rem!important; margin-top:22px!important; }
.source-note a { text-decoration:underline; text-underline-offset:3px; }
.media-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.media-pair figure { margin:0; }
.media-pair img, .media-pair video { width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; border-radius:15px; background:#f7f6f4; }
.media-pair figcaption { margin-top:12px; font-size:.875rem; color:var(--ink-soft); }
.guide-animation-toggle { border:1px solid var(--line); padding:8px 14px; background:white; color:var(--ink); border-radius:20px; cursor:pointer; font-size:.875rem; margin-top:12px; }
@media(max-width:1100px) { .guide-container { width:calc(100% - 64px); } .guide-hero { gap:36px; } .guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .guide-grid>article:last-child:nth-child(3) { grid-column:1/-1; } .guide-faq { gap:40px; } }
@media(max-width:820px) { .guide-container { width:calc(100% - 44px); } .guide-hero { grid-template-columns:1fr; padding:115px 0 45px; gap:35px; } .guide-hero h1 { font-size:clamp(2.25rem,5.8vw,3.2rem); max-width:680px; } .guide-visual { max-width:650px; width:100%; justify-self:center; } .guide-navigation { align-items:flex-start; flex-direction:column; } .guide-section { padding:55px 0; } .guide-split, .guide-faq { grid-template-columns:1fr; gap:30px; } .guide-end { grid-template-columns:1fr; gap:25px; } .guide-end .button { justify-self:start; } }
@media(max-width:540px) { .guide-grid, .guide-grid.two, .decision-inputs, .quality-check, .media-pair { grid-template-columns:1fr; } .guide-grid>article:last-child:nth-child(3) { grid-column:auto; } .editorial-card { padding:24px; } .guide-hero h1 { font-size:clamp(2rem,8.7vw,2.5rem); } .decision-tool { padding:24px 18px; } .guide-navigation nav { gap:12px 20px; } .guide-table, .guide-table tbody, .guide-table tr, .guide-table td { display:block; width:100%; } .guide-table thead { display:none; } .guide-table td { border-bottom:0; padding:10px 20px; } .guide-table tr { border-bottom:1px solid var(--line); padding:12px 0; } .guide-table tr:last-child { border:0; } .guide-table td::before { display:block; content:attr(data-label); font-size:.875rem; font-weight:800; color:var(--orange-dark); margin-bottom:5px; } .guide-faq .faq-answer p { padding-right:0; } }
@media(max-width:390px) { .guide-container { width:calc(100% - 32px); } .guide-hero { padding-top:110px; } .guide-visual { padding:7px; border-radius:20px; } .guide-visual figcaption { padding:12px 8px 6px; } .guide-section h2 { font-size:2rem; } .guide-navigation nav { font-size:.875rem; } }