/* Shared stylesheet for pages in the landing layout.
 *
 * Ported from the design explorer (PR #1, docs/design/prototypes/explorer/explorer_template.html).
 * Each style is a set of custom properties keyed on <html data-style="...">. Plain is the default;
 * visitors can switch with the "Page style" control in the footer (src/js/style-switcher.js).
 * Decision record: D7/D8 in unjournal_gitbook landing-pages/MIGRATION-FROM-SQUARESPACE.md.
 */

@font-face{font-family:"ET Book";src:url(/fonts/et-book-roman-line-figures.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ET Book";src:url(/fonts/et-book-display-italic-old-style-figures.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"ET Book";src:url(/fonts/et-book-bold-line-figures.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}

/* ---------- style tokens ---------- */
:root,html[data-style="plain"]{--paper:#fff;--band:#f4f4f1;--ink:#111;--muted:#555;--rule:#d8d8d8;--gridc:#ececec;--link:#1F4E8C;--visited:#5A3E88;--accent:#1F4E8C;--accent-fill:#e9eef6;--second:#7a4b1c;--da:#4A7520;--db:#A64E12;--dc:#35598A;--ta:#4A7520;--tb:#A64E12;--tc:#35598A;--f-text:"ET Book",Charter,Georgia,serif;--f-head:var(--f-text);--f-ui:var(--f-text);--f-data:var(--f-text);--hw:700;--fs:19px;--h1:30px;--h1-land:52px;--r:0px}
html[data-style="lens"]{--paper:#F4F7F4;--band:#E2EBE6;--ink:#15231E;--muted:#4A5C55;--rule:#BCCBC4;--gridc:#dfe8e3;--link:#2B6A5E;--visited:#2B6A5E;--accent:#2B6A5E;--accent-fill:#C4E9EA;--second:#7A6118;--da:#2B6A5E;--db:#A2802A;--dc:#3A73B5;--ta:#2B6A5E;--tb:#7A6118;--tc:#3A73B5;--f-text:Literata,Georgia,serif;--f-head:Literata,Georgia,serif;--f-ui:Cabin,"Gill Sans",sans-serif;--f-data:Cabin,"Gill Sans",sans-serif;--hw:500;--fs:18px;--h1:36px;--h1-land:46px;--r:2px}
html[data-style="tesserae"]{--paper:#EFEDE8;--band:#E6D9CA;--ink:#1B2540;--muted:#4F5566;--rule:#C9C1B5;--gridc:#e2ddd4;--link:#2A5A96;--visited:#2A5A96;--accent:#2A5A96;--accent-fill:#CFE0EE;--second:#9A4E33;--da:#2A5A96;--db:#3D8EA5;--dc:#9A4E33;--ta:#2A5A96;--tb:#22697E;--tc:#9A4E33;--f-text:Alegreya,Georgia,serif;--f-head:Alegreya,Georgia,serif;--f-ui:"Alegreya Sans",sans-serif;--f-data:"Alegreya Sans",sans-serif;--hw:500;--fs:19px;--h1:38px;--h1-land:48px;--r:0px}
html[data-style="studio"]{--paper:#F3F1ED;--band:#E6E0D8;--ink:#2A1A11;--muted:#65544A;--rule:#CDC3B8;--gridc:#e4ded6;--link:#2A1A11;--visited:#2A1A11;--accent:#15688A;--accent-fill:#A9DFF0;--second:#A14815;--da:#1F7FA6;--db:#B85A22;--dc:#65544A;--ta:#15688A;--tb:#A14815;--tc:#65544A;--f-text:"Atkinson Hyperlegible Next",system-ui,sans-serif;--f-head:"Atkinson Hyperlegible Next",system-ui,sans-serif;--f-ui:"Atkinson Hyperlegible Next",system-ui,sans-serif;--f-data:"Atkinson Hyperlegible Mono",ui-monospace,monospace;--hw:500;--fs:17.5px;--h1:34px;--h1-land:42px;--r:2px}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-text);font-size:var(--fs);line-height:1.5;font-variant-numeric:lining-nums tabular-nums}
img{max-width:100%}
.site{container-type:inline-size;container-name:site;min-height:100vh}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:visited{color:var(--visited)}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html[data-style="studio"] .prose a,html[data-style="studio"] .card p a{text-decoration:none;box-shadow:inset 0 -0.42em 0 var(--accent-fill)}
html[data-style="studio"] .prose a:hover,html[data-style="studio"] .card p a:hover{box-shadow:inset 0 -1.15em 0 var(--accent-fill)}
:is(h1,h2,h3){font-family:var(--f-head);font-weight:var(--hw);line-height:1.2;text-wrap:balance;margin:0}
p{margin:0 0 .8em;text-wrap:pretty}
.muted{color:var(--muted)}
.small{font-size:.8em}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
@container site (min-width:700px){.wrap{padding:0 36px}}
.skip{position:absolute;left:-9999px;top:0;background:var(--paper);padding:8px 12px;z-index:10}
.skip:focus{left:12px;top:12px}

/* ---------- charts ---------- */
svg.plot{display:block;max-width:100%;height:auto;overflow:visible}
svg.plot .g{stroke:var(--gridc);stroke-width:1}
svg.plot .gm{stroke:var(--rule)}
svg.plot .ia{stroke:var(--da);stroke-width:2.2}
svg.plot .ib{stroke:var(--db);stroke-width:2.2}
svg.plot .ic{stroke:var(--dc);stroke-width:2.2}
svg.plot .ma{fill:var(--da)}
svg.plot .mb{fill:var(--paper);stroke:var(--db);stroke-width:1.8}
svg.plot .mc{fill:var(--dc)}
.ta{color:var(--ta)} .tb{color:var(--tb)} .tc{color:var(--tc)}
.key{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--f-ui);font-size:.78em;color:var(--muted);margin:6px 0}
.key svg{vertical-align:-1px;margin-right:4px}
table.ratings{width:100%;border-collapse:collapse;font-size:.92em}
table.ratings th{font-weight:400;text-align:left;padding:5px 12px 5px 0;vertical-align:middle}
table.ratings td{padding:5px 0;vertical-align:middle}
table.ratings td.n{text-align:right;white-space:nowrap;font-family:var(--f-data);font-size:.9em;padding-left:10px;width:5.5em}
table.ratings tr+tr:not(.ax) th,table.ratings tr+tr:not(.ax) td{border-top:1px solid var(--gridc)}
table.ratings td.pl{width:46%}
table.ratings td.pl svg.plot{width:100%}
table.ratings tr.ax td{border:0!important;padding-top:0}
table.ratings tr.ax .axis{padding:0 1%}
@container site (max-width:560px){table.ratings,table.ratings tbody{display:block}table.ratings tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}table.ratings th{grid-column:1/-1;padding:6px 0 0}table.ratings td.pl{width:auto}table.ratings tr.ax th{display:none}}
.axis{display:flex;justify-content:space-between;font-family:var(--f-ui);font-size:.72em;color:var(--muted)}

/* ---------- flourishes: part of the Lens, Tesserae and Studio styles; Plain has none ---------- */
.fl{display:none}
html[data-style="studio"] .fl-brush{display:block;width:min(340px,70%);height:12px;color:var(--second);margin:12px 0 4px}
html[data-style="tesserae"] .fl-strip{display:flex;gap:3px;overflow:hidden;height:9px;margin:10px 0 0}
.fl-strip span{flex:0 0 9px;height:9px}
.ring-target{position:relative;display:inline-block}
html[data-style="lens"] .ring-target{margin:0 1.1em}
html[data-style="lens"] .fl-ring{display:block;position:absolute;left:50%;top:50%;width:calc(100% + 46px);height:calc(100% + 22px);min-height:36px;transform:translate(-50%,-50%) rotate(-3deg);color:var(--accent);pointer-events:none}

/* ---------- landing layout ---------- */
.landhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:18px 0}
.landhead .logo{height:52px;width:auto;display:block}
.landhead nav{display:flex;flex-wrap:wrap;gap:4px 20px;margin-left:auto;font-family:var(--f-ui);font-size:.86em}
.landhead nav a{color:var(--ink);text-decoration:none}
.landhead nav a:hover,.landhead nav a[aria-current]{text-decoration:underline}
.btn{display:inline-block;font-family:var(--f-ui);font-size:.9em;padding:11px 22px;border-radius:999px;text-decoration:none!important;box-shadow:none!important;border:1.5px solid var(--accent)}
.btn.pri{background:var(--accent);color:#fff!important}
.btn.sec{background:transparent;color:var(--accent)!important}
.hero{text-align:center;padding:56px 0 48px}
.hero .eyebrow{font-family:var(--f-ui);font-size:.74em;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.hero h1{font-size:var(--h1-land);max-width:16em;margin:0 auto 16px;line-height:1.12}
.hero p.lead{max-width:34em;margin:0 auto 24px;font-size:1.1em;color:var(--muted)}
.hero .btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hero .fl-brush{margin-left:auto!important;margin-right:auto!important}
@container site (max-width:560px){.hero{padding:32px 0 32px}.hero h1{font-size:calc(var(--h1-land) * .62)}.hero p.lead{font-size:1em}.band,.plainband{padding:32px 0}.band h2,.plainband h2{font-size:1.3em}}
.band{background:var(--band);padding:44px 0}
.plainband{padding:44px 0}
.band h2,.plainband h2{font-size:1.5em;text-align:center;margin:0 0 22px}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@container site (min-width:760px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--paper);border-radius:calc(var(--r) + 10px);padding:22px;box-shadow:0 8px 24px rgba(0,0,0,.07);border:1px solid var(--rule)}
.band .card{border-color:transparent}
.card h3{font-size:1.08em;margin:0 0 8px}
.card p{font-size:.92em;color:var(--muted);margin:0}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.num{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-ui);font-weight:700;margin:0 0 12px}
.feature{max-width:860px;margin:0 auto}
.feature .card{padding:28px}
.feature .ratings-wrap{margin-top:14px}
.byline{font-style:italic;color:var(--muted)}
details.acc{background:var(--paper);border-radius:calc(var(--r) + 8px);padding:14px 18px;margin:0 0 10px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
details.acc summary{cursor:pointer;font-weight:700;font-family:var(--f-head)}
details.acc p{margin:10px 0 0;color:var(--muted)}
.cta{background:var(--accent);color:#fff;text-align:center;padding:52px 0}
.cta h2{color:#fff;font-size:1.6em;margin:0 0 10px}
.cta p{color:#fff;opacity:.9;margin:0 0 20px}
.cta .btn.pri{background:#fff;color:var(--accent)!important;border-color:#fff}
.moreinfo{max-width:860px;margin:0 auto;font-size:.95em}
.moreinfo ul{padding-left:1.2em}

/* homepage: what we do, video, numbers, package list, supporters */
.why{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:1040px;margin:0 auto}
@container site (min-width:860px){.why{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px;align-items:start}}
.why-text p{margin:0 0 1em}
.why-text p:first-child{font-size:1.12em;font-style:italic}
.video{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:16/9;padding:18px 20px;background:var(--ink);color:var(--paper)!important;border-radius:calc(var(--r) + 6px);text-decoration:none!important;box-shadow:none!important;position:relative;font-family:var(--f-ui)}
.video .play{position:absolute;left:20px;top:18px;width:52px;height:52px;border-radius:50%;border:2px solid currentColor}
.video .play::after{content:"";position:absolute;left:18px;top:13px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent currentColor}
.video:hover .play{background:rgba(255,255,255,.12)}
.video-t{font-size:1em}
.video-s{font-size:.78em;opacity:.75}
.video-frame{aspect-ratio:16/9}
.video-frame iframe{width:100%;height:100%;border:0;border-radius:calc(var(--r) + 6px)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;text-align:center}
.stat-n{display:block;font-family:var(--f-head);font-size:1.9em;line-height:1.1;color:var(--accent)}
.stat-l{display:block;font-family:var(--f-ui);font-size:.74em;color:var(--muted)}
.feature .card h3{font-size:1.2em}
.why-chosen{font-style:italic;color:var(--muted)}
.evs{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:18px 0 6px}
@container site (min-width:760px){.evs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ev{border-top:2px solid var(--accent);padding-top:10px}
.ev h4{font-family:var(--f-ui);font-size:.82em;font-weight:700;margin:0 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.ev blockquote{margin:0 0 10px;font-size:.95em;line-height:1.45}
.ev-rating{display:flex;flex-direction:column;gap:2px;margin:0 0 6px}
.ev p{margin:0}
.pkg-links{margin:14px 0 0;font-family:var(--f-ui);font-size:.9em}
p.package{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule)}
.pipeline-note{max-width:44em;margin:-8px auto 22px;text-align:center;color:var(--muted);font-size:.92em}
.supporters{max-width:720px;margin:0 auto;text-align:center}
.supporters h2{margin-bottom:14px}

/* ---------- footer, with the page-style picker ---------- */
.landfoot{background:#15171a;color:#cfd2d6;padding:36px 0 40px;font-family:var(--f-ui);font-size:.8em}
.landfoot .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@container site (min-width:760px){.landfoot .cols{grid-template-columns:2fr 1fr 1fr}}
.landfoot a,.landfoot a:visited{color:#fff}
.landfoot b{color:#fff}
.stylepick{margin-top:26px;padding-top:14px;border-top:1px solid #33363b;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;color:#a9adb3}
.stylepick button{font:inherit;font-size:.95em;color:#d9dce0;background:transparent;border:1px solid #4a4e55;border-radius:3px;padding:3px 9px;cursor:pointer}
.stylepick button:hover{border-color:#9aa0a8}
.stylepick button[aria-pressed="true"]{background:#e8e9eb;color:#15171a;border-color:#e8e9eb}
.stylepick button:focus-visible{outline:2px solid #7cc4ff;outline-offset:1px}
.stylepick .hint{flex-basis:100%;font-size:.92em;color:#8d929a}
.stylepick .hint a,.stylepick .hint a:visited{color:#c4c8cd}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}