/* -------------------------------------------------------------------------- PALETTE Dark is the default now, matched to the ICXC Logos store: --ground, --ink, --ink-soft and --ink-faint are the store's own values, so the reading pages and the front door sit on the same colours. The three accents stay distinguishable on purpose. They are not decoration — a reader tells a Father speaking (gold) from an Old Testament source text (lapis) from the study's own voice (porphyry) by colour alone. They are warmed and desaturated to sit on the brand ground rather than fight it. The original paper palette is kept below under [data-theme="light"]. Setting data-theme="light" on switches the whole site back to it. -------------------------------------------------------------------------- */ :root{ color-scheme:dark; --ground:#1B1715; /* store background */ --surface:#221E1B; /* raised panels */ --surface-sunk:#16120F; /* recessed panels */ --ink:#E4E1DD; /* store primary text */ --ink-soft:#ADA79E; /* store secondary text */ --ink-faint:#877F76; --porphyry:#C69390; --porphyry-soft:#271B1D; --lapis:#9DB0C9; --lapis-soft:#1A1E23; --gold:#C6A875; --gold-soft:#241E15; --rule:#322C27; --rule-strong:#4B433C; --verse-line:#5B6879; --shadow:0 1px 2px rgba(0,0,0,.45),0 8px 24px -12px rgba(0,0,0,.65); --display:"Cormorant Garamond",Georgia,"Times New Roman",serif; --body:"Source Serif 4",Georgia,Cambria,serif; --util:"Jost",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --script:"Uncial Antiqua","Cormorant Garamond",Georgia,serif; } :root[data-theme="light"]{ color-scheme:light; --ground:#F7F6F2; --surface:#FFFFFF; --surface-sunk:#F1EFE9; --ink:#1C1A24; --ink-soft:#56505F; --ink-faint:#8B8494; --porphyry:#6E1C36; --porphyry-soft:#F3E7EA; --lapis:#1E3A6E; --lapis-soft:#E8EDF6; --gold:#8E7134; --gold-soft:#F4EEDF; --rule:#DFDBD2; --rule-strong:#C6C0B4; --verse-line:#A9B8D2; --shadow:0 1px 2px rgba(28,26,36,.05),0 8px 24px -12px rgba(28,26,36,.14); } *{box-sizing:border-box} body{ background:var(--ground); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; } ::selection{background:var(--porphyry-soft);color:var(--ink)} a{color:var(--porphyry);text-underline-offset:.18em;text-decoration-thickness:.06em} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--lapis);outline-offset:3px;border-radius:2px} /* ---------- shell ---------- */ .shell{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:0} @media(min-width:960px){ .shell{display:grid;grid-template-columns:210px minmax(0,1fr);gap:56px;align-items:start} } /* ---------- masthead ---------- */ .masthead{border-bottom:1px solid var(--rule);margin-bottom:0} .masthead-inner{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:58px 44px} .monogram{ font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.34em; color:var(--porphyry);text-transform:none;margin:0 0 26px; } .masthead h1{ font-family:var(--display);font-weight:600;font-size:clamp(2.9rem,7.5vw,5rem); line-height:1.02;letter-spacing:-.018em;margin:0;text-wrap:balance;max-width:14ch; } .masthead .standfirst{ font-size:clamp(1.08rem,2.2vw,1.28rem);color:var(--ink-soft);margin:22px 0 0; max-width:54ch;line-height:1.5; } .masthead-meta{ display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px; font-family:var(--util);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint); } .masthead-meta strong{color:var(--ink-soft);font-weight:500} /* ---------- rail ---------- */ .rail{ position:sticky;top:env(safe-area-inset-top,0px);z-index:20; background:var(--ground);border-bottom:1px solid var(--rule); margin-inline:-20px;padding:10px 20px; } .rail-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none} .rail-scroll::-webkit-scrollbar{display:none} .rail a{ font-family:var(--util);font-size:12px;font-weight:500;letter-spacing:.02em; white-space:nowrap;padding:7px 12px;border-radius:99px;text-decoration:none; color:var(--ink-soft);background:var(--surface-sunk);border:1px solid transparent; } .rail a:hover{color:var(--ink);border-color:var(--rule-strong)} .rail a.done{color:var(--gold)} .rail a.done::before{content:"✓ ";font-size:11px} @media(min-width:960px){ .rail{ position:sticky;top:calc(env(safe-area-inset-top,0px) + 40px); background:none;border:0;margin:0;padding:0;padding-block:56px 0; } .rail-scroll{flex-direction:column;gap:1px;overflow:visible} .rail a{ border-radius:0;background:none;padding:8px 0 8px 14px; border-left:2px solid var(--rule);white-space:normal;line-height:1.3; } .rail a:hover{border-color:var(--rule-strong);border-left-color:var(--porphyry)} .rail a.done{border-left-color:var(--gold)} .rail-head{ font-family:var(--util);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-faint);margin:0 0 12px 14px; } } .rail-head{display:none} @media(min-width:960px){.rail-head{display:block}} /* ---------- reading column ---------- */ main{padding-block:0 96px;min-width:0} .col{max-width:41rem} section.part{padding-block:60px 0;scroll-margin-top:90px} @media(min-width:960px){section.part{scroll-margin-top:60px}} .eyebrow{ font-family:var(--util);font-size:11px;font-weight:600;letter-spacing:.17em; text-transform:uppercase;color:var(--porphyry);margin:0 0 14px; display:flex;align-items:center;gap:10px; } .eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)} h2{ font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.4vw,2.9rem); line-height:1.08;letter-spacing:-.014em;margin:0 0 18px;text-wrap:balance; } h3{ font-family:var(--display);font-weight:600;font-size:1.52rem;line-height:1.22; margin:44px 0 12px;letter-spacing:-.008em;text-wrap:balance; } h4{ font-family:var(--util);font-size:12px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-soft);margin:34px 0 10px; } p{margin:0 0 17px} .lede{font-size:1.16rem;line-height:1.55;color:var(--ink-soft);margin-bottom:26px} strong{font-weight:700;color:var(--ink)} em{font-style:italic} .col ul,.col ol{margin:0 0 18px;padding-left:1.35em} .col li{margin-bottom:8px} .col li::marker{color:var(--ink-faint)} /* ---------- scripture ---------- */ .read-first{ background:var(--lapis-soft);border-left:3px solid var(--lapis); padding:18px 22px;margin:0 0 30px;border-radius:0 4px 4px 0; } .read-first .label{ font-family:var(--util);font-size:11px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--lapis);margin:0 0 7px; } .read-first p{margin:0;font-size:1.02rem;line-height:1.5} blockquote{ margin:26px 0;padding:0 0 0 22px;border-left:2px solid var(--porphyry); font-size:1.1rem;line-height:1.5;color:var(--ink);font-style:italic; } blockquote cite{ display:block;font-style:normal;font-family:var(--util);font-size:11.5px; letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin-top:9px; } /* ---------- deeper / objection ---------- */ .deeper,.objection{ margin:30px 0;padding:20px 22px;border-radius:4px;font-size:.97rem;line-height:1.55; } .deeper{background:var(--gold-soft);border:1px solid var(--rule)} .objection{background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow)} .deeper .label,.objection .label{ font-family:var(--util);font-size:10.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;margin:0 0 9px; } .deeper .label{color:var(--gold)} .objection .label{color:var(--porphyry)} .deeper p:last-child,.objection p:last-child{margin-bottom:0} .objection .claim{ font-family:var(--display);font-size:1.22rem;font-style:italic;line-height:1.34; color:var(--ink);margin:0 0 14px; } /* ---------- tables ---------- */ .tw{overflow-x:auto;margin:26px 0;border:1px solid var(--rule);border-radius:4px;background:var(--surface)} table{border-collapse:collapse;width:100%;min-width:480px;font-size:.93rem} th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45} th{ font-family:var(--util);font-size:10.5px;font-weight:600;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-soft);background:var(--surface-sunk);white-space:nowrap; } tbody tr:last-child td{border-bottom:0} td.num{font-family:var(--util);color:var(--porphyry);font-weight:600;width:1%;white-space:nowrap} td.ref{font-family:var(--util);font-size:.86rem;color:var(--ink-soft);white-space:nowrap} /* ---------- questions ---------- */ .questions{background:var(--surface-sunk);border-radius:4px;padding:24px 26px;margin:34px 0 0} .questions .label{ font-family:var(--util);font-size:11px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-soft);margin:0 0 4px; } .questions p.hint{font-size:.92rem;color:var(--ink-faint);margin:0 0 16px;line-height:1.45} .questions ol{margin:0;padding-left:1.25em} .questions li{margin-bottom:13px;line-height:1.52} .questions li:last-child{margin-bottom:0} .remember{ margin:34px 0 0;padding:22px 24px;background:var(--porphyry-soft);border-radius:4px; } .remember .label{ font-family:var(--util);font-size:10.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--porphyry);margin:0 0 8px; } .remember p{ margin:0;font-family:var(--display);font-size:1.34rem;line-height:1.32; font-style:italic;color:var(--ink); } /* ---------- session completion ---------- */ .done-row{ display:flex;align-items:center;gap:11px;margin-top:30px;padding-top:22px; border-top:1px solid var(--rule); } .done-row button{ font-family:var(--util);font-size:12.5px;font-weight:500;cursor:pointer; background:var(--surface);color:var(--ink-soft);border:1px solid var(--rule-strong); padding:9px 16px;border-radius:99px;display:inline-flex;align-items:center;gap:8px; } .done-row button:hover{border-color:var(--ink-faint);color:var(--ink)} .done-row button[aria-pressed="true"]{ background:var(--gold-soft);border-color:var(--gold);color:var(--gold); } .done-row .tick{font-size:13px;line-height:1} /* ---------- divider ---------- */ .glyph{ text-align:center;font-family:var(--display);font-size:14px;letter-spacing:.4em; color:var(--rule-strong);margin:64px 0 0; } /* ---------- footer ---------- */ footer{ border-top:1px solid var(--rule);margin-top:72px;padding-block:40px 20px; font-size:.92rem;color:var(--ink-soft); } footer h4{margin-top:0} footer ul{padding-left:1.2em;margin:0 0 20px} footer li{margin-bottom:7px} /* ---------- the text behind the text ---------- */ .source{ margin:28px 0;padding:19px 22px 20px;border-radius:4px; background:var(--lapis-soft);border:1px solid var(--rule); } .source .label{ font-family:var(--util);font-size:10.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--lapis);margin:0 0 13px; } .source p{margin:0 0 13px;font-size:.97rem;line-height:1.55} .source > p:last-child{margin-bottom:0} .source .vtext{ font-family:var(--display);font-size:1.14rem;font-style:italic;line-height:1.38; color:var(--ink);margin:0 0 3px; } .source .vref{ font-family:var(--util);font-size:11px;letter-spacing:.07em; color:var(--lapis);margin:0 0 16px;font-style:normal; } .source .vref:last-of-type{margin-bottom:13px} /* ---------- hero epigraph ---------- */ .epigraph{background:var(--surface);border-bottom:1px solid var(--rule)} .epigraph-inner{ max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:54px 50px; } .ep-eyebrow{ font-family:var(--util);font-size:11px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--gold);margin:0 0 22px; display:flex;align-items:center;gap:14px; } .ep-eyebrow::after{content:"";flex:1;height:1px;background:var(--gold);opacity:.35;max-width:220px} .ep-quote{ font-family:var(--display);font-weight:400;font-style:italic; font-size:clamp(1.55rem,4.2vw,2.6rem);line-height:1.2;letter-spacing:-.012em; color:var(--ink);margin:0 0 20px;max-width:26ch;text-wrap:balance; } @media(min-width:760px){.ep-quote{max-width:32ch}} .ep-cite{ font-family:var(--util);font-size:12px;letter-spacing:.07em;color:var(--ink-soft); margin:0 0 22px; } .ep-note{ font-size:1.02rem;line-height:1.55;color:var(--ink-soft);margin:0;max-width:56ch; } .ep-note strong{color:var(--ink)} /* ---------- a Father speaking inside the argument ---------- */ .father{ margin:30px 0;padding:4px 0 4px 26px; border-left:3px solid var(--gold); } .father .who{ font-family:var(--util);font-size:11px;font-weight:600;letter-spacing:.11em; text-transform:uppercase;color:var(--gold);margin:0 0 10px; } .father .said{ font-family:var(--display);font-size:1.28rem;line-height:1.34;font-style:italic; color:var(--ink);margin:0 0 10px; } .father p{margin:0 0 12px;font-size:1rem;line-height:1.56} .father p:last-child{margin-bottom:0} .father .cite{ font-family:var(--util);font-size:11px;letter-spacing:.06em;color:var(--ink-faint); margin:0 0 14px; } /* ---------- scripture links ---------- */ a.v{ color:inherit;text-decoration:none; border-bottom:1px solid var(--verse-line); transition:color .12s ease,border-color .12s ease; } a.v:hover,a.v:focus-visible{color:var(--lapis);border-bottom-color:var(--lapis)} .read-first a.v{color:var(--lapis);border-bottom-color:var(--lapis);font-weight:600} blockquote cite a.v,td.ref a.v{border-bottom-color:var(--verse-line)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ========================================================================== SITE CHROME — added when the study became one page in a library. Everything above this line is the study's own design system. ========================================================================== */ /* ---------- site header — identical on every page ---------- */ .sitehead{border-bottom:1px solid var(--rule);background:var(--surface)} .sitehead-inner{ max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:13px; display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap; } /* The wordmark ships in two colourways because it is artwork, not text — white ink for the dark theme, black ink for the light one. Both are vector, so they stay sharp at any size and on any screen. CSS shows whichever matches. */ .sitehead .brand{ display:flex;align-items:center;text-decoration:none;border:0;line-height:0; transition:opacity .15s ease; } .sitehead .brand img{display:block;width:168px;height:auto} .sitehead .brand:hover{opacity:.74} .sitehead .brand .for-light{display:none} :root[data-theme="light"] .sitehead .brand .for-dark{display:none} :root[data-theme="light"] .sitehead .brand .for-light{display:block} @media(max-width:520px){.sitehead .brand img{width:132px}} .sitenav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-inline-start:auto} .sitenav a{ font-family:var(--util);font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft); text-decoration:none;border:0;padding:7px 12px;border-radius:2px; transition:color .15s ease,background .15s ease;white-space:nowrap; } .sitenav a:hover{color:var(--ink);background:var(--surface-sunk)} .sitenav a[aria-current="page"]{color:var(--ink);font-weight:600} .sitenav a.shop{ color:var(--ink-faint);margin-inline-start:10px;padding-inline-start:18px; border-inline-start:1px solid var(--rule);border-radius:0; } .sitenav a.shop:hover{color:var(--porphyry);background:none} @media(max-width:520px){ .sitenav a{padding:6px 9px;font-size:12px} .sitenav a.shop{margin-inline-start:4px;padding-inline-start:11px} } /* ---------- front door ---------- */ .front-hero{border-bottom:1px solid var(--rule)} .front-hero-inner{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:86px 72px} .front-hero h1{ font-family:var(--display);font-weight:600;font-size:clamp(2.9rem,8vw,5.4rem); line-height:1;letter-spacing:-.02em;margin:26px 0 0;max-width:13ch;text-wrap:balance; } .front-hero .standfirst{ font-size:clamp(1.08rem,2.3vw,1.34rem);color:var(--ink-soft);margin:28px 0 0; max-width:57ch;line-height:1.56; } .front-cta{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap} .btn{ display:inline-block;font-family:var(--util);font-size:13px;font-weight:600;letter-spacing:.04em; text-decoration:none;border:1px solid var(--porphyry);color:var(--porphyry); padding:13px 24px;border-radius:2px;transition:background .18s ease,color .18s ease; } .btn:hover{background:var(--porphyry);color:var(--ground)} .btn.plain{border-color:var(--rule-strong);color:var(--ink-soft)} .btn.plain:hover{background:var(--surface-sunk);color:var(--ink)} .points{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:70px 0} .points-grid{display:grid;gap:36px;grid-template-columns:1fr} @media(min-width:820px){.points-grid{grid-template-columns:repeat(3,1fr);gap:46px}} .point .num{ font-family:var(--util);font-size:11px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);display:block;margin:0 0 14px; } .point h3{font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.16;margin:0 0 12px} .point p{font-size:1rem;line-height:1.58;color:var(--ink-soft);margin:0} .site-footer{border-top:1px solid var(--rule);margin-top:86px} .site-footer-inner{ max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:34px 44px; display:flex;justify-content:space-between;gap:14px 30px;flex-wrap:wrap; font-family:var(--util);font-size:12px;letter-spacing:.04em;color:var(--ink-faint); } .site-footer-inner a{color:var(--ink-soft);text-decoration:none;border:0} .site-footer-inner a:hover{color:var(--porphyry)} /* ---------- library home page ---------- */ .lib-hero{border-bottom:1px solid var(--rule)} .lib-hero-inner{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:72px 60px} .lib-hero h1{ font-family:var(--display);font-weight:600;font-size:clamp(2.7rem,7vw,4.6rem); line-height:1.03;letter-spacing:-.018em;margin:26px 0 0;text-wrap:balance;max-width:16ch; } .lib-hero .standfirst{ font-size:clamp(1.08rem,2.2vw,1.3rem);color:var(--ink-soft);margin:24px 0 0; max-width:58ch;line-height:1.55; } .lib{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:64px 96px} .lib-label{ font-family:var(--util);font-size:11px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--gold);margin:0 0 26px; display:flex;align-items:center;gap:14px; } .lib-label::after{content:"";flex:1;height:1px;background:var(--gold);opacity:.32} .lib-grid{display:grid;gap:22px;grid-template-columns:1fr} @media(min-width:720px){.lib-grid{grid-template-columns:repeat(2,1fr)}} .lib-card{ display:block;text-decoration:none;border:1px solid var(--rule);border-radius:3px; background:var(--surface);padding:30px 28px 26px;color:inherit; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; } .lib-card:hover{border-color:var(--rule-strong);box-shadow:var(--shadow);transform:translateY(-2px)} .lib-card .kicker{ font-family:var(--util);font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--porphyry);margin:0 0 14px; } .lib-card h3{ font-family:var(--display);font-weight:600;font-size:1.9rem;line-height:1.1; letter-spacing:-.012em;margin:0 0 12px; } .lib-card p{font-size:1rem;line-height:1.52;color:var(--ink-soft);margin:0 0 18px} .lib-card .meta{ font-family:var(--util);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:6px 18px;margin:0; } .lib-card .go{ font-family:var(--util);font-size:12px;font-weight:600;letter-spacing:.06em; color:var(--porphyry);margin:18px 0 0; } .lib-card .go::after{content:" →"} /* a study not written yet — same card, muted, not a link */ .lib-card.soon{background:var(--surface-sunk);border-style:dashed;cursor:default} .lib-card.soon:hover{transform:none;box-shadow:none;border-color:var(--rule)} .lib-card.soon .kicker{color:var(--ink-faint)} .lib-card.soon h3{color:var(--ink-soft)} .lib-note{ max-width:56rem;margin:56px auto 0;padding-top:34px;border-top:1px solid var(--rule); color:var(--ink-soft);font-size:1.02rem;line-height:1.6; } .lib-note h4{ font-family:var(--util);font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px; } .lib-note p{margin:0 0 14px} .lib-note p:last-child{margin-bottom:0} /* ---------- light / dark toggle ---------- Dark is the default and stays the default. This only lets a reader who prefers paper for long reading switch; their choice is remembered in their own browser and applies across the whole site. The homepage is brand-led and deliberately dark-only, so it has no toggle. */ .theme-toggle{ -webkit-appearance:none;appearance:none;background:none;cursor:pointer; border:1px solid var(--rule);border-radius:2px;color:var(--ink-soft); width:32px;height:32px;padding:0;margin-inline-start:10px; display:inline-flex;align-items:center;justify-content:center; transition:color .15s ease,border-color .15s ease; } .theme-toggle:hover{color:var(--ink);border-color:var(--rule-strong)} .theme-toggle svg{width:15px;height:15px;display:block} .theme-toggle .i-moon{display:none} :root[data-theme="light"] .theme-toggle .i-sun{display:none} :root[data-theme="light"] .theme-toggle .i-moon{display:block} /* Hero eyebrow on studies.html and about.html — matches the front door's, so the two design systems open a page the same way. The Greek monogram on a study's masthead keeps .monogram and stays in Cormorant, because Uncial Antiqua has no Greek glyphs and would silently fall back. */ .hero-eyebrow{ font-family:var(--util);font-size:11px;font-weight:400;letter-spacing:.34em; text-transform:uppercase;color:var(--ink-soft);margin:0 0 26px; } /* ---------- unwritten blocks ---------- Anything still carrying placeholder copy is outlined so it cannot be published by accident. Delete the data-todo attribute as you replace each block and the outline goes with it. */ [data-todo]{ outline:1px dashed var(--rule-strong); outline-offset:10px; border-radius:2px; } [data-todo]::before{ content:"To write"; display:block; font-family:var(--util);font-size:9.5px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px; } /* ========================================================================== Optional icon beside a page heading. Opt in with .lib-hero.with-icon — a plain .lib-hero is unchanged, so any page that doesn't want an image keeps the original full-width text block. ========================================================================== */ :root{ --icon-shadow:0 2px 8px rgba(0,0,0,.45), 0 30px 70px -32px rgba(0,0,0,.9); } :root[data-theme="light"]{ --icon-shadow:0 1px 3px rgba(28,26,36,.16), 0 18px 40px -22px rgba(28,26,36,.32); } .lib-hero.with-icon .lib-hero-inner{ display:grid;gap:clamp(30px,4.5vw,56px);grid-template-columns:1fr;align-items:center; } @media(min-width:900px){ .lib-hero.with-icon .lib-hero-inner{ grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(44px,5.5vw,80px); } } .lib-hero .hero-copy{min-width:0} .lib-hero .hero-copy h1{margin-top:0} /* On a phone the icon sets the tone once, above the type, then gets small. */ .lib-hero .hero-figure{margin:0;order:-1;justify-self:start;width:min(168px,46vw)} @media(min-width:900px){ .lib-hero .hero-figure{order:0;justify-self:center;width:100%;max-width:330px} } .lib-hero .hero-figure img{display:block;width:100%;height:auto;box-shadow:var(--icon-shadow)} /* A deckled / torn-edge artwork carries its own edge. A box-shadow on it would draw a rectangle behind a ragged image, so suppress it for those. */ .lib-hero .hero-figure.deckle img{box-shadow:none}