/* Public CLIFF Code: an editorial field guide, scoped to this page. */
.ethos { --landing-max:1220px; --eth-header:94px; --eth-rail:62px; }
.ethos main { max-width:var(--landing-max); margin:auto; padding:0 40px; }
.ethos section { padding:94px 0; border-top:1px solid var(--line); scroll-margin-top:calc(var(--eth-header) + var(--eth-rail) + 20px); }
.ethos .eyebrow { display:block; font-size:9px; letter-spacing:.17em; color:var(--accent-text); margin-bottom:18px; font-weight:600; }
.ethos h2 { font-size:clamp(34px,4.1vw,56px); line-height:1.08; font-weight:500; letter-spacing:-.055em; margin:0 0 23px; }
.ethos h2 em,.ethos .eth-hero h1 em { font-family:Georgia,serif; font-style:italic; font-weight:400; color:var(--accent-text); }
.ethos .landing-header { max-width:var(--landing-max); min-height:var(--eth-header); padding:23px 40px; gap:25px; position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--line); }
@supports(backdrop-filter:blur(18px)) { .ethos .landing-header { background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(18px); } }
.ethos .landing-header .brand { flex:none; }
.ethos .landing-header nav { gap:22px; margin-right:0; margin-left:auto; }
.ethos .landing-header nav a { font-size:10px; white-space:nowrap; }
.ethos .landing-actions { margin-left:auto; gap:7px; }
.ethos .landing-actions>.btn.primary { padding:10px 15px; font-size:11px; white-space:nowrap; }
.ethos .landing-actions .icon-btn { border-radius:50%; width:34px; height:34px; }
.ethos .landing-signin { font-size:10px; padding:6px; white-space:nowrap; }
.eth-reading-progress { position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); transform-origin:left; transform:scaleX(var(--eth-progress,0)); pointer-events:none; }
.ethos .eth-hero { display:grid; grid-template-columns:1.08fr 1fr; align-items:center; gap:48px; padding:50px 0 56px; border-top:0; position:relative; }
.eth-hero-copy { padding:10px 0; min-width:0; }
.ethos .eth-hero .eyebrow { display:flex; align-items:center; gap:12px; color:var(--muted); }
.eth-hero .eyebrow::before { content:''; height:1px; width:26px; background:var(--accent); }
.ethos .eth-hero h1 { font-size:clamp(65px,7.2vw,102px); font-weight:500; line-height:1.02; letter-spacing:-.075em; margin:27px 0; }
.eth-hero .tagline { font-size:17px; line-height:1.8; letter-spacing:-.02em; color:var(--muted); max-width:345px; }
.eth-hero .ctas { display:flex; align-items:center; gap:27px; flex-wrap:wrap; margin-top:30px; }
.eth-hero .ctas .btn { padding:13px 21px; min-height:44px; font-size:12px; }
.eth-hero .ctas .quiet-link { font-size:11px; }
.eth-scroll-cue { display:flex; align-items:center; gap:12px; margin-top:45px; color:var(--muted); text-decoration:none; font-size:7px; letter-spacing:.17em; }
.eth-scroll-line { display:block; width:1px; height:28px; background:var(--line-2); position:relative; }
.eth-scroll-line::after { content:''; position:absolute; bottom:0; left:-2px; width:5px; height:5px; border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); transform:rotate(45deg); }
.eth-ascent { position:relative; min-width:0; aspect-ratio:520/578; margin:0; border:1px solid var(--accent-line); border-radius:160px 14px 14px 14px; overflow:hidden; background:linear-gradient(160deg,var(--accent-soft),transparent 58%),var(--card); color:var(--accent-text); }
.eth-landscape { position:absolute; inset:0; width:100%; height:100%; }
.eth-art-top { position:absolute; z-index:1; top:30px; left:110px; right:28px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.eth-art-top>span:first-child { font-size:7px; letter-spacing:.17em; color:var(--muted); }
.eth-cross { font-size:22px; font-weight:300; color:var(--muted); }
.eth-art-caption { display:flex; position:absolute; align-items:center; left:24px; right:24px; bottom:24px; gap:10px; color:var(--muted); font-size:7px; letter-spacing:.14em; }
.eth-art-mark { display:grid; place-items:center; border:1px solid var(--line-2); border-radius:50%; width:38px; height:38px; background:var(--bg); }
.eth-art-arrow { margin-left:auto; font-size:20px; color:var(--accent-text); }
.eth-chapters { display:flex; align-items:center; position:sticky; top:var(--eth-header); z-index:20; min-height:var(--eth-rail); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); margin-bottom:0; }
.eth-chapters>a { display:flex; align-items:center; gap:9px; min-height:var(--eth-rail); padding:0 26px; font-size:11px; text-decoration:none; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s,background .15s; }
.eth-chapters>a:first-child { padding-left:0; }
.eth-chapters>a>span { font-size:8px; letter-spacing:.07em; color:var(--faint); }
.eth-chapters>a:hover,.eth-chapters>a[aria-current] { color:var(--accent-text); }
.eth-chapters>a[aria-current] { border-bottom-color:var(--accent); }
.eth-chapters .eth-chapter-top { margin-left:auto; padding-right:0; font-size:20px; }
.ethos #why-code { border-top:0; }
.ethos .preamble { display:grid; grid-template-columns:1fr 1.2fr; gap:90px; align-items:start; }
.ethos .preamble h2 { font-size:clamp(33px,3.7vw,47px); max-width:420px; }
.ethos .preamble p { color:var(--muted); font-size:14px; line-height:1.95; margin:0 0 21px; }
.ethos .preamble p:last-child { color:var(--text); margin-bottom:0; padding-left:20px; border-left:2px solid var(--accent-line); }
.ethos .pillars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:35px; }
.ethos .pillar { background:var(--card); padding:25px; border:1px solid var(--line); border-radius:var(--radius); position:relative; min-width:0; transition:border-color .2s,transform .2s; }
.ethos .pillar:hover { border-color:var(--accent-line); transform:translateY(-3px); }
.eth-pillar-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); }
.eth-pillar-top .num { font-size:9px; letter-spacing:.12em; color:var(--muted); }
.eth-pillar-icon { display:grid; place-items:center; width:33px; height:33px; border:1px solid var(--accent-line); border-radius:50%; background:var(--accent-soft); color:var(--accent-text); }
.eth-pillar-icon svg { width:15px; height:15px; }
.ethos .pillar h3 { font-size:29px; font-weight:500; letter-spacing:-.045em; margin:22px 0 13px; }
.ethos .pillar .creed { font-family:Georgia,serif; font-style:italic; font-size:19px; line-height:1.5; color:var(--accent-text); min-height:86px; margin-bottom:22px; }
.ethos .pillar ul { list-style:none; padding:0; margin:0; }
.ethos .pillar li { border-top:1px solid var(--line); padding:15px 0 15px 19px; color:var(--muted); font-size:12px; line-height:1.8; position:relative; }
.ethos .pillar li:last-child { padding-bottom:0; }
.ethos .pillar li::before { content:''; position:absolute; left:2px; top:23px; width:4px; height:4px; border:1px solid var(--accent-text); transform:rotate(45deg); }
.ethos .triangle { display:grid; grid-template-columns:.95fr 1fr; gap:90px; align-items:center; }
.ethos .tri-svg { width:100%; max-width:420px; display:block; margin:auto; color:var(--text); padding:25px; background:radial-gradient(ellipse,var(--accent-soft),transparent 65%); overflow:visible; }
.ethos .tri-svg text { font-family:inherit; font-weight:600; font-size:10px; letter-spacing:.12em; fill:currentColor; }
.ethos .ladder-note { color:var(--muted); font-size:13px; line-height:1.9; max-width:580px; }
.ethos .sides { display:grid; gap:13px; margin-top:26px; }
.ethos .side { display:grid; grid-template-columns:38px 1fr; gap:16px; padding:19px 0; border-top:1px solid var(--line); }
.ethos .side .ib { width:38px; height:38px; border-radius:12px; background:var(--card); }
.ethos .side h3 { font-size:16px; font-weight:600; line-height:1.7; margin:0; letter-spacing:-.02em; }
.ethos .side h3 span { display:block; font-size:12px; font-weight:400; color:var(--text); letter-spacing:0; }
.ethos .side p { font-size:11.5px; line-height:1.85; color:var(--muted); margin-top:6px; }
.ethos .oath { text-align:center; position:relative; overflow:hidden; padding:80px 40px; background:linear-gradient(var(--accent-soft),transparent),var(--card); border:1px solid var(--accent-line); border-radius:var(--radius); }
.ethos .oath::before { content:''; position:absolute; inset:0; background:url('contours.svg') center/cover; opacity:.12; pointer-events:none; }
.ethos .oath>* { position:relative; }
.eth-oath-seal { display:grid; place-items:center; width:44px; height:44px; margin:0 auto 25px; border:1px solid var(--accent-line); border-radius:50%; background:var(--accent-soft); color:var(--accent-text); }
.eth-oath-seal span { width:17px; height:17px; }
.eth-oath-seal svg { width:100%; height:100%; }
.ethos .oath h2 { font-size:clamp(30px,3.6vw,46px); }
.ethos .oath ol { list-style:none; margin:35px auto 0; padding:0; max-width:720px; }
.ethos .oath li { font-family:Georgia,serif; font-size:clamp(20px,2.1vw,28px); line-height:1.6; padding:9px 0; letter-spacing:-.01em; }
.ethos .oath li:first-child,.ethos .oath li:last-child { color:var(--accent-text); font-style:italic; }
.ethos #orders { margin-top:88px; }
.ethos .orders { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:34px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); }
.ethos .order { padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0; }
.ethos .order:nth-child(3n) { border-right:0; }
.ethos .order:nth-last-child(-n+3) { border-bottom:0; }
.ethos .order b { display:block; font-size:8px; letter-spacing:.15em; font-weight:600; color:var(--accent-text); margin-bottom:19px; }
.ethos .order h3 { font-size:19px; font-weight:500; line-height:1.4; letter-spacing:-.025em; margin-bottom:12px; }
.ethos .order p { color:var(--muted); font-size:12px; line-height:1.85; }
.ethos .ladder { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; margin-top:36px; position:relative; }
.ethos .ladder::before { content:''; position:absolute; left:6%; right:6%; top:48px; height:1px; background:var(--accent-line); }
.ethos .rung { text-align:center; padding:16px 10px 0; position:relative; min-width:0; }
.ethos .rung .ins { display:block; width:66px; height:66px; background:var(--bg); color:var(--text); margin:0 auto 17px; position:relative; z-index:1; }
.ethos .rung .ins svg { width:100%; height:100%; }
.ethos .rung h3 { font-size:13px; font-weight:600; margin-bottom:7px; letter-spacing:-.02em; }
.ethos .rung .min { color:var(--accent-text); font-size:8px; letter-spacing:.07em; font-weight:600; }
.ethos .rung p { color:var(--muted); font-size:10px; line-height:1.8; margin:12px auto 0; max-width:125px; }
.ethos .notes { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.ethos .eth-note { padding:0 0 0 22px; border-left:1px solid var(--accent-line); position:relative; font-size:13px; line-height:1.95; color:var(--muted); }
.eth-note-icon { display:block; width:22px; height:22px; color:var(--accent-text); margin-bottom:20px; }
.eth-note-icon svg { width:100%; height:100%; }
.ethos .eth-note .eyebrow { font-size:8px; margin-bottom:12px; }
.ethos .final { text-align:center; padding:80px 0 90px; background:radial-gradient(ellipse at center,var(--accent-soft),transparent 60%); }
.ethos .final h2 { font-size:clamp(50px,6.5vw,84px); margin:22px 0 32px; }
.eth-final-marker { display:block; font-size:29px; font-weight:300; color:var(--accent-text); margin-bottom:28px; }
.ethos .final .btn { min-height:46px; font-size:12px; padding:13px 24px; }
.ethos .final p { font-size:8px; color:var(--muted); letter-spacing:.2em; margin-top:25px; }
.ethos .landing-footer { max-width:var(--landing-max); padding:27px 40px; }
.ethos .landing-footer p { font-size:11.5px; line-height:1.8; }
.ethos .landing-footer>div { font-size:11px; }
@media(min-width:761px) and (max-width:1050px) {
 .ethos .landing-header nav { display:none; }
 .ethos .eth-hero { gap:30px; }
 .ethos .eth-hero h1 { font-size:clamp(60px,7vw,83px); }
 .ethos .preamble,.ethos .triangle { gap:45px; }
 .ethos .pillar { padding:22px; }
 .ethos .pillar .creed { min-height:115px; font-size:18px; }
 .ethos .ladder { grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 0; }
 .ethos .ladder::before { display:none; }
 .ethos .rung p { max-width:155px; }
 .eth-chapters>a { padding:0 19px; }
}
@media(max-width:760px) {
 .ethos { --eth-header:76px; --eth-rail:54px; }
 .ethos main { padding:0 21px; }
 .ethos section { padding:62px 0; }
 .ethos .eyebrow { font-size:8px; letter-spacing:.14em; margin-bottom:17px; }
 .ethos h2 { font-size:37px; letter-spacing:-.05em; line-height:1.12; }
 .ethos .landing-header { padding:16px 21px; gap:10px; }
 .ethos .landing-header .brand { gap:8px; }
 .ethos .landing-header .brand img { width:31px; height:31px; }
 .ethos .landing-header .brand-word { font-size:20px; }
 .ethos .landing-header .brand-sub { font-size:8px; }
 .ethos .landing-header nav,.ethos .landing-signin { display:none; }
 .ethos .landing-actions { gap:5px; }
 .ethos .landing-actions [data-open-appearance] { display:inline-flex; }
 .ethos .landing-actions>.icon-btn { width:34px; height:40px; min-height:40px; padding:8px; }
 .ethos .landing-actions>.btn.primary { min-height:40px; font-size:10px; padding:10px 11px; margin-left:2px; }
 .ethos .eth-hero { grid-template-columns:minmax(0,1fr); gap:33px; padding:36px 0 30px; }
 .eth-hero-copy { padding:0; }
 .ethos .eth-hero h1 { font-size:clamp(54px,15vw,78px); line-height:1.05; margin:22px 0; }
 .eth-hero .tagline { font-size:14px; line-height:1.85; max-width:300px; }
 .eth-hero .ctas { gap:24px; margin-top:24px; }
 .eth-hero .ctas .btn { min-height:46px; padding:13px 21px; }
 .eth-scroll-cue { display:none; }
 .eth-ascent { aspect-ratio:1.2; border-top-left-radius:100px; }
 .eth-landscape { top:-55px; height:calc(100% + 130px); }
 .eth-art-top { left:90px; right:20px; top:17px; }
 .eth-art-top>span:first-child { font-size:6px; }
 .eth-art-caption { left:20px; right:20px; bottom:17px; font-size:6px; }
 .eth-art-mark { width:32px; height:32px; }
 .eth-art-mark img { width:24px; height:24px; }
 .eth-chapters { gap:0; overflow-x:auto; scrollbar-width:none; margin:0 -21px; padding:0 21px; }
 .eth-chapters>a { padding:0 16px; font-size:10px; gap:6px; flex:none; }
 .eth-chapters>a:first-child { padding-left:0; }
 .eth-chapters>a>span { font-size:7px; }
 .eth-chapters .eth-chapter-top { display:none; }
 .ethos .preamble,.ethos .triangle { grid-template-columns:minmax(0,1fr); gap:22px; }
 .ethos .preamble h2 { font-size:35px; max-width:320px; margin-bottom:4px; }
 .ethos .preamble p { font-size:13px; line-height:1.95; margin-bottom:20px; }
 .ethos .pillars { grid-template-columns:minmax(0,1fr); gap:17px; margin-top:28px; }
 .ethos .pillar { padding:24px; }
 .ethos .pillar h3 { font-size:30px; margin:20px 0 13px; }
 .ethos .pillar .creed { min-height:0; max-width:290px; font-size:21px; margin-bottom:22px; }
 .ethos .pillar li { font-size:12px; line-height:1.9; padding-top:16px; padding-bottom:16px; }
 .ethos .triangle { gap:30px; }
 .ethos .tri-svg { max-width:310px; padding:12px 5px 15px; }
 .ethos .triangle>div { min-width:0; }
 .ethos .ladder-note { font-size:12px; line-height:1.9; }
 .ethos .side { grid-template-columns:36px minmax(0,1fr); gap:15px; padding:18px 0; }
 .ethos .side h3 { font-size:16px; }
 .ethos .side h3 span { font-size:12px; line-height:1.8; }
 .ethos .side p { font-size:11.5px; line-height:1.9; }
 .ethos .oath { padding:50px 22px; }
 .ethos .oath h2 { font-size:31px; }
 .ethos .oath ol { margin-top:27px; }
 .ethos .oath li { font-size:21px; line-height:1.7; padding:12px 0; }
 .ethos #orders { margin-top:62px; }
 .ethos .orders { grid-template-columns:minmax(0,1fr); margin-top:28px; }
 .ethos .order { padding:26px; border-right:0; border-bottom:1px solid var(--line) !important; }
 .ethos .order:last-child { border-bottom:0 !important; }
 .ethos .order b { margin-bottom:15px; }
 .ethos .order h3 { font-size:21px; margin-bottom:11px; }
 .ethos .order p { font-size:12px; line-height:1.9; }
 .ethos .ladder { display:flex; flex-direction:column; gap:0; margin-top:27px; }
 .ethos .ladder::before { left:32px; top:32px; bottom:38px; width:1px; height:auto; right:auto; background:var(--accent-line); }
 .ethos .rung { display:grid; grid-template-columns:66px 1fr auto; column-gap:16px; text-align:left; align-items:center; padding:15px 0; }
 .ethos .rung .ins { grid-row:1/3; grid-column:1; margin:0; width:66px; height:66px; }
 .ethos .rung h3 { font-size:16px; margin:5px 0 0; align-self:end; }
 .ethos .rung .min { margin-top:5px; font-size:8px; text-align:right; align-self:end; white-space:nowrap; }
 .ethos .rung p { grid-column:2/-1; margin:5px 0; max-width:100%; font-size:11px; line-height:1.7; align-self:start; }
 .ethos .notes { grid-template-columns:minmax(0,1fr); gap:36px; }
 .ethos .eth-note { padding-left:20px; font-size:12px; line-height:2; }
 .ethos .final { padding:60px 0 65px; }
 .ethos .final h2 { font-size:55px; line-height:1.1; }
 .ethos .final .eyebrow { font-size:7px; letter-spacing:.12em; }
 .ethos .landing-footer { padding:26px 21px; align-items:flex-start; gap:22px; }
 .ethos .landing-footer p { margin-left:0; font-size:11.5px; }
 .ethos .landing-footer>div { margin-left:auto; }
}
@media(max-width:365px) {
 .ethos main { padding-left:18px; padding-right:18px; }
 .ethos .landing-header { padding-left:18px; padding-right:18px; gap:5px; }
 .ethos .landing-header .brand-word { font-size:18px; }
 .ethos .landing-header .brand img { width:27px; height:27px; }
 .ethos .landing-actions { gap:3px; }
 .ethos .landing-actions>.icon-btn { width:30px; }
 .ethos .landing-actions>.btn.primary { font-size:9px; padding:8px; }
 .ethos h2 { font-size:33px; }
 .ethos .oath { padding-left:18px; padding-right:18px; }
 .ethos .oath h2 { font-size:28px; }
 .eth-chapters { margin-left:-18px; margin-right:-18px; padding-left:18px; padding-right:18px; }
 .ethos .rung { column-gap:12px; }
}
@media(prefers-reduced-motion:reduce) { .ethos .pillar { transition:none; } }
html:has(body.ethos) { scroll-padding-top:0; }
.ethos main { scroll-margin-top:var(--eth-header); }