/* ============================================================ Scripture Structure — shared styles Used by: index.html, the-creation.html, sermon-on-the-mount.html, gospel-of-john.html ============================================================ */ /* ---------- color themes (switch via data-theme on ) ---------- */ [data-theme="oxford"]{--bg:#e9eef5;--fg:#102a43;--muted:#41607d;--line:#ccd8e6;--paper:#ffffff;--paper-fg:#102a43;--paper-muted:#52708d;--accent:#bb6a2c;--accent-2:#1f6f7d;--contact-bg:#102a43;--contact-fg:#eaf0f6;--grain:rgba(16,42,67,.06)} [data-theme="slate"]{--bg:#eaeeea;--fg:#25322a;--muted:#50635a;--line:#d2dcd3;--paper:#fbfcfb;--paper-fg:#25322a;--paper-muted:#566a5e;--accent:#6a8a4f;--accent-2:#2f6f6a;--contact-bg:#25322a;--contact-fg:#eef2ec;--grain:rgba(37,50,42,.06)} [data-theme="midnight"]{--bg:#0d1726;--fg:#e7eef6;--muted:#9fb2c6;--line:#243348;--paper:#f4f6f9;--paper-fg:#0f1d30;--paper-muted:#52708d;--accent:#d6a13d;--accent-2:#3b97a8;--contact-bg:#16243a;--contact-fg:#e7eef6;--grain:rgba(255,255,255,.045)} [data-theme="forest"]{--bg:#0f1f18;--fg:#e6efe8;--muted:#9bb4a6;--line:#25392f;--paper:#f6f8f5;--paper-fg:#16271d;--paper-muted:#4f6a59;--accent:#d8a43a;--accent-2:#3f9a8a;--contact-bg:#16291f;--contact-fg:#e6efe8;--grain:rgba(255,255,255,.04)} :root{ --struct-ink:#15263f;--struct-ink-fg:#f5f1e6;--promise:#1c6b78; --shadow:24px 24px 64px rgba(10,20,40,.16); --step:clamp(.5rem,3.6vw,2.4rem); /* Matthew — antitheses */ --heard:#9c2a6e;--heard-fg:#fff;--cmd:#7a1340;--cmd-fg:#f7cfe1;--say:#f2d3e6;--say-fg:#7a1340;--newcmd:#5a0d2e;--newcmd-fg:#f7cfe1; /* John — keyword themes */ --k-word:#1f4e8a;--k-life:#2e7d4a;--k-light:#e8b923;--k-dark:#222a38;--k-world:#1f7a4d;--k-believe:#b23b34;--k-know:#c2761c;--k-father:#b9911f;--k-witness:#6f55a8;--k-grace:#1f6f7d;--k-title:#1f7f8c;--k-truly:#85144b; /* Genesis — creation formulas */ --f-spoke:#2257a6;--f-fulfilled:#7a3aa0;--f-named:#9c2a6e;--f-divided:#1f7a8c;--f-approved:#2e7d4a;--f-closed:#3b4276; } /* ---------- base ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--fg);font-family:"Spectral",Georgia,serif;font-size:18px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s} body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(circle at 1px 1px,var(--grain) 1px,transparent 0);background-size:22px 22px} a{color:inherit} h1,h2,h3{font-family:"Fraunces",serif;font-weight:500;line-height:1.1;letter-spacing:-.01em} .eyebrow{font-family:"Archivo",sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:600;color:var(--accent)} /* ---------- layout width (home is wide, study pages are narrower) ---------- */ .wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:1} .study .wrap{max-width:900px} header.bar .wrap{max-width:1080px} /* ---------- header ---------- */ header.bar{position:sticky;top:0;z-index:20;backdrop-filter:saturate(1.2) blur(8px);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)} .bar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px} .mark{font-family:"Fraunces",serif;font-weight:600;font-size:1.12rem;letter-spacing:-.02em;display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--fg)} .mark svg,.mark .glyph{width:26px;height:26px;flex:none} .nav{display:flex;gap:1.6rem;font-family:"Archivo",sans-serif;font-size:.82rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em} .nav a{text-decoration:none;color:var(--muted);transition:color .2s} .nav a:hover{color:var(--accent)} @media(max-width:680px){.nav{display:none}} .back{font-family:"Archivo",sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-decoration:none} .back:hover{color:var(--accent)} /* ---------- footer ---------- */ footer.site{padding:2.4rem 0 5.4rem;border-top:1px solid var(--line)} .study footer.site{margin-top:2rem} footer.site .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;font-family:"Archivo",sans-serif;font-size:.8rem;color:var(--muted);letter-spacing:.03em} footer.site a{color:var(--muted);text-decoration:none} footer.site a:hover{color:var(--accent)} /* ---------- theme switcher ---------- */ .themer{position:fixed;bottom:18px;right:18px;z-index:50;display:flex;gap:8px;padding:10px 12px;border-radius:999px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.18)} .themer button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;outline:none;transition:transform .15s,border-color .15s} .themer button:hover{transform:scale(1.12)} .themer button[aria-pressed="true"]{border-color:var(--fg)} .t-oxford{background:#1f4e7a}.t-slate{background:#6a8a4f}.t-midnight{background:#0d1726}.t-forest{background:#163a2a} @media(max-width:480px){.themer{bottom:12px;right:12px}} /* ---------- scroll reveal + hero animation (home only) ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease} .reveal.in{opacity:1;transform:none} .home .brow{opacity:0;transform:translateY(14px)} .home .struct.in .brow{animation:rise .6s ease forwards} .home .struct.in .grouplabel{animation:fade .6s ease forwards;opacity:0} @keyframes rise{to{opacity:1;transform:none}} @keyframes fade{to{opacity:.9}} /* ============================================================ HOME PAGE ============================================================ */ .hero{padding:clamp(3.5rem,9vw,7rem) 0 clamp(2.5rem,6vw,4.5rem)} .hero .eyebrow{display:block;margin-bottom:1.4rem} .hero h1{font-size:clamp(2.6rem,7.2vw,5.2rem);max-width:14ch} .hero h1 em{font-style:italic;color:var(--accent)} .hero p.lede{margin-top:1.6rem;max-width:54ch;font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--muted)} .scrollcue{margin-top:2.8rem;display:inline-flex;align-items:center;gap:.6rem;font-family:"Archivo",sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none} .scrollcue .dash{width:42px;height:1px;background:var(--accent);transition:width .25s} .scrollcue:hover .dash{width:64px} .hero-grid{display:block} @media(min-width:900px){.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}} .hero-copy{min-width:0} .hero-art{--astep:clamp(11px,2.4vw,30px);position:relative;height:clamp(280px,34vw,430px);margin-top:2.6rem} @media(min-width:900px){.hero-art{margin-top:0}} @media(max-width:600px){.hero-art{display:none}} .art-glow{position:absolute;inset:0;background:radial-gradient(42% 46% at calc(6% + 4*var(--astep)) 50%, color-mix(in srgb,var(--accent) 30%,transparent), transparent 70%);filter:blur(4px);animation:glowpulse 7s ease-in-out infinite} @keyframes glowpulse{0%,100%{opacity:.3;transform:scale(.9)}40%,72%{opacity:.7;transform:scale(1)}} .lines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(9px,1.6vw,15px);padding:0 6%} .ln{height:clamp(9px,1.2vw,13px);width:var(--w);border-radius:99px;background:color-mix(in srgb,var(--fg) 20%,transparent);transform:translateX(calc(var(--d)*var(--astep)));animation:form 7s cubic-bezier(.65,0,.35,1) infinite} .ln.peak{background:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 65%,transparent)} @keyframes form{0%,8%{transform:translateX(0)}38%,72%{transform:translateX(calc(var(--d)*var(--astep)))}100%{transform:translateX(0)}} .spine{position:absolute;top:9%;bottom:9%;left:calc(6% + 4*var(--astep));width:2px;border-radius:2px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 10%,transparent));transform-origin:center;animation:spine 7s ease-in-out infinite} .spine::before{content:"";position:absolute;top:-7px;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent)} @keyframes spine{0%,12%{opacity:0;transform:scaleY(.15)}40%,72%{opacity:.55;transform:scaleY(1)}100%{opacity:0;transform:scaleY(.15)}} .demo{padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem)} .demo-head{max-width:60ch;margin-bottom:2.4rem} .demo-head h2{font-size:clamp(1.8rem,4.4vw,2.9rem);margin:.6rem 0 1rem} .demo-head p{color:var(--muted)} .panel{background:var(--paper);color:var(--paper-fg);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:clamp(1.4rem,4vw,3.2rem);position:relative;overflow:hidden} .panel .ref{font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem} .panel .intro{font-style:italic;color:var(--paper-muted);max-width:62ch;margin-bottom:1.8rem;font-size:.98rem} /* Beatitudes staircase (home demo + Matthew) */ .struct{display:flex;flex-direction:column;gap:.5rem;margin:0 auto;max-width:760px} .grouplabel{font-family:"Archivo",sans-serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);padding-left:calc(var(--depth,0) * var(--step));margin-top:1.1rem;opacity:.9} .grouplabel:first-child{margin-top:0} .glabel{font-family:"Archivo",sans-serif;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding-left:calc(var(--depth,0)*var(--step));margin-top:1rem;opacity:.9} .glabel:first-child{margin-top:0} .brow{padding-left:calc(var(--depth) * var(--step))} .bline{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .55rem;padding:.5rem .8rem;border-radius:10px;background:linear-gradient(90deg, color-mix(in srgb,var(--paper-fg) 6%, transparent), transparent 70%)} .brow.peak .bline{background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 22%, transparent), transparent 80%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%, transparent)} .blessed{font-family:"Archivo",sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-muted);align-self:center} .who{background:var(--struct-ink);color:var(--struct-ink-fg);padding:.12em .6em;border-radius:6px;font-weight:500;font-size:1.02rem} .brow.peak .who{background:var(--accent);color:#fff} .sep{color:var(--line);font-weight:600} .promise{color:var(--promise);font-style:italic} .legend{display:flex;flex-wrap:wrap;gap:1.1rem 1.8rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);font-family:"Archivo",sans-serif;font-size:.78rem;color:var(--paper-muted)} .legend .lkey{display:flex;align-items:center;gap:.55rem} .swatch{width:26px;height:16px;border-radius:4px;flex:none} .sw-who{background:var(--struct-ink)} .sw-peak{background:var(--accent)} .sw-promise{background:var(--promise)} .caption{margin-top:1.8rem;font-size:.98rem;color:var(--paper-muted);max-width:64ch} .caption strong{color:var(--paper-fg);font-weight:600} .idea{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid var(--line)} .idea h2{font-size:clamp(1.8rem,4.4vw,2.9rem);max-width:18ch;margin-bottom:2.6rem} .threes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem} @media(max-width:760px){.threes{grid-template-columns:1fr}} .three .num{font-family:"Fraunces",serif;font-size:2.4rem;color:var(--accent);line-height:1} .three h3{font-size:1.2rem;margin:.7rem 0 .5rem} .three p{font-size:.98rem;color:var(--muted)} .examples{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid var(--line)} .examples .eyebrow{display:block;margin-bottom:.7rem} .examples h2{font-size:clamp(1.8rem,4.4vw,2.9rem);margin-bottom:.8rem} .examples > .wrap > p{color:var(--muted);max-width:58ch;margin-bottom:2.4rem} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem} .card{display:block;text-decoration:none;background:var(--paper);color:var(--paper-fg);border:1px solid var(--line);border-radius:16px;padding:1.8rem;transition:transform .25s, box-shadow .25s, border-color .25s} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)} .card .tag{font-family:"Archivo",sans-serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .card h3{font-size:1.5rem;margin:.5rem 0 .5rem} .card p{font-size:.95rem;color:var(--paper-muted);margin-bottom:1rem} .card .go{font-family:"Archivo",sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-fg);display:inline-flex;gap:.4rem;align-items:center} .card:hover .go{color:var(--accent)} .mini{display:flex;flex-direction:column;gap:5px;margin-bottom:1.4rem} .mini span{height:8px;border-radius:3px;background:color-mix(in srgb,var(--paper-fg) 10%, transparent)} .mini span:nth-child(1){width:40%}.mini span:nth-child(2){width:55%;margin-left:8%} .mini span:nth-child(3){width:70%;margin-left:16%;background:var(--accent);opacity:.5} .mini span:nth-child(4){width:55%;margin-left:8%}.mini span:nth-child(5){width:40%} .about{padding:clamp(3rem,7vw,5rem) 0;border-top:1px solid var(--line)} .about-grid{display:grid;grid-template-columns:1fr 2fr;gap:2rem} @media(max-width:760px){.about-grid{grid-template-columns:1fr}} .about h2{font-size:clamp(1.6rem,4vw,2.4rem)} .about p{color:var(--muted)} .contact{margin:clamp(3rem,7vw,5rem) 0;background:var(--contact-bg);color:var(--contact-fg);border:1px solid var(--line);border-radius:24px;padding:clamp(2.6rem,7vw,5rem) clamp(1.6rem,5vw,4rem);text-align:center;position:relative;overflow:hidden} .contact::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 50% -10%, color-mix(in srgb,var(--accent) 32%,transparent), transparent 60%)} .contact .eyebrow{color:var(--accent)} .contact h2{font-size:clamp(2rem,5vw,3.2rem);color:var(--contact-fg);margin:.8rem 0 1.2rem;position:relative} .contact p{max-width:46ch;margin:0 auto 2rem;color:color-mix(in srgb,var(--contact-fg) 80%, transparent);position:relative} .email-btn{position:relative;display:inline-block;text-decoration:none;font-family:"Archivo",sans-serif;font-weight:600;letter-spacing:.04em;background:var(--accent);color:#fff;padding:1rem 2.2rem;border-radius:999px;font-size:1.02rem;transition:transform .2s,filter .2s} .email-btn:hover{transform:translateY(-2px);filter:brightness(1.08)} /* ============================================================ STUDY PAGES — shared ============================================================ */ .head{padding:clamp(2.6rem,7vw,5rem) 0 1.6rem} .head .eyebrow{display:block;margin-bottom:.8rem} .head h1{font-size:clamp(2.2rem,6vw,3.8rem)} .head p{color:var(--muted);max-width:62ch;margin-top:1rem} .leaf{background:var(--paper);color:var(--paper-fg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:clamp(1.3rem,4vw,2.8rem);margin:2rem 0} .leaf .ref{font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem} .leaf h2{font-size:clamp(1.4rem,3.4vw,2rem);margin-bottom:.4rem} .leaf > p.note{color:var(--paper-muted);font-style:italic;font-size:.95rem;margin-bottom:1.4rem;max-width:62ch} .narr{color:var(--paper-muted);font-style:italic;margin-bottom:1.4rem} .aside{border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);padding:1rem 1.2rem;border-radius:0 10px 10px 0;margin:1.4rem 0;color:var(--fg)} .aside .lab{font-family:"Archivo",sans-serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.4rem} .aside p{margin:0;font-size:.97rem} .aside.in-leaf{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--paper-fg)} .key{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;margin:1.6rem 0 0;font-family:"Archivo",sans-serif;font-size:.73rem;color:var(--muted)} .key .k,.key .ki{display:flex;align-items:center;gap:.45rem} .dot{width:20px;height:13px;border-radius:4px;flex:none} .u{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent);text-decoration-thickness:2px} .b{font-weight:600} .l{padding-left:calc(var(--d,0)*var(--step));margin:.18rem 0} /* shared inline chips used by both John & Genesis */ .light{background:#e0a92a;color:#4a3500} .dark{background:#222a38;color:#cfd6e2} /* ---------- Matthew (Sermon on the Mount) ---------- */ .coda{margin-top:1.4rem;padding-top:1.2rem;border-top:1px dashed var(--line);color:var(--paper-fg)} .coda .l{margin:.2rem 0} .saltlight .l{margin:.5rem 0} .teal{background:#1f6f7d;color:#fff;padding:.1em .5em;border-radius:6px;font-weight:500} .teal-soft{background:#dff0f2;color:#0f4651;padding:.1em .5em;border-radius:6px} .lawline{margin:.5rem 0} .abolish{background:#6a2a86;color:#f0dcfb;padding:.1em .5em;border-radius:6px} .fulfill{background:#ead2f7;color:#5c1576;padding:.1em .5em;border-radius:6px} .refrain{background:var(--struct-ink);color:var(--struct-ink-fg);padding:.1em .5em;border-radius:6px;font-weight:600} .kingdom{font-weight:600;border-bottom:2px solid var(--accent)} .anti{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1.2rem;align-items:start;margin:.2rem 0 1.1rem;padding:1rem;border-radius:12px;border:1px solid var(--line)} @media(max-width:620px){.anti{grid-template-columns:1fr}} .anti .col h4{font-family:"Archivo",sans-serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem;color:var(--paper-muted)} .lab-heard{background:var(--heard);color:var(--heard-fg);padding:.06em .5em;border-radius:5px;font-size:.82rem;font-family:"Archivo",sans-serif;letter-spacing:.04em} .lab-say{background:var(--say);color:var(--say-fg);padding:.06em .5em;border-radius:5px;font-size:.82rem;font-family:"Archivo",sans-serif;letter-spacing:.04em} .cmd{background:var(--cmd);color:var(--cmd-fg);padding:.08em .45em;border-radius:5px;display:inline-block;margin-top:.3rem} .newcmd{background:var(--say);color:var(--newcmd);padding:.08em .45em;border-radius:5px;display:inline-block;margin-top:.3rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--newcmd) 30%,transparent)} .elab{margin-top:.7rem;color:var(--paper-fg)} .elab .l{margin:.25rem 0} .wip{margin:2rem 0;padding:1.4rem 1.6rem;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:.95rem} .wip strong{color:var(--accent);font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.4rem} /* ---------- John (Gospel of John) ---------- */ .stz{margin:1.1rem 0} .center{text-align:center;padding-left:0} .right{text-align:right;padding-left:0} .it{font-style:italic} .k{padding:.05em .42em;border-radius:5px;font-weight:500;white-space:nowrap} .word{background:var(--k-word);color:#fff} .life{border-bottom:2px solid var(--k-life)} .became{background:#d9f0df;color:#185c33} .world{background:var(--k-world);color:#fff} .believe{background:var(--k-believe);color:#fff} .know{background:var(--k-know);color:#fff} .father{background:var(--k-father);color:#3a2c00} .witness{background:var(--k-witness);color:#fff} .grace{background:var(--k-grace);color:#fff} .glory{background:#cfe6ea;color:#0f4651} .truly{background:var(--k-truly);color:#fff;font-weight:600} .nodiv{background:#fde2e2;color:#7a1313} .yes{background:#f6f3cf;color:#5a5400} .receive{background:#ffe3c2;color:#7a4708} .descend{background:#d9c2f5;color:#3d1d70} .baptize{background:#cdeef6;color:#0d4d5e} .follow{background:#d2f7c2;color:#2a5a14} .come{background:#cfeae0;color:#1f4f3e} .title{display:inline-block;background:var(--k-title);color:#fff;padding:.08em .55em;border-radius:6px;font-weight:600} .titles-rail{margin-top:1.2rem;padding-top:1.1rem;border-top:1px dashed var(--line)} .titles-rail .cap{font-family:"Archivo",sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem} .stack{display:flex;flex-direction:column;gap:.4rem;max-width:520px} .stack .title{align-self:flex-start} .stack .title:nth-child(2){margin-left:8%} .stack .title:nth-child(3){margin-left:16%} .stack .title:nth-child(4){margin-left:24%} .stack .title:nth-child(5){margin-left:32%} .stack .title:nth-child(6){margin-left:40%} .stack .title:nth-child(7){margin-left:48%} /* ---------- Genesis (The Creation) ---------- */ .frame{margin:2rem 0} .frame h2{font-size:clamp(1.5rem,3.6vw,2.2rem);margin-bottom:.5rem} .frame > p.sub{color:var(--muted);max-width:60ch;margin-bottom:1.8rem} .triad-heads{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem 1rem;margin-bottom:.6rem} .triad-heads span{font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase} .triad-heads .a{color:var(--accent-2)}.triad-heads .b{color:var(--accent);text-align:right}.triad-heads .mid{width:34px} @media(max-width:640px){.triad-heads{display:none}} .pair{display:flex;align-items:stretch;gap:1rem;margin-bottom:1rem} @media(max-width:640px){.pair{flex-direction:column;gap:.5rem}} .pcard{flex:1;background:var(--paper);color:var(--paper-fg);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;box-shadow:var(--shadow)} .pcard.form{border-left:4px solid var(--accent-2)}.pcard.fill{border-left:4px solid var(--accent)} .pcard .d{font-family:"Archivo",sans-serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-muted)} .pcard h3{font-size:1.12rem;margin:.25rem 0 .2rem} .pcard p{font-size:.9rem;color:var(--paper-muted)} .arrow{display:flex;align-items:center;justify-content:center;width:34px;flex:none;color:var(--accent);font-size:1.4rem} @media(max-width:640px){.arrow{width:100%;height:24px;transform:rotate(90deg)}} .day-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1rem;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.2rem} .day-no{font-family:"Fraunces",serif;font-size:1.5rem;color:var(--accent)} .day-name{font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-muted)} .formulas{display:flex;flex-wrap:wrap;gap:.4rem;margin-left:auto} .fc{font-family:"Archivo",sans-serif;font-size:.64rem;letter-spacing:.04em;text-transform:uppercase;padding:.2em .5em;border-radius:5px;font-weight:600} .fc.on{color:#fff} .fc.off{background:transparent;color:var(--paper-muted);border:1px dashed var(--line);text-decoration:line-through;opacity:.8} .verse{margin:.5rem 0} .verse.in{padding-left:var(--step)} .verse.in2{padding-left:calc(var(--step)*2)} .h{padding:.04em .4em;border-radius:5px;font-weight:500;color:#fff} /* formula colors — shared by Genesis .fc chips and .h inline highlights */ .spoke{background:var(--f-spoke)} .fulfilled{background:var(--f-fulfilled)} .named{background:var(--f-named)} .divided{background:var(--f-divided)} .approved{background:var(--f-approved)} .closed{background:var(--f-closed)} .water{background:#1f3f7a} .heaven{background:#2f6fb0} .earth{background:#a9682b} .kind{background:#c2761c} .seed{background:#2e7d4a} .em{font-weight:600} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .home .brow{opacity:1;transform:none} .home .struct.in .brow,.home .struct.in .grouplabel{animation:none;opacity:1} .art-glow{animation:none;opacity:.55} .spine{animation:none;opacity:.5;transform:none} .ln{animation:none;transform:translateX(calc(var(--d)*var(--astep)))} }