/* SchoolYard Crimson: a newspaper look. Warm paper, deep crimson, serif headlines, calm layout. */
.cr{ --c: #9d1b2e; --c2: #c42b43; --ink: #1c1b1a; --mut: #6f6a64; --paper: #faf7f2; --card: #fff; --line: #e8e1d8; --soft: #f3eee6; --shadow: 0 1px 2px rgba(40,20,10,.05), 0 8px 24px rgba(40,20,10,.06);
  --serif: 'Source Serif 4', Georgia, serif; --disp: 'Playfair Display', Georgia, serif; --sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
html[data-theme="dark"] .cr{ --c: #e0455c; --c2: #ff6b80; --ink: #f1ece6; --mut: #a39b92; --paper: #141211; --card: #1d1a18; --line: #302b28; --soft: #25211f; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); }
.cr{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.cr *{ box-sizing: border-box; } .cr a{ color: inherit; text-decoration: none; } .cr button, .cr input, .cr select, .cr textarea{ font-family: inherit; }
.cr-progress{ position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--c); z-index: 100; transition: width .1s; }
.cr-top{ border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--mut); } .cr-top-in{ max-width: 1180px; margin: 0 auto; padding: 8px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cr-top-r{ display: flex; align-items: center; gap: 14px; } .cr-link{ font-weight: 600; } .cr-link:hover{ color: var(--c); }
.cr-ico{ position: relative; background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 1rem; padding: 4px; } .cr-ico:hover{ color: var(--c); }
.cr-dot{ position: absolute; top: -4px; right: -6px; background: var(--c); color: #fff; font-size: .62rem; border-radius: 99px; padding: 1px 5px; }
.cr-mast{ text-align: center; padding: 26px 20px 8px; } .cr-logo{ display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.cr-logo small{ font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--mut); margin-bottom: 4px; }
.cr-logo span{ font-family: var(--disp); font-weight: 900; font-size: clamp(2.6rem, 8vw, 4.6rem); color: var(--c); letter-spacing: -.02em; }
.cr-tag{ margin: 8px 0 0; font-family: var(--serif); font-style: italic; color: var(--mut); }
.cr-nav{ position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-top: 14px; }
.cr-nav-in{ max-width: 1180px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; } .cr-nav-in::-webkit-scrollbar{ display: none; }
.cr-nav a{ white-space: nowrap; padding: 13px 12px; font-size: .84rem; font-weight: 600; color: var(--mut); border-bottom: 2px solid transparent; } .cr-nav a:hover, .cr-nav a.on{ color: var(--ink); border-bottom-color: var(--c); }
.cr-nav-sp{ flex: 1; min-width: 12px; } .cr-nav .cr-write{ background: var(--c); color: #fff; border-radius: 99px; padding: 7px 16px; margin: 6px 0 6px 6px; border: 0; } .cr-nav .cr-write:hover{ background: var(--c2); color: #fff; }
.cr-wrap{ max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }
.cr-toasts{ position: fixed; top: 70px; right: 16px; z-index: 120; display: grid; gap: 8px; } .cr-toast{ background: var(--ink); color: var(--paper); padding: 11px 16px; border-radius: 10px; font-size: .88rem; font-weight: 600; box-shadow: var(--shadow); max-width: 320px; } .cr-toast.err{ background: var(--c); color: #fff; }

/* front page */
.cr-lead{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--ink); margin-bottom: 28px; }
.cr-hero{ display: block; } .cr-hero .cr-cv{ position: relative; overflow: hidden; display: block; aspect-ratio: 16/10; border-radius: 4px; background-size: cover; background-position: center; background-color: var(--soft); position: relative; }
.cr-hero h2{ font-family: var(--disp); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.12; letter-spacing: -.01em; margin: 14px 0 8px; } .cr-hero:hover h2{ color: var(--c); }
.cr-hero p{ font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; color: var(--mut); margin: 0 0 10px; }
.cr-side{ display: grid; align-content: start; gap: 0; } .cr-side .cr-mini{ display: grid; grid-template-columns: 1fr 96px; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); } .cr-side .cr-mini:first-child{ padding-top: 0; } .cr-side .cr-mini:last-child{ border: 0; }
.cr-mini h3{ font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.25; margin: 4px 0 6px; } .cr-mini:hover h3{ color: var(--c); } .cr-mini .im{ aspect-ratio: 1; border-radius: 3px; background: var(--soft) center/cover; }
.cr-kicker{ font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.cr-by{ display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--mut); align-items: center; } .cr-by span + span::before{ content: '·'; margin-right: 12px; opacity: .6; } .cr-by .cr-st::before{ content: none; margin: 0; } .cr-by .cr-st{ margin-left: auto; }
.cr-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.cr-card{ display: flex; flex-direction: column; } .cr-card .cr-cv{ display: block; aspect-ratio: 16/10; border-radius: 4px; background: var(--soft) center/cover; position: relative; overflow: hidden; }
.cr-cv[data-no]{ background: linear-gradient(135deg, var(--c), #3a0c15); } .cr-cv[data-no]::after{ content: 'C'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--disp); font-weight: 900; font-size: 4rem; color: rgba(255,255,255,.2); }
.cr-sec{ position: absolute; left: 10px; top: 10px; background: var(--paper); color: var(--c); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; z-index: 1; }
.cr-cb h3{ font-family: var(--serif); font-weight: 700; font-size: 1.28rem; line-height: 1.22; margin: 12px 0 6px; } .cr-cb h3 a:hover{ color: var(--c); } .cr-cb p{ font-family: var(--serif); color: var(--mut); line-height: 1.45; margin: 0 0 10px; font-size: .98rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cr-cols{ display: grid; grid-template-columns: 1fr 300px; gap: 40px; } .cr-h{ display: flex; align-items: baseline; justify-content: space-between; border-top: 3px solid var(--ink); padding-top: 10px; margin: 0 0 18px; } .cr-h h2{ font-family: var(--disp); font-size: 1.3rem; margin: 0; } .cr-h a{ font-size: .8rem; font-weight: 600; color: var(--c); }
.cr-rail{ position: sticky; top: 64px; align-self: start; display: grid; gap: 24px; } .cr-box{ background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 18px; }
.cr-box h4{ font-family: var(--disp); font-size: 1.05rem; margin: 0 0 12px; } .cr-top-list{ list-style: none; margin: 0; padding: 0; counter-reset: n; } .cr-top-list li{ counter-increment: n; display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); } .cr-top-list li:first-child{ border: 0; padding-top: 0; }
.cr-top-list li::before{ content: counter(n); font-family: var(--disp); font-weight: 800; font-size: 1.5rem; color: var(--c); line-height: 1; } .cr-top-list a{ font-family: var(--serif); font-weight: 600; line-height: 1.3; } .cr-top-list a:hover{ color: var(--c); } .cr-top-list small{ display: block; color: var(--mut); font-family: var(--sans); font-weight: 400; margin-top: 3px; }
.cr-cta{ background: linear-gradient(135deg, var(--c), #5a0f1c); color: #fff; border: 0; } .cr-cta h4, .cr-cta p{ color: #fff; } .cr-cta p{ font-family: var(--serif); line-height: 1.45; margin: 0 0 14px; opacity: .92; } .cr-cta a{ display: inline-block; background: #fff; color: var(--c); font-weight: 700; padding: 9px 18px; border-radius: 99px; font-size: .88rem; }
.cr-tools{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .cr-tools input, .cr-tools select{ min-height: 40px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); padding: 0 16px; } .cr-tools input{ flex: 1 1 200px; }
.cr-pill{ padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); font-size: .84rem; font-weight: 600; color: var(--mut); } .cr-pill.on{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cr-empty{ text-align: center; padding: 60px 16px; color: var(--mut); font-family: var(--serif); font-size: 1.1rem; } .cr-empty i{ display: block; font-size: 2.2rem; margin-bottom: 10px; opacity: .5; }
.cr-pager{ display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 30px; color: var(--mut); font-size: .86rem; } .cr-btn{ display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 9px 18px; font-weight: 600; font-size: .86rem; cursor: pointer; } .cr-btn:hover{ border-color: var(--c); color: var(--c); }
.cr-btn.p{ background: var(--c); border-color: var(--c); color: #fff; } .cr-btn.p:hover{ background: var(--c2); color: #fff; } .cr-btn.sm{ padding: 6px 13px; font-size: .8rem; } .cr-btn:disabled{ opacity: .55; cursor: default; }

/* the article */
.cr-art{ max-width: 760px; margin: 0 auto; padding: 36px 20px 60px; } .cr-art .cr-kicker{ display: block; text-align: center; margin-bottom: 14px; }
.cr-art h1{ font-family: var(--disp); font-weight: 900; font-size: clamp(2rem, 5.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.015em; text-align: center; margin: 0 0 14px; }
.cr-dek{ font-family: var(--serif); font-size: 1.3rem; line-height: 1.4; color: var(--mut); text-align: center; margin: 0 auto 22px; max-width: 620px; }
.cr-byline{ display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 26px; flex-wrap: wrap; } .cr-byline b{ font-size: .95rem; } .cr-byline small{ display: block; color: var(--mut); font-size: .8rem; }
.cr-av{ display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; flex: none; }
.cr-figure{ margin: 0 -60px 30px; } .cr-figure img{ width: 100%; display: block; border-radius: 4px; max-height: 520px; object-fit: cover; }
.cr-body{ font-family: var(--serif); font-size: 1.2rem; line-height: 1.72; } .cr-body p{ margin: 0 0 1.35em; } .cr-body > p:first-of-type::first-letter{ font-family: var(--disp); font-weight: 900; font-size: 4.1rem; float: left; line-height: .82; padding: 8px 10px 0 0; color: var(--c); }
.cr-body h2{ font-family: var(--disp); font-size: 1.7rem; margin: 1.6em 0 .5em; line-height: 1.2; } .cr-body h3{ font-family: var(--disp); font-size: 1.3rem; margin: 1.4em 0 .4em; }
.cr-body blockquote{ margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--c); font-style: italic; font-size: 1.32rem; line-height: 1.5; } .cr-body blockquote p{ margin: 0 0 .5em; } .cr-body ul, .cr-body ol{ margin: 0 0 1.35em; padding-left: 1.4em; } .cr-body li{ margin-bottom: .4em; }
.cr-body a{ color: var(--c); text-decoration: underline; text-underline-offset: 3px; } .cr-body img{ max-width: 100%; border-radius: 4px; } .cr-body hr{ border: 0; text-align: center; margin: 2em 0; } .cr-body hr::before{ content: '* * *'; color: var(--mut); letter-spacing: .6em; }
.cr-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; } .cr-tags a{ background: var(--soft); border-radius: 99px; padding: 5px 13px; font-size: .8rem; font-weight: 600; color: var(--mut); } .cr-tags a:hover{ color: var(--c); }
.cr-react{ position: sticky; bottom: 14px; z-index: 40; display: flex; gap: 6px; justify-content: center; margin: 24px auto; width: max-content; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 6px 10px; box-shadow: var(--shadow); flex-wrap: wrap; }
.cr-rb{ display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; border-radius: 99px; padding: 8px 13px; font-weight: 600; font-size: .86rem; color: var(--mut); cursor: pointer; } .cr-rb:hover{ background: var(--soft); color: var(--ink); } .cr-rb.on{ color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); } .cr-rb i{ font-size: 1rem; } .cr-rb:disabled{ opacity: .5; cursor: default; }
.cr-author{ display: flex; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px; margin: 30px 0; } .cr-author h4{ margin: 0 0 2px; font-family: var(--disp); } .cr-author p{ margin: 0; color: var(--mut); font-size: .88rem; }
.cr-cm h3{ font-family: var(--disp); font-size: 1.4rem; margin: 30px 0 14px; padding-top: 14px; border-top: 3px solid var(--ink); } .cr-cform textarea{ width: 100%; min-height: 84px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--card); color: var(--ink); font-size: .95rem; resize: vertical; } .cr-cform .row{ display: flex; justify-content: space-between; align-items: center; margin: 8px 0 18px; color: var(--mut); font-size: .8rem; }
.cr-c{ display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); } .cr-c.kid{ margin-left: 40px; } .cr-c p{ margin: 4px 0 6px; line-height: 1.5; font-size: .95rem; overflow-wrap: anywhere; white-space: pre-wrap; } .cr-c .m{ font-size: .8rem; color: var(--mut); } .cr-c .m b{ color: var(--ink); } .cr-c .a{ display: flex; gap: 14px; font-size: .78rem; } .cr-c .a button{ background: none; border: 0; color: var(--mut); cursor: pointer; font-weight: 600; padding: 0; } .cr-c .a button:hover, .cr-c .a button.on{ color: var(--c); }
.cr-reply{ margin: 8px 0 0; display: none; } .cr-reply.open{ display: block; } .cr-reply textarea{ min-height: 60px; }
.cr-more{ margin-top: 40px; }

/* writing */
.cr-ed{ max-width: 820px; margin: 0 auto; padding: 28px 20px 70px; } .cr-ed .cr-field{ display: block; margin-bottom: 18px; } .cr-ed label.l{ display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px; }
.cr-ed input.t{ width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font-family: var(--disp); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.6rem); padding: 8px 0; outline: 0; line-height: 1.15; } .cr-ed input.t:focus{ border-bottom-color: var(--c); }
.cr-ed input.s, .cr-ed select, .cr-ed .cr-in{ width: 100%; min-height: 44px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; padding: 0 12px; font-size: .95rem; outline: 0; } .cr-ed input.s:focus, .cr-ed select:focus{ border-color: var(--c); }
.cr-row2{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cr-bar{ display: flex; gap: 2px; flex-wrap: wrap; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--card); padding: 6px; position: sticky; top: 50px; z-index: 20; }
.cr-bar button{ width: 36px; height: 34px; border: 0; background: none; border-radius: 6px; color: var(--ink); cursor: pointer; font-weight: 700; } .cr-bar button:hover{ background: var(--soft); color: var(--c); } .cr-bar .sp{ width: 1px; background: var(--line); margin: 4px 6px; }
.cr-edit{ min-height: 420px; border: 1px solid var(--line); border-radius: 0 0 8px 8px; background: var(--card); padding: 22px 26px; outline: 0; font-family: var(--serif); font-size: 1.15rem; line-height: 1.7; } .cr-edit:focus{ border-color: var(--c); } .cr-edit:empty::before{ content: attr(data-ph); color: var(--mut); }
.cr-edit blockquote{ margin: 1em 0; padding-left: 20px; border-left: 4px solid var(--c); font-style: italic; } .cr-edit h2{ font-family: var(--disp); } .cr-edit h3{ font-family: var(--disp); }
.cr-cover{ border: 2px dashed var(--line); border-radius: 8px; padding: 18px; text-align: center; color: var(--mut); background: var(--card); cursor: pointer; background-size: cover; background-position: center; min-height: 120px; display: grid; place-items: center; } .cr-cover:hover{ border-color: var(--c); }
.cr-meta{ display: flex; justify-content: space-between; align-items: center; margin: 10px 0 20px; color: var(--mut); font-size: .84rem; gap: 12px; flex-wrap: wrap; } .cr-chk{ background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; margin-bottom: 18px; } .cr-chk li{ margin: 4px 0; } .cr-chk ul{ margin: 6px 0 0; padding-left: 18px; color: var(--mut); }
.cr-note{ background: var(--soft); border-left: 4px solid var(--c); border-radius: 4px; padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; line-height: 1.5; } .cr-note.warn{ background: color-mix(in srgb, var(--c) 10%, var(--card)); }
.cr-modal{ position: fixed; inset: 0; background: rgba(20,10,10,.55); display: none; align-items: center; justify-content: center; z-index: 150; padding: 16px; } .cr-modal.open{ display: flex; } .cr-mc{ background: var(--card); border-radius: 12px; padding: 24px; width: 100%; max-width: 480px; box-shadow: var(--shadow); } .cr-mc h3{ font-family: var(--disp); margin: 0 0 6px; }
.cr-reach{ display: grid; gap: 10px; margin: 14px 0; } .cr-reach label{ display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; } .cr-reach label:has(input:checked){ border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, transparent); } .cr-reach b{ color: var(--c); } .cr-reach small{ display: block; color: var(--mut); }

/* desk */
.cr-kpis{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; } .cr-kpi{ background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; } .cr-kpi b{ display: block; font-family: var(--disp); font-size: 1.9rem; line-height: 1; } .cr-kpi span{ font-size: .78rem; color: var(--mut); font-weight: 600; } .cr-kpi.rev{ background: linear-gradient(135deg, var(--c), #5a0f1c); color: #fff; border: 0; } .cr-kpi.rev span{ color: rgba(255,255,255,.8); }
.cr-chart{ display: flex; align-items: flex-end; gap: 6px; height: 140px; padding: 10px 0 0; } .cr-chart div{ flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: .66rem; color: var(--mut); gap: 4px; } .cr-chart i{ display: block; width: 100%; background: var(--c); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; } .cr-chart div:hover i{ opacity: 1; }
.cr-table{ width: 100%; border-collapse: collapse; font-size: .88rem; } .cr-table th{ text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 8px 10px; border-bottom: 2px solid var(--ink); } .cr-table td{ padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } .cr-table td.n{ text-align: right; font-variant-numeric: tabular-nums; } .cr-table a.tt{ font-family: var(--serif); font-weight: 700; font-size: 1.02rem; } .cr-table a.tt:hover{ color: var(--c); }
.cr-badge{ display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--soft); color: var(--mut); } .cr-badge.live{ background: #dff3e6; color: #1b6a3a; } .cr-badge.pending{ background: #fff0d6; color: #946000; } .cr-badge.rejected, .cr-badge.removed{ background: #fbe0e3; color: var(--c); }
html[data-theme="dark"] .cr-badge.live{ background: #1c3a28; color: #7ddc9d; } html[data-theme="dark"] .cr-badge.pending{ background: #3d3115; color: #f1c35e; } html[data-theme="dark"] .cr-badge.rejected, html[data-theme="dark"] .cr-badge.removed{ background: #3f1a21; color: #ff8a9b; }
.cr-foot{ border-top: 1px solid var(--ink); padding: 26px 20px; text-align: center; color: var(--mut); font-size: .84rem; line-height: 1.7; } .cr-foot a{ color: var(--c); font-weight: 600; }
.cr-home{ background: var(--paper); border-radius: 18px; padding: 26px; border: 1px solid var(--line); } .cr-home .cr-lead{ gap: 24px; }
@media (max-width: 900px){ .cr-lead, .cr-cols{ grid-template-columns: 1fr; } .cr-grid{ grid-template-columns: repeat(2, 1fr); } .cr-rail{ position: static; } .cr-figure{ margin: 0 0 24px; } }
@media (max-width: 560px){ .cr-grid{ grid-template-columns: 1fr; } .cr-row2{ grid-template-columns: 1fr; } .cr-date{ display: none; } .cr-top-in{ justify-content: flex-end; } .cr-body{ font-size: 1.1rem; } .cr-table .hide-sm{ display: none; } .cr-edit{ padding: 16px; } .cr-c.kid{ margin-left: 18px; } .cr-side .cr-mini{ grid-template-columns: 1fr 80px; } }

/* ---- on the HostelGig home page the Crimson section keeps the same rule as every other section: it is exactly one screen tall and scrolls INSIDE itself, so it can never spill into the Gigz section below */
#blog.section__height{ height: 100vh; overflow: hidden; box-sizing: border-box; }
#blog .cr.cr-home{ height: 100%; max-width: 1200px; margin: 0 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--c) transparent; }
#blog .cr.cr-home::-webkit-scrollbar{ width: 5px; } #blog .cr.cr-home::-webkit-scrollbar-thumb{ background: var(--c); border-radius: 5px; }
#blog .cr-home .cr-lead{ grid-template-columns: 1.4fr 1fr; } #blog .cr-home .cr-hero .cr-cv{ aspect-ratio: 16/9; max-height: 38vh; width: 100%; }
@media (max-width: 900px){ #blog .cr-home .cr-lead{ grid-template-columns: 1fr; } #blog .cr-home .cr-hero .cr-cv{ max-height: 30vh; } #blog .cr.cr-home{ padding: 18px; } }

/* phones: the home link in the top strip is just the house icon */
@media (max-width: 560px){ .cr-hide-sm{ display: none; } body.cr{ overflow-x: clip; } .cr-top-r{ gap: 10px; } }