/* A Little Hill Farm — site styles, shared by the farm site and the store (store/public/assets/site.css is a copy — keep them identical). The header and footer are the only "chrome"; add ?embed=1 to any URL to hide them (see site.js). */ /* Fonts are linked from each page's (preconnect + stylesheet) rather than @import-ed here, which would make the browser fetch this file before it even learns the fonts exist. */ :root { --paper:#F3EEE4; --card:#FBF8F2; --ink:#1E1B16; --body:#4A443A; --muted:#6B6353; --line:#E3DCCE; --line-soft:#EAE3D6; --moss:#59803D; --rust:#C6282F; /* Brand colours (2026-09): green #59803D, red #C6282F. The green is for fills and large type; small green text uses --moss-ink, a darker shade of it that stays readable (WCAG AA 4.5:1) on the cream background. Text on a green fill is pure white for the same reason. */ --moss-ink:#4F7336; --on-moss:#fff; --gold:#9C7B2E; --dark:#2A2A24; --serif:'Newsreader',Georgia,serif; --sans:'Hanken Grotesk',system-ui,sans-serif; --wrap:1180px; } *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; } img { max-width:100%; display:block; } /* The hidden attribute must win over any display rule (e.g. .store-grid). */ [hidden] { display:none !important; } /* In-page links (#contact, #kit) land below the sticky header, not under it. */ [id] { scroll-margin-top:110px; } h1,h2,h3,h4,p,figure,dl,dd,ul { margin:0; } ul { padding:0; list-style:none; } a { color:var(--moss-ink); } a:hover { color:var(--rust); } /* Focus rings are green: red reads as "something is wrong" on a form. */ :focus-visible { outline:2px solid var(--moss); outline-offset:3px; } .wrap { max-width:var(--wrap); margin:0 auto; padding:0 28px; } .serif { font-family:var(--serif); font-weight:400; letter-spacing:-0.02em; } .eyebrow { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--rust); } .label { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); } .slot { color:var(--muted); border-bottom:1px dashed #C9BFA9; } .lede { font-size:17px; line-height:1.65; color:var(--body); text-wrap:pretty; } .skip { position:absolute; left:-9999px; } .skip:focus { left:16px; top:16px; z-index:99; background:var(--ink); color:var(--paper); padding:10px 16px; } /* ---------- chrome ---------- */ .site-header { position:sticky; top:0; z-index:30; background:rgba(243,238,228,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .site-header .bar { display:flex; align-items:center; gap:28px; padding:12px 28px; max-width:var(--wrap); margin:0 auto; flex-wrap:wrap; } .brand { display:flex; align-items:center; gap:13px; margin-right:auto; text-decoration:none; color:inherit; } .brand img { height:46px; width:auto; } .brand .name { font-family:var(--serif); font-size:20px; line-height:1.1; } .brand .sub { font-size:9.5px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .site-nav { display:flex; gap:4px; flex-wrap:wrap; } .site-nav a { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding:9px 14px; border-radius:2px; border:1px solid transparent; } .site-nav a:hover { color:var(--ink); border-color:var(--line); } .site-nav a[aria-current="page"] { background:var(--moss); border-color:var(--moss); color:var(--on-moss); } .site-footer { background:var(--dark); color:#D5CEBE; margin-top:96px; } .site-footer .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px; padding:56px 28px 44px; max-width:var(--wrap); margin:0 auto; } .site-footer h4 { font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:#9A9182; margin-bottom:16px; } .site-footer a { color:#D5CEBE; text-decoration:none; font-size:14px; } .site-footer a:hover { color:#E0B968; } .site-footer li { padding:4px 0; } .site-footer .mark { font-family:var(--serif); font-size:22px; color:var(--paper); margin-bottom:10px; } .site-footer .fine { border-top:1px solid #45423A; padding:18px 28px 32px; max-width:var(--wrap); margin:0 auto; font-size:12px; color:#9A9182; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; } /* ---------- shared pieces ---------- */ .page-head { padding:64px 0 48px; max-width:62ch; } .page-head h1 { font-size:clamp(40px,5vw,62px); line-height:1.05; margin:18px 0 20px; } .rule-head { display:flex; align-items:baseline; gap:16px; margin-bottom:28px; } .rule-head h2 { font-size:34px; } .rule-head .rule { flex:1; height:1px; background:var(--line); } .rule-head a { font-size:12px; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none; color:var(--rust); } .badge { display:inline-block; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; background:var(--gold); color:#fff; padding:5px 10px; border-radius:2px; } .badge.rust { background:var(--rust); } .btn { display:inline-block; font-family:inherit; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; background:var(--moss); color:var(--on-moss); border:none; padding:12px 22px; border-radius:2px; cursor:pointer; text-decoration:none; } .btn:hover { background:var(--ink); color:var(--card); } .btn.ghost { background:none; color:var(--moss-ink); border:1px solid #C9BFA9; } .btn.ghost:hover { background:var(--moss); color:var(--on-moss); } .link-u { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid #C9BFA9; padding-bottom:2px; } /* Fixed counts rather than auto-fit. auto-fit packs in whatever fits, which on the way down gives an awkward 3 + 1 orphan; stepping 4 -> 2 -> 1 keeps it a tidy block at every width, and 2x2 reads better than three-and-a-stray. */ .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } @media (max-width:820px) { .stats { grid-template-columns:repeat(2,1fr); } } @media (max-width:430px) { .stats { grid-template-columns:1fr; } } /* Baseline-aligned on one line rather than stacked. Keeps all four figures legible while giving back roughly half the vertical space, which is what lets the does appear without scrolling. */ /* Always stacked. The previous version put the label beside the number and let it wrap, which meant every cell decided for itself: at 560px three sat inline and "Kiddings due 2026" dropped below, and the whole thing flipped between inline and stacked several times on the way down. Stacking is predictable at every width - and tighter than the inline version ever was, because nothing has to reserve room for a label that might wrap. */ .stats > div { background:var(--paper); padding:14px 20px; } .stats .n { font-family:var(--serif); font-size:28px; line-height:1; color:var(--moss); } .stats .l { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; } /* ---------- herd grid ---------- */ /* Flex rather than grid, specifically so a partial last row centres. With grid auto-fill the fifth doe hangs off the left edge; with wrapped flex and justify-content:center she sits in the middle - and so will the seventh. max-width stops a lone card in its own row from stretching the full width; below 640px it is lifted so cards fill a phone screen as before. */ .herd { display:flex; flex-wrap:wrap; justify-content:center; gap:26px 20px; align-items:flex-start; } .herd > a { flex:1 1 200px; max-width:250px; } @media (max-width:640px) { .herd > a { max-width:none; } } .herd a { text-decoration:none; color:inherit; display:block; } .herd .shot { background:var(--line-soft); overflow:hidden; margin-bottom:12px; } .herd a:hover .shot img { transform:scale(1.03); } .herd .shot img { transition:transform .5s ease; } .herd .nm { font-family:var(--serif); font-size:22px; line-height:1.15; } .herd .sub { font-size:12px; color:var(--muted); margin-top:4px; } /* ---------- doe / buck index rows ---------- */ .roster { display:flex; flex-direction:column; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .roster article { background:var(--card); display:grid; grid-template-columns:minmax(200px,300px) minmax(0,1fr); } .roster .shot { background:var(--line-soft); display:flex; align-items:center; justify-content:center; min-height:230px; overflow:hidden; } .roster .shot img { width:100%; height:auto; max-height:100%; object-fit:contain; } .roster .body { padding:32px 36px; display:flex; flex-direction:column; gap:18px; min-width:0; } .roster h2 { font-size:32px; line-height:1.1; } .roster .reg { font-size:13px; color:var(--muted); margin-top:6px; } .roster .actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:auto; padding-top:4px; } .facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px 28px; } .facts .v { font-size:14px; line-height:1.4; margin-top:5px; } /* ---------- goat profile ---------- */ .goat-hero { background:var(--dark); color:var(--paper); } .goat-hero .inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:var(--wrap); margin:0 auto; padding:0 28px; } .goat-hero .txt { padding:72px 48px 72px 0; display:flex; flex-direction:column; justify-content:center; } .goat-hero h1 { font-size:clamp(48px,6vw,80px); line-height:1; letter-spacing:-0.03em; margin:0 0 16px; } .goat-hero .reg { font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.4; color:#C9C0A9; } .goat-hero .kind { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:#A8A08C; margin-bottom:14px; } .goat-hero .blurb { font-size:16px; line-height:1.7; color:#D5CEBE; max-width:44ch; margin-top:26px; } .goat-hero .shot { background:#222220; display:flex; align-items:center; justify-content:center; min-height:360px; overflow:hidden; } .goat-hero .shot img { width:100%; height:auto; max-height:100%; object-fit:contain; } .goat-hero .shot.empty { flex-direction:column; gap:10px; color:#C9C0A9; font-family:var(--serif); font-size:26px; padding:56px 24px; } .goat-hero .shot.empty .label { color:#A8A08C; } .fact-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line); border-bottom:1px solid var(--line); } .fact-strip div { background:var(--paper); padding:26px 22px; } .fact-strip .label { min-height:26px; } .fact-strip .v { font-size:16px; line-height:1.35; margin-top:8px; } .section { padding:64px 0 0; } .section > h2 { font-size:30px; margin-bottom:24px; } .split { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:56px; } .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; align-items:start; } .gallery figcaption { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-top:7px; } .gallery .shot { background:var(--line-soft); overflow:hidden; } .elite { background:var(--dark); color:var(--paper); padding:28px 30px; } .elite .top { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid #4A473C; padding-bottom:16px; margin-bottom:18px; } .elite .top .t { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#D9B75A; } .elite .top .y { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#A8A08C; } .elite .pct { font-family:var(--serif); font-size:64px; line-height:.9; letter-spacing:-0.03em; } .elite .pct span { font-size:32px; } .elite .row { display:flex; align-items:baseline; gap:14px; margin-bottom:20px; } .elite .row p { font-size:13px; line-height:1.5; color:#C9C0A9; } .elite dl { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 20px; border-top:1px solid #4A473C; padding-top:18px; } .elite dt { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#9A9182; margin-bottom:5px; } .elite dd { font-size:15px; } .elite dd.slot { color:#9A9182; border-bottom:1px dashed #5A5648; padding-bottom:3px; } .panel { background:var(--card); border:1px solid var(--line); padding:24px 26px; } .panel.dashed { border:1px dashed #C9BFA9; } .panel h3 { font-family:var(--serif); font-weight:400; font-size:22px; margin-bottom:12px; } .panel p { font-size:13.5px; line-height:1.7; color:var(--muted); } .ped { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .ped .col { display:grid; gap:10px; } .ped .c1 { grid-template-rows:repeat(2,1fr); } .ped .c2 { grid-template-rows:repeat(4,1fr); } .ped .c3 { grid-template-rows:repeat(8,1fr); } .ped .cell { background:var(--card); border:1px solid var(--line); padding:16px 18px; display:flex; flex-direction:column; justify-content:center; } .ped .c1 .cell .n { font-family:var(--serif); font-size:19px; line-height:1.3; } .ped .c2 .cell .n { font-size:14px; line-height:1.35; } .ped .c3 .cell { background:#F7F3EA; border-color:var(--line-soft); padding:10px 16px; } .ped .c3 .cell .n { font-size:12.5px; line-height:1.3; color:#5A5348; } .ped .cell .label { font-size:9px; margin-bottom:5px; } .ped .cell.empty .n { color:var(--muted); } .parents { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); } .parents > div { background:var(--card); padding:32px 34px; } .parents .who { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--rust); margin-bottom:16px; } .parents .grid { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:24px; align-items:start; } .parents h3 { font-family:var(--serif); font-weight:400; font-size:23px; line-height:1.2; margin-bottom:14px; } .parents .lines { font-size:13.5px; line-height:1.85; color:#5A5348; } .parents .pc { font-size:10px; color:var(--muted); margin-top:6px; } .parents .stack { display:flex; flex-direction:column; gap:8px; } .notes { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; } .pager { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:64px; padding-top:24px; } .pager a { text-decoration:none; color:inherit; max-width:46%; } .pager .d { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } .pager .n { font-family:var(--serif); font-size:22px; } .pager .next { text-align:right; margin-left:auto; } /* ---------- breeding schedule ---------- */ .sched { display:flex; flex-direction:column; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .sched article { background:var(--card); display:grid; grid-template-columns:130px minmax(0,1fr) 150px; align-items:center; } .sched .date { padding:26px 24px; border-right:1px solid var(--line); align-self:stretch; display:flex; flex-direction:column; justify-content:center; } .sched .date .d { font-family:var(--serif); font-size:34px; line-height:1; color:var(--moss); } .sched .date .m { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-top:6px; } .sched .pair { padding:24px 30px; display:flex; align-items:center; gap:22px; min-width:0; } .sched .pair .av { width:78px; height:78px; flex:none; border-radius:50%; overflow:hidden; background:var(--line-soft); } .sched .pair .av img { width:100%; height:100%; object-fit:cover; } .sched .pair .nm { font-family:var(--serif); font-size:23px; line-height:1.2; } .sched .pair .to { font-size:14px; color:var(--muted); margin-top:7px; } .sched .pair .to strong { color:var(--ink); font-weight:500; } .sched .chip { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; background:var(--line-soft); color:var(--muted); padding:3px 8px; border-radius:2px; } .sched .go { padding:24px; text-align:right; } /* ---------- hero ---------- */ .hero { padding:32px 0 24px; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,0.66fr); gap:40px; align-items:center; } /* Sized so "Five does, two bucks," holds one line at the widest layout, with headroom for "Seven does, three bucks," as the herd grows. text-wrap:balance is deliberately off - it would even out the two lines and undo the break. */ /* Sized so "Five does, two bucks," holds one line at the widest layout, with headroom past "Twelve does, five bucks," as the herd grows. No nowrap: if it ever did outgrow the column it should wrap, not push the page sideways. And no text-wrap:balance either - balance evened out the two halves and undid the deliberate break before "one little hill." */ .hero h1 { font-size:clamp(38px,4.6vw,60px); line-height:1.06; letter-spacing:-0.022em; margin:0 0 20px; } .hero em { color:var(--moss); } /* The mark is already a circle with transparent corners, so it needs no frame - just room to breathe and a ceiling so it never outgrows the headline it is paired with. */ /* The logo's grid column is narrower than half the hero (the text column gets extra width so the headline holds two lines), so centering within the column alone lands the mark near the right edge rather than centered on the page's right half. Shift left by ~31% of the column's own width to land its center at the midpoint of that conceptual right half instead. */ .hero-mark { display:flex; justify-content:center; transform:translateX(-31%); } .hero-mark img { width:100%; max-width:290px; height:auto; display:block; } /* ---------- embed mode (Shopify iframe) ---------- */ body.embed [data-chrome] { display:none !important; } body.embed .site-footer { margin-top:0; } /* ---------- responsive ---------- */ @media (max-width:900px) { .split { grid-template-columns:minmax(0,1fr); gap:40px; } .hero { grid-template-columns:minmax(0,1fr); gap:36px; padding:48px 0 40px; } .hero-mark { transform:none; } .goat-hero .inner { grid-template-columns:minmax(0,1fr); } .goat-hero .txt { padding:48px 0 40px; } .goat-hero .shot { min-height:0; margin-bottom:0; } .ped { grid-template-columns:minmax(0,1fr); } .ped .col { grid-template-rows:none !important; } .parents .grid { grid-template-columns:minmax(0,1fr); } .parents .stack { flex-direction:row; max-width:320px; } .roster article { grid-template-columns:minmax(0,1fr); } .roster .shot { min-height:0; } .roster .body { padding:26px 24px; } .sched article { grid-template-columns:96px minmax(0,1fr); } .sched .go { grid-column:1 / -1; text-align:left; padding:0 24px 22px; } } @media (max-width:560px) { .wrap { padding:0 18px; } .site-header .bar { padding:12px 18px; gap:14px; } .brand .sub { display:none; } /* Seven menu items would wrap to three rows of sticky header. Keep one row and let it scroll sideways instead, with a fade hinting there is more. */ .site-nav { flex-wrap:nowrap; overflow-x:auto; width:100%; margin:0 -18px; padding:0 18px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); } .site-nav::-webkit-scrollbar { display:none; } .site-nav a { flex:none; padding:8px 11px; } .rule-head { flex-wrap:wrap; } .rule-head .rule { display:none; } .elite dl { grid-template-columns:1fr; } .sched .pair { padding:20px; gap:16px; flex-wrap:wrap; } } /* Goat photos on the roster pages link through to the full profile. The anchor is purely a wrapper — it must not add underline or spacing. */ .shot-link { display:block; text-decoration:none; color:inherit; } .shot-link:focus-visible { outline:2px solid var(--moss); outline-offset:3px; } /* ---------- about, guide, contact, policies ---------- */ .story { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:56px; align-items:start; margin-bottom:72px; } .story .prose p { font-size:18px; line-height:1.75; color:var(--body); margin-bottom:20px; text-wrap:pretty; } .story .prose p:first-child::first-letter { font-family:var(--serif); font-size:64px; line-height:0.9; float:left; padding:6px 10px 0 0; color:var(--moss); } .story figure img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; } .story figcaption { font-size:12px; color:var(--muted); margin-top:10px; } .pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:80px; } .pillars > div { background:var(--card); padding:28px 26px; } .pillars .n { font-family:var(--serif); font-size:26px; line-height:1.15; color:var(--moss); } .pillars p { font-size:14px; color:var(--muted); margin-top:8px; line-height:1.6; } .contact { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); } .contact > div { background:var(--card); padding:26px 24px; } .contact .v { font-family:var(--serif); font-size:22px; line-height:1.3; margin-top:10px; overflow-wrap:anywhere; } .contact .v a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); } .contact .v a:hover { color:var(--rust); border-color:var(--rust); } .contact p { font-size:14px; color:var(--muted); margin-top:8px; line-height:1.6; } .ten { list-style:none; padding:0; margin-top:0; counter-reset:ten; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:88px; } .ten li { counter-increment:ten; background:var(--card); padding:28px 28px 30px 92px; position:relative; } .ten li::before { content:counter(ten); position:absolute; left:26px; top:18px; font-family:var(--serif); font-size:46px; line-height:1; color:var(--moss); opacity:.85; } .ten h3 { font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.25; letter-spacing:-0.01em; margin-bottom:10px; } .ten p { font-size:15px; line-height:1.7; color:var(--body); } .kit { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } .kit section { background:var(--card); border:1px solid var(--line); padding:28px; } .kit h3 { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--rust); font-weight:500; margin-bottom:18px; } .kit dl { margin:0; } .kit dl > div { padding:12px 0; border-top:1px solid var(--line-soft); } .kit dl > div:first-child { border-top:none; padding-top:0; } .kit dt { font-family:var(--serif); font-size:19px; color:var(--ink); } .kit dd { margin:4px 0 0; font-size:14.5px; line-height:1.65; color:var(--body); } .aside-note { font-size:13px; color:var(--muted); margin-top:22px; line-height:1.6; } .cta { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:var(--dark); color:#D5CEBE; padding:36px 40px; margin-top:88px; } .cta h2 { font-size:30px; color:var(--paper); } .cta p { font-size:15px; margin-top:6px; } .cta .btns { display:flex; gap:10px; flex-wrap:wrap; } .cta .btn.ghost { color:var(--paper); border-color:#6B6353; } .policy { max-width:70ch; } .policy section { padding:34px 0; border-top:1px solid var(--line); } .policy h2 { font-size:30px; margin-bottom:14px; } .policy p, .policy li { font-size:16px; line-height:1.75; color:var(--body); } .policy p + p { margin-top:12px; } .policy ul { list-style:disc; padding-left:22px; margin-top:10px; } .policy li { padding:3px 0; } .toc { display:flex; flex-wrap:wrap; gap:8px; margin:-12px 0 36px; } .toc a { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; color:var(--muted); border:1px solid var(--line); padding:8px 12px; border-radius:2px; } .toc a:hover { color:var(--ink); border-color:#C9BFA9; } @media (max-width:900px) { .story { grid-template-columns:minmax(0,1fr); gap:36px; } .story figure img { aspect-ratio:3/2; } .ten, .kit { grid-template-columns:minmax(0,1fr); } } @media (max-width:560px) { .pillars { grid-template-columns:1fr; } .ten li { padding:24px 20px 26px 72px; } .ten li::before { left:20px; font-size:38px; } .kit section { padding:22px 20px; } .cta { padding:28px 22px; } } /* ---------- tap-to-enlarge photos (gallery, parents) ---------- */ a.zoom { display:block; cursor:zoom-in; } .lightbox { position:fixed; inset:0; z-index:100; background:rgba(20,19,16,.92); display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; } .lightbox img { max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 10px 40px rgba(0,0,0,.5); } .lightbox .close { position:absolute; top:14px; right:18px; background:none; border:none; color:#F3EEE4; font-size:34px; line-height:1; cursor:pointer; padding:6px 10px; } .lightbox figcaption { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#D5CEBE; font-size:13px; letter-spacing:.06em; }