/* Interior pages: Features, How it works, Shoe care (index and guides), Our
   story, the Journal, and the legal pages. Tokens and shared components come
   from site.css; this file adds only their layouts. */

/* ── Page hero: copy left, a photo or a screen right ── */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: var(--s-7) 0 var(--section-y-tight);
}

.page-hero-grid {
    display: grid;
    gap: var(--s-7);
    align-items: center;
}

@media (min-width: 960px) {
    .page-hero { padding: var(--s-8) 0; min-height: 560px; display: flex; align-items: center; }
    .page-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--grid-gap); }
}

.page-hero .display { font-size: clamp(44px, 5.8vw, 84px); max-width: 12ch; }
.page-hero:not(.on-dark) .display { color: var(--navy); }
.page-hero .eyebrow + .display { margin-top: var(--s-5); }
.page-hero .lede { max-width: 46ch; }

.page-hero-media { position: relative; min-height: 300px; }

/* A photo runs to the window's edge. */
.page-hero-photo {
    position: absolute;
    inset: 0 calc(-1 * var(--gutter)) 0 0;
    border-radius: 160px 0 0 0;
}

@media (min-width: 960px) {
    .page-hero-media { position: static; }
    .page-hero-photo { inset: 0 0 0 auto; width: 42vw; border-radius: 240px 0 0 0; }
}

.page-hero-mockup { width: auto; max-height: 520px; margin: 0 auto; }

.btn--outline {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* Plain intro (Journal, 404) */
.page-intro { padding: var(--s-7) 0 var(--section-y-tight); }
@media (min-width: 960px) { .page-intro { padding-top: var(--s-8); } }
.page-intro .display { font-size: clamp(48px, 7vw, 96px); max-width: 12ch; color: var(--navy); }
.page-intro .lede { max-width: 48ch; }

/* In-page index (Features) */
.page-index {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-6);
}

.page-index a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 40px;
    padding: 0 var(--s-4);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--line-strong);
    font-size: var(--fs-small);
    font-weight: 500;
    text-decoration: none;
    transition: box-shadow var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}

.page-index span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.on-dark .page-index a { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }
.on-dark .page-index a:hover { background: #fff; color: var(--navy); }
.on-dark .page-index span { color: var(--yellow); }
.on-dark .page-index a:hover span { color: var(--navy); }

/* ── Numbered rows (Features, How it works) ── */

.feature-row {
    padding: var(--section-y-tight) 0;
    border-top: 1px solid var(--line);
}

.feature-grid {
    display: grid;
    gap: var(--s-5) var(--s-6);
    align-items: center;
}

@media (min-width: 900px) {
    .feature-grid { grid-template-columns: auto minmax(0, 6fr) minmax(0, 4fr); gap: var(--grid-gap); align-items: start; }
    .feature-grid > .num { padding-top: 4px; }
}

.feature-copy .eyebrow::before { display: none; }
.feature-copy .h2 { font-size: var(--fs-h2-sm); max-width: 13ch; margin-top: var(--s-3); }
.feature-copy .lede { margin-top: var(--s-4); }
.feature-copy .btn { margin-top: var(--s-6); }

.feature-points {
    list-style: none;
    display: grid;
    gap: var(--s-4) var(--s-6);
    margin-top: var(--s-6);
}

@media (min-width: 600px) { .feature-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.feature-points li { padding-top: var(--s-3); border-top: 2px solid var(--ink); font-size: 15px; line-height: 1.5; }
.feature-points strong { display: block; font-weight: 700; letter-spacing: -0.01em; }
.feature-points span { display: block; color: var(--ink-2); margin-top: 2px; }

.feature-media { display: flex; justify-content: center; }
.feature-media .mockup { width: auto; max-height: 520px; }

@media (min-width: 900px) {
    .feature-media { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
    .feature-media .mockup { max-height: 600px; }
}

/* ── Steps rail (How it works) ── */

.steps-rail {
    list-style: none;
    display: grid;
    gap: var(--s-2);
    margin-top: var(--s-6);
    counter-reset: step;
}

@media (min-width: 600px) { .steps-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.steps-rail a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    height: 100%;
    padding: 12px var(--s-4);
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: box-shadow var(--t-fast) ease, transform var(--t-base) var(--ease);
}

.steps-rail a::before {
    counter-increment: step;
    content: "0" counter(step);
    font-family: var(--font-num);
    font-size: 22px;
    font-weight: 500;
    color: var(--navy);
}

.steps-rail a:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--yellow), var(--shadow-sm); }

/* ── Shoe care index ── */

.care-search {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    max-width: 480px;
    height: 56px;
    margin-top: var(--s-6);
    padding: 0 var(--s-5);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm);
    color: var(--ink-3);
    transition: box-shadow var(--t-fast) ease;
}

.care-search:focus-within { box-shadow: 0 0 0 2px var(--navy), var(--shadow-sm); }

.care-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 16px;
    color: var(--ink);
    outline: none;
}

.care-search input::placeholder { color: var(--ink-3); }

.care-index-hand { right: 8%; bottom: 10%; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.slot:is(.is-empty, .is-broken) ~ .care-index-hand { color: var(--navy); text-shadow: none; }

.care-browse { padding-top: var(--section-y-tight); }

.care-sub { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.025em; }

.materials {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-5);
    max-width: 760px;
}

@media (min-width: 560px) { .materials { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.materials a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 4px 12px;
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: box-shadow var(--t-fast) ease, transform var(--t-base) var(--ease);
}

.materials a:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--yellow), var(--shadow); }

.swatch {
    width: 100%;
    max-width: 56px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink-2);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(21, 21, 21, 0.12);
}

/* Material swatches: the app's own material photos (Care → Know your materials). */
.swatch--suede, .swatch--leather, .swatch--knit, .swatch--canvas, .swatch--nubuck { background-size: cover; background-position: center; }
.swatch--suede   { background-image: url(/assets/materials/suede.jpg); }
.swatch--leather { background-image: url(/assets/materials/leather.jpg); }
.swatch--knit    { background-image: url(/assets/materials/knit.jpg); }
.swatch--canvas  { background-image: url(/assets/materials/canvas.jpg); }
.swatch--nubuck  { background-image: url(/assets/materials/nubuck.jpg); }
.swatch--more    { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); }

.care-browse-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-8);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
}

.care-tabs {
    display: flex;
    gap: var(--s-1);
    padding: 4px;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 999px;
    background: rgba(21, 21, 21, 0.05);
    scrollbar-width: none;
}

.care-tabs::-webkit-scrollbar { display: none; }

.care-tabs button {
    flex: none;
    min-height: 40px;
    padding: 0 var(--s-4);
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: background var(--t-fast) ease, color var(--t-fast) ease;
}

.care-tabs button:hover { color: var(--ink); }
.care-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }

.care-groups { padding-bottom: var(--section-y); }

.care-group { padding-top: var(--s-7); }

.care-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.care-group-head h2 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; }
.care-group-head p { font-size: var(--fs-small); color: var(--ink-3); }

.guide-grid {
    list-style: none;
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-5);
}

@media (min-width: 640px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.guide-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line);
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) ease;
}

.guide-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); }

.guide-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 18px; }

.guide-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }

.guide-card p {
    margin-top: var(--s-2);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-3);
    margin-top: auto;
    padding-top: var(--s-4);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-3);
}

.guide-meta span + span::before { content: "·"; margin-right: var(--s-3); }

.care-empty {
    margin-top: var(--s-6);
    padding: var(--s-6);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-2);
    text-align: center;
}

/* Guide art: each material or problem drawn in CSS, so every card has a face
   without a photo shoot. Texture, not decoration. */
.guide-art { display: block; aspect-ratio: 16 / 7; background-color: #DDD5CB; transition: transform var(--t-slow) var(--ease); }
.guide-art { overflow: hidden; }
.guide-art.has-img { background: #F4F1EC; }
.guide-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guide-card:hover .guide-art img { transform: scale(1.04); }
.guide-art img { transition: transform var(--t-slow) var(--ease); }

.art--leather { background: radial-gradient(120% 90% at 30% 20%, #F7F3EE, #D8D0C5 70%, #C4BAAE); }
.art--patent  { background: linear-gradient(115deg, #121212 0 38%, #3A3A3A 46%, #0E0E0E 54% 100%); }
.art--dress   { background: radial-gradient(90% 80% at 30% 25%, #8A4B2A, #5A2B16 70%, #3B1A0C); }
.art--suede   { background: radial-gradient(120% 100% at 30% 20%, #D9784C, #B55530 60%, #8E3F22); }
.art--canvas  { background: repeating-linear-gradient(0deg, rgba(255,255,255,0.35) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 4px), #DCE4EE; }
.art--knit    { background: repeating-linear-gradient(60deg, #E7737F 0 4px, #C24A5A 4px 8px), #C24A5A; }
.art--denim   { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 5px), #3E5B86; }
.art--cage    { background: linear-gradient(160deg, rgba(255,255,255,0.7), rgba(255,255,255,0) 60%), #BFD6DD; }
.art--sock    { background: repeating-linear-gradient(90deg, #2B2B2E 0 3px, #3A3A3E 3px 6px); }
.art--foam    { background: radial-gradient(60% 80% at 30% 30%, #5B6BA0, #26315A 70%); }
.art--midsole { background: linear-gradient(180deg, #F2EEE8 0 55%, #E7DED0 55% 70%, #F7F4EF 70%); }
.art--gel     { background: radial-gradient(40% 50% at 50% 55%, #9ED8F0, #4FA6CC 70%, #E8E4DD 71%); }
.art--air     { background: radial-gradient(34% 44% at 50% 55%, rgba(255,255,255,0.9), rgba(210,228,240,0.8) 70%, #ECE8E1 72%); }
.art--outsole { background: repeating-linear-gradient(90deg, #3A3632 0 10px, #2A2724 10px 14px), #2A2724; }
.art--lining  { background: repeating-linear-gradient(0deg, #E9E1D4 0 2px, #DED4C4 2px 4px); }
.art--rain    { background: repeating-linear-gradient(105deg, rgba(255,255,255,0.35) 0 1px, transparent 1px 14px), linear-gradient(180deg, #8EA2B6, #5E7287); }
.art--mud     { background: radial-gradient(40% 50% at 30% 60%, #6B4E32, transparent 70%), radial-gradient(30% 40% at 70% 40%, #7E5D3C, transparent 70%), #EDE6DC; }
.art--crease  { background: repeating-linear-gradient(170deg, transparent 0 18px, rgba(0,0,0,0.08) 18px 20px), #F1ECE5; }
.art--exotic  { background: radial-gradient(circle at 50% 50%, #8C6B4A 0 30%, #5A4129 31% 40%, transparent 41%) 0 0 / 22px 22px, #4A3522; }
.art--satin   { background: linear-gradient(120deg, #E8D7DE, #F7EEF2 40%, #D9C2CC 60%, #F3E7EC); }
.art--velvet  { background: radial-gradient(100% 80% at 30% 20%, #7A2E4A, #4B1529 70%); }

/* ── One guide ── */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-small);
    color: var(--ink-3);
}

.crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.guide-hero { padding: var(--s-6) 0 var(--s-7); }

.guide-hero-grid { display: grid; gap: var(--s-6); align-items: center; }

@media (min-width: 960px) {
    .guide-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--grid-gap); }
}

.guide-hero .display { font-size: clamp(40px, 5.4vw, 72px); max-width: 14ch; margin-top: var(--s-5); color: var(--navy); }
.guide-hero .lede { max-width: 56ch; }
.guide-art--hero { aspect-ratio: 4 / 3; border-radius: 160px var(--r-lg) var(--r-lg) var(--r-lg); box-shadow: var(--shadow); }

@media (max-width: 959px) { .guide-art--hero { aspect-ratio: 16 / 6; border-radius: var(--r-lg); } }

.guide-facts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }

.guide-facts span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}

.guide-body {
    display: grid;
    gap: var(--s-6);
    padding-top: var(--s-6);
    padding-bottom: var(--section-y);
    border-top: 1px solid var(--line);
}

@media (min-width: 960px) {
    .guide-body { grid-template-columns: 200px minmax(0, 1fr); gap: var(--grid-gap); align-items: start; }
    .guide-toc { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

.guide-main { max-width: 760px; }

.guide-toc h2 { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.guide-toc ol { list-style: none; margin-top: var(--s-3); border-left: 1.5px solid var(--line-strong); }
.guide-toc a { display: block; padding: 7px 0 7px var(--s-4); margin-left: -1.5px; border-left: 1.5px solid transparent; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color var(--t-fast) ease, border-color var(--t-fast) ease; }
.guide-toc a:hover { color: var(--navy); border-left-color: var(--navy); }

@media (max-width: 959px) {
    .guide-toc ol { display: flex; flex-wrap: wrap; gap: var(--s-2); border: 0; }
    .guide-toc a { padding: 6px 12px; margin: 0; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 13px; }
}

.guide-section { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.guide-section + .guide-section { margin-top: var(--s-8); }

.guide-section > h2 {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.guide-section > p { margin-top: var(--s-3); color: var(--ink-2); max-width: var(--measure-wide); }

.fact-cards { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 640px) { .fact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact-card { padding: var(--s-5); border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.fact-card h3 { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.fact-card p { margin-top: var(--s-2); font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.kit { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 560px) { .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kit li { padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line); border-top: 3px solid var(--yellow); }
.kit strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.kit span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.supplies-note { margin-top: var(--s-3); font-size: 12px; color: var(--ink-3); }

.guide-grid--related { margin-top: var(--s-5); }
@media (min-width: 1000px) { .guide-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.guide-steps {
    list-style: none;
    margin-top: var(--s-5);
    border-top: 1px solid var(--line-strong);
}

.guide-steps li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--s-4);
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.guide-steps .n {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.guide-steps h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; padding-top: 4px; }
.guide-steps p { margin-top: var(--s-1); color: var(--ink-2); line-height: 1.65; max-width: var(--measure-wide); }
.guide-steps .only { display: inline-block; margin-top: var(--s-2); font-size: 12px; font-weight: 600; color: var(--ink-3); }

.guide-list {
    list-style: none;
    margin-top: var(--s-4);
}

.guide-list li {
    position: relative;
    padding: 10px 0 10px 28px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    line-height: 1.55;
}

.guide-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 19px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-3);
}

.guide-list--avoid li::before {
    width: 12px;
    height: 2px;
    top: 22px;
    left: 2px;
    border-radius: 2px;
    background: var(--error);
}

.guide-list strong { color: var(--ink); font-weight: 600; }

.note-block {
    margin-top: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
}

.note-block h3 { font-size: 15px; font-weight: 700; }
.note-block p, .note-block li { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.note-block p { margin-top: var(--s-1); }
.note-block ol { margin: var(--s-2) 0 0 var(--s-5); }
.note-block + .note-block { margin-top: var(--s-3); }

/* ── Story ── */

.story-body {
    padding-bottom: var(--section-y);
}

.story-block {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-7) 0;
    border-top: 1px solid var(--line-strong);
}

@media (min-width: 900px) {
    .story-block { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--grid-gap); }
}

.story-block h2 {
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    max-width: 14ch;
}

.story-block p {
    font-size: var(--fs-lede);
    color: var(--ink-2);
    line-height: 1.65;
    max-width: var(--measure-wide);
}

.story-block p + p { margin-top: var(--s-4); }

.principles {
    list-style: none;
    display: grid;
    gap: var(--s-3);
}

@media (min-width: 640px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.principles li {
    padding: var(--s-5);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line);
}

.principles strong { display: block; font-size: 17px; letter-spacing: -0.015em; }
.principles span { display: block; margin-top: var(--s-1); font-size: 15px; color: var(--ink-2); line-height: 1.55; }

/* Our story: the pair itself, held against the wall it was shot on. */
.story-hero-photo img { object-position: 40% 55%; }
.story-hand { right: 5%; bottom: 9%; }
@media (max-width: 959px) {
    .page-hero-media:has(.story-hero-photo) { min-height: 420px; }
    .story-hand { display: none; }
}

.story-figures {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-2) 0 var(--s-7);
}
@media (min-width: 720px) { .story-figures { grid-template-columns: 1fr 1fr; } }
.story-figures img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-md);
}
.story-figures figcaption {
    grid-column: 1 / -1;
    font-family: var(--font-hand);
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 600;
    color: var(--red);
    transform: rotate(-1.5deg);
    transform-origin: left;
}

.story-block .story-pull {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--navy);
}

.story-block .story-sign {
    font-family: var(--font-hand);
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: 600;
    color: var(--red);
    line-height: 1;
    transform: rotate(-3deg);
    transform-origin: left;
}

.story-body { padding-top: var(--s-6); }
.story-block:first-child { border-top: 0; }
.story-block h2 { color: var(--navy); }
.principles li { border-top: 3px solid var(--yellow); }

/* ── Closing call (interior pages) ── */

.page-cta { padding: var(--section-y-tight) 0; }

.page-cta-inner {
    display: grid;
    gap: var(--s-6);
    align-items: center;
}

@media (min-width: 900px) {
    .page-cta-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--grid-gap); }
    .page-cta-inner .waitlist { margin-left: auto; }
}

.page-cta .h2 { font-size: clamp(32px, 3.6vw, 52px); max-width: 15ch; }
.page-cta .lede { margin-top: var(--s-3); }

/* ── Journal ── */

.journal-topics {
    list-style: none;
    display: grid;
    gap: var(--s-3);
    padding-bottom: var(--section-y);
}

@media (min-width: 640px) { .journal-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .journal-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.journal-topics li {
    padding: var(--s-5);
    border-radius: var(--r-md);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

.journal-topics strong { display: block; font-size: 18px; letter-spacing: -0.02em; }
.journal-topics span { display: block; margin-top: var(--s-1); font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* ── Legal ── */

.legal-page { padding: var(--s-7) 0 var(--section-y); }
.legal-page .wrap { max-width: 820px; }
.legal-page h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.legal-page .updated { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-3); }
.legal-page h2 { margin-top: var(--s-7); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.legal-page p, .legal-page li { color: var(--ink-2); line-height: 1.7; }
.legal-page p { margin-top: var(--s-3); }
.legal-page ul { margin: var(--s-3) 0 0 var(--s-5); }
.legal-page li + li { margin-top: var(--s-2); }
.legal-page a { color: var(--navy); font-weight: 500; }
.legal-page strong { color: var(--ink); }
.legal-page h1 + .updated + p { margin-top: var(--s-6); font-size: var(--fs-lede); }

/* ── 404 ── */

.not-found { padding: var(--section-y) 0; min-height: 60vh; }
.not-found .display { font-size: clamp(48px, 7vw, 96px); max-width: 12ch; }