/* Dayspring Native American United Methodist Church Single stylesheet, no build step. ⚠ Class names were greppable to zero before being written. Keep doing that check. ⚠ Anything JS controls follows one rule: the class that HIDES or COLLAPSES content is added by the script, never here. With JS off the page renders complete. Do not invert. */ /* Oswald, self-hosted. 28 KB variable woff2, latin subset, weights 300-600. SIL Open Font License 1.1, full text in fonts/OFL.txt as the licence requires. Self-hosted rather than the Google CDN: no third-party request per visitor. */ @font-face{ font-family:'Oswald'; font-style:normal; font-weight:300 600; font-display:swap; src:url('fonts/oswald-latin-var.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ --paper:#FFFFFF; --paper-2:#F6F4EF; --paper-3:#FAF9F6; --ink:#1E1811; --ink-soft:#574E42; --bark:#6B4A2A; --bark-dk:#4E351C; --leaf:#356B45; --leaf-dk:#244B30; --leaf-bright:#67BF7F; --sky-dk:#1F4A57; --clay:#B5654A; --clay-text:#A55238; /* text-safe clay, 5.16:1 on paper. #B5654A measured 4.02 and failed */ --rule:#E2DACB; --focus:#0B5FA5; --display:Oswald,"Arial Narrow","Avenir Next Condensed","Roboto Condensed",system-ui,sans-serif; --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif; --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.125rem;line-height:1.75} p{margin:0 0 1rem} a{color:var(--leaf-dk)} img{max-width:100%} :focus-visible{outline:3px solid var(--focus);outline-offset:2px} .wrap{width:100%;max-width:70rem;margin:0 auto;padding:0 1.25rem} .measure{max-width:44rem} .display{font-family:var(--display);text-transform:uppercase;font-weight:400;line-height:1.12;letter-spacing:.07em;margin:0} .eyebrow{font-weight:700;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;margin:0 0 .9rem;color:var(--bark)} .lede{font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.55;color:var(--leaf-dk);margin:0 0 1.4rem} /* ---- Skip link ---- */ .skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:100} .skip-link:focus{left:0;color:#fff} /* ---- Placeholder marker. Deliberately visible: nothing carrying one of these should reach the public. This comment avoids writing the marker literally so the counting grep in docs/LAUNCH-CHECKLIST.md only matches real placeholders. ---- */ .tbc{background:#FFF6D6;border-bottom:2px dotted #9A7B00;color:#4A3A00;padding:0 .2em;font-style:italic} /* ---- Header ---- */ .site-head{background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:30} .head-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem 0} .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);min-height:44px} .brand img{width:40px;height:40px} .brand span{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:1.15rem;font-weight:500} .nav{display:flex;flex-wrap:wrap;gap:.1rem;list-style:none;margin:0;padding:0} .nav a{display:block;padding:.7rem .8rem;color:var(--ink-soft);text-decoration:none;font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:.9375rem;font-weight:500;position:relative} .nav a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.45rem;height:2px;background:var(--leaf);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.61,.36,1)} .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)} .nav a:hover,.nav a[aria-current="page"]{color:var(--leaf-dk)} /* Mobile menu button. Hidden until JS adds .js-nav to , so with JS off the button never appears and all four links stay visible. */ .nav-toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;padding:0;background:transparent;border:1px solid var(--rule);color:var(--ink);cursor:pointer} .nav-toggle svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none} .nav-toggle .bar-x{display:none} .nav-toggle[aria-expanded="true"] .bar-open{display:none} .nav-toggle[aria-expanded="true"] .bar-x{display:block} /* ---- Hero ---- */ .hero{position:relative;height:40vh;min-height:15rem;overflow:hidden} .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-fade{position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,rgba(20,14,8,0) 0%,rgba(20,14,8,.30) 100%)} .hero-cap{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;padding-bottom:1.1rem} /* Opaque panel, NOT a veil over the whole photo. 14:1 for white text over a pure white pixel, so it holds for any photograph. Verified against three different images. */ .hero-panel{background:rgba(20,14,8,.88);border-left:4px solid var(--leaf-bright);padding:1rem 1.15rem 1.15rem;max-width:36rem} .hero-panel .eyebrow{color:#9FDCB2;margin-bottom:.5rem} .hero h1{color:#fff;font-size:1.55rem;letter-spacing:.05em} .hero-slim{height:auto;min-height:0} .hero-slim .hero-cap{position:static;height:auto;display:block;padding:2rem 0 2.25rem} .hero-slim .hero-panel{background:none;border-left:0;padding:0;max-width:none} .hero-slim h1{color:var(--ink);font-size:1.9rem} .hero-slim .eyebrow{color:var(--bark)} /* ---- Buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;background:var(--leaf);color:#fff;text-decoration:none;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.875rem;font-weight:500;padding:.9rem 1.6rem;min-height:44px;position:relative;overflow:hidden;transition:color .3s ease,border-color .3s ease} .btn::before{content:"";position:absolute;inset:0;background:var(--leaf-dk);transform:translateY(101%);transition:transform .34s cubic-bezier(.22,.61,.36,1);z-index:0} .btn:hover::before{transform:translateY(0)} .btn>span{position:relative;z-index:1} .btn:hover{color:#fff} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)} .btn-ghost::before{background:var(--ink)} .btn-ghost:hover{color:#fff;border-color:var(--ink)} .btn-on-wash{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.85)} .btn-on-wash::before{background:#fff} .btn-on-wash:hover{color:var(--ink);border-color:#fff} /* ---- Colour-washed photo cards ---- Alpha is high on purpose. Measured against the brightest pixel of each photograph, white body text lands at 5.8:1 or better. A thinner, prettier wash failed. */ .washes{display:grid;grid-template-columns:1fr;gap:0;list-style:none;margin:0;padding:0} .wash{position:relative;overflow:hidden;min-height:19rem;display:flex} .wash img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)} .wash:hover img{transform:scale(1.06)} .wash-tint{position:absolute;inset:0} .wash-1 .wash-tint{background:linear-gradient(150deg,rgba(31,74,87,.90),rgba(31,74,87,.86))} .wash-2 .wash-tint{background:linear-gradient(150deg,rgba(36,75,48,.90),rgba(36,75,48,.86))} .wash-3 .wash-tint{background:linear-gradient(150deg,rgba(78,53,28,.90),rgba(78,53,28,.86))} .wash-in{position:relative;z-index:2;padding:2rem 1.6rem;display:flex;flex-direction:column;align-items:flex-start;color:#fff} .wash-in h2,.wash-in h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:1.0625rem;font-weight:500;margin:0 0 .6rem} .wash-in p{color:rgba(255,255,255,.94);font-size:1rem;margin:0 0 1.4rem;max-width:24rem} .wash-icon{width:40px;height:40px;margin-bottom:1.1rem;stroke:#fff;stroke-width:1.4;fill:none;opacity:.95;transition:transform .4s cubic-bezier(.22,.61,.36,1)} .wash:hover .wash-icon{transform:translateY(-3px)} .wash-in .btn{margin-top:auto} /* ---- Service times ---- */ .times{background:var(--paper-2);border-bottom:1px solid var(--rule);padding:2rem 0} .slots{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;list-style:none;margin:1rem 0 1.2rem;padding:0} .slot{background:var(--paper);border:1px solid var(--rule);border-top:4px solid var(--leaf);padding:.9rem .95rem;transition:transform .3s ease,box-shadow .3s ease} .slot:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(30,24,17,.08)} .slot b{display:block;font-family:var(--display);font-size:1.45rem;letter-spacing:.03em;line-height:1.1} .slot span{display:block;color:var(--ink-soft);font-size:.9375rem;margin-top:.15rem} .times-note{color:var(--ink-soft);font-size:1rem;max-width:40rem;margin-bottom:1.1rem} .addr{font-style:normal;display:block;margin-bottom:1.1rem;line-height:1.55} /* ---- Sections ---- */ .sec{padding:3.25rem 0} .sec-alt{background:var(--paper-3)} .sec-centre{text-align:center} .sec-centre p{margin-left:auto;margin-right:auto} .sec h2{font-size:1.9rem} .sec h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:1.125rem;font-weight:500;margin:0 0 .5em;color:var(--leaf-dk)} .stack>*+*{margin-top:2.5rem} .two-col{display:grid;gap:2rem} .services-card{background:var(--paper-2);border-left:3px solid var(--leaf);padding:1.4rem 1.5rem;align-self:start} .services-card h2,.services-card h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.9375rem;margin:0 0 1rem;color:var(--bark)} .svc{margin-bottom:1.1rem} .svc:last-child{margin-bottom:0} .svc b{display:block;font-family:var(--display);font-size:1.15rem;letter-spacing:.04em} .svc p{margin:.15rem 0 0;font-size:.9875rem;color:var(--ink-soft)} .figure-wide{margin:2.5rem 0 0} .figure-wide img{display:block;width:100%;height:auto} .figure-wide figcaption{font-size:.9375rem;color:var(--ink-soft);padding:.7rem 0 0;font-style:italic;max-width:42rem} /* ---- Photo band with overlay type ---- Scrim at .66 gives 6.24:1 for the heading and 5.05:1 for the sub-line against a pure white pixel. .52 was measured at 3.84 and 3.10 and failed. */ .band{position:relative;overflow:hidden} .band img{display:block;width:100%;height:auto;max-height:24rem;object-fit:cover;transition:transform 9s linear} .band:hover img{transform:scale(1.05)} .band-scrim{position:absolute;inset:0;background:rgba(20,14,8,.66)} .band-cap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem} .band-cap h2{color:#fff;position:relative;z-index:2;font-size:1.8rem} .band-cap .sub{color:#F0E6D6;position:relative;z-index:2;margin:.6rem 0 0;font-size:1.125rem;font-family:var(--serif);font-style:italic} /* ---- Media rows ---- */ .media-row{display:grid;gap:1.75rem;align-items:center} .video-ph{position:relative;background:var(--ink);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden} .video-ph .play{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.22,.61,.36,1)} .video-ph:hover .play{transform:scale(1.1)} .video-ph .play::after{content:"";border-left:21px solid var(--ink);border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px} .video-ph .tag{position:absolute;left:0;right:0;bottom:0;background:rgba(20,14,8,.88);color:#F0E6D6;font-size:.8125rem;padding:.5rem .7rem;text-align:center} /* ---- Event ---- */ .event{background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--clay);padding:1.2rem 1.35rem;max-width:42rem;text-align:left;transition:transform .3s ease,box-shadow .3s ease} .event:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(30,24,17,.09)} .event .when{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.8125rem;color:var(--clay-text);margin:0 0 .4rem} .event p{margin:0} /* ---- Simple rule-topped cards ---- */ .cards{display:grid;gap:1.75rem;list-style:none;margin:2.25rem 0 0;padding:0;text-align:left} .card{border-top:2px solid var(--rule);padding-top:1rem;transition:border-color .3s ease} .card:hover{border-color:var(--leaf)} .card h2,.card h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:1rem;font-weight:500;margin:0 0 .4em;color:var(--leaf-dk)} .card p{margin:0;font-size:1rem;color:var(--ink-soft)} /* ---- Definition list for contact details ---- */ .detail-list{margin:0} .detail-list dt{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.875rem;color:var(--bark);margin-top:1.4rem} .detail-list dt:first-child{margin-top:0} .detail-list dd{margin:.2rem 0 0;font-size:1.0625rem} /* ---- Updates feed ---- ⚠ The FIELDS here are provisional. CLAUDE.md is firm that the content model must come from what the church actually hands out on a Sunday, not from imagination. This is a layout to react to, not a schema. */ .feed{list-style:none;margin:0;padding:0;display:grid;gap:1.75rem} .post{border:1px solid var(--rule);border-top:4px solid var(--leaf);background:var(--paper);padding:1.4rem 1.5rem;transition:transform .3s ease,box-shadow .3s ease} .post:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(30,24,17,.09)} .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;margin:0 0 .7rem} .post-tag{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;padding:.3rem .6rem;background:var(--paper-2);color:var(--bark-dk);border:1px solid var(--rule)} .post-tag-news{background:#EAF1EC;color:var(--leaf-dk);border-color:#CBDFD1} .post-tag-letter{background:#F6EDE8;color:var(--clay-text);border-color:#E8D3C9} .post-date{font-size:.9375rem;color:var(--ink-soft)} .post h2,.post h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:1.25rem;font-weight:500;margin:0 0 .6rem;line-height:1.2} .post p:last-child{margin-bottom:0} .post-media{margin:1rem 0 0} .post-media img{display:block;width:100%;height:auto} /* ---- Sermon notes ---- */ .sermons{list-style:none;margin:0;padding:0} .sermon{border-bottom:1px solid var(--rule);padding:1.5rem 0;display:grid;gap:.75rem;transition:background .25s ease} .sermon:first-child{border-top:1px solid var(--rule)} .sermon-when{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.8125rem;color:var(--bark)} .sermon h2,.sermon h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:1.35rem;font-weight:400;margin:0;line-height:1.2} .sermon-passage{font-family:var(--serif);font-style:italic;color:var(--leaf-dk);margin:0} .sermon-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem} .sermon p{margin:0} /* ---- Forms ---- */ .form{max-width:26rem} .field{margin-bottom:1.35rem} .field label{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.8125rem;color:var(--bark);margin-bottom:.4rem} .field input{ display:block;width:100%; /* 16px minimum: below that, iOS Safari zooms the whole page when the field is focused */ font-size:1rem;font-family:var(--body); padding:.8rem .9rem;min-height:48px; border:1px solid var(--rule);background:var(--paper);color:var(--ink); } .field input:focus{border-color:var(--leaf);outline:3px solid var(--focus);outline-offset:1px} .form-note{font-size:.9375rem;color:var(--ink-soft);max-width:30rem} .alert{padding:.9rem 1.1rem;border-left:4px solid var(--clay);background:#FBF0EB;color:#6B2E19;margin-bottom:1.35rem;font-size:1rem} .alert-ok{border-left-color:var(--leaf);background:#EDF4EF;color:var(--leaf-dk)} .alert[hidden]{display:none} /* ---- Staff allow-list. admin.html only, never a public page ---- ⚠ Every control keeps the 44px minimum tap target the rest of the site holds to. A cramped row of small buttons with "Remove" among them is exactly where an accident happens, and the people using this screen are not all confident with a phone. ⚠ Both role-pill colour pairs are lifted from .post-tag and .post-tag-news rather than invented, so they carry the contrast measurements those were already audited at. */ .field-inline{display:grid;gap:1.35rem} .field select{ display:block;width:100%; font-size:1rem;font-family:var(--body); /* 16px minimum, or iOS Safari zooms on focus */ padding:.8rem .9rem;min-height:48px; border:1px solid var(--rule);background:var(--paper);color:var(--ink); } .field select:focus{border-color:var(--leaf);outline:3px solid var(--focus);outline-offset:1px} .staff-list{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--rule)} .staff-row{display:grid;gap:.55rem;padding:1.15rem 0;border-bottom:1px solid var(--rule)} .staff-who{font-weight:600;word-break:break-word;margin:0 0 .35rem} .role-pill{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;padding:.3rem .6rem;margin-left:.5rem;background:var(--paper-2);color:var(--bark-dk);border:1px solid var(--rule);vertical-align:middle} .role-pill[data-role="admin"]{background:#EAF1EC;color:var(--leaf-dk);border-color:#CBDFD1} .staff-note{margin:0;font-size:.9375rem;color:var(--ink-soft)} .staff-acts{display:flex;flex-wrap:wrap;gap:.5rem} .btn-sm{padding:.55rem 1rem;font-size:.8125rem;letter-spacing:.13em;min-height:44px} .muted{color:var(--ink-soft);font-size:.9375rem} .admin-note{background:var(--paper-2);border-left:3px solid var(--bark);padding:1.1rem 1.25rem;margin:0 0 1.75rem;font-size:1rem} .admin-note p{margin:0 0 .6rem} .admin-note p:last-child{margin:0} .admin-note strong{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:.9375rem;display:block;margin-bottom:.3rem;color:var(--bark-dk)} @media(min-width:45rem){ .field-inline{grid-template-columns:1fr 12rem;gap:1rem 1.25rem;align-items:start} .staff-row{grid-template-columns:1fr auto;align-items:center;gap:1rem} .staff-acts{justify-content:flex-end} } /* ---- Footer ---- ⚠ The footer leads with the Sunday times on purpose. "When do you meet" is the question a church site exists to answer, and the footer is the one block on every page. Somebody who lands deep in the site and scrolls to the bottom gets the answer without another click. ⚠ It is IDENTICAL on every page, including 404, login and admin. It used to be hand-copied per page and had already drifted: two pages had quietly lost their Facebook link. One block everywhere is the fix, so do not start special-casing it again. ⚠ Every colour pair here was measured against its own background, not assumed: #C9BCA6 on --ink 10.6:1 · #9FDCB2 links 12.6:1 · #9C8F7C headings 6.3:1 #DCEFE1 on --leaf-dk 8.4:1 · white on the translucent slot boxes 7.5:1. */ .foot{background:var(--ink);color:#C9BCA6;padding:0 0 1.25rem;font-size:1rem} .foot a{color:#9FDCB2} /* Footer and contact links were 21px tall and as narrow as 30px. Anything a thumb has to hit gets a real box. */ .foot a,.contact-link{display:inline-flex;align-items:center;min-height:44px;padding:0 .35rem;margin:0 -.35rem} /* the invitation band, full bleed so the colour runs edge to edge */ .foot-invite{background:var(--leaf-dk);padding:2rem 0} .foot-invite-in{display:grid;gap:1.25rem;align-items:center} .foot-head{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:1.1rem;color:#fff;margin:0} .foot-invite p{margin:.3rem 0 0;color:#DCEFE1;font-size:.9375rem} /* ⚠ ONE column on a phone, three only when there is room. Three across at 375px gives each slot about 103px, which wraps "Smudging, weather permitting" onto four lines. */ .foot-slots{display:grid;grid-template-columns:1fr;gap:.75rem;list-style:none;margin:0;padding:0} .foot-slots li{background:rgba(255,255,255,.10);padding:.7rem .8rem;border-top:3px solid var(--leaf-bright)} .foot-slots b{display:block;font-family:var(--display);font-size:1.1rem;letter-spacing:.03em;color:#fff;line-height:1.15} .foot-slots span{font-size:.875rem;color:#DCEFE1} .foot-body{padding:2.5rem 0 0} .foot-cols{display:grid;gap:2rem} .foot-name{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem;line-height:1.3;color:#fff;margin:0 0 .6rem} .foot-cols h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.8125rem;color:#9C8F7C;margin:0 0 .5rem;font-weight:500} .foot-cols ul{list-style:none;margin:0;padding:0} .foot-cols li a{display:inline-flex;align-items:center;min-height:44px} .foot-bar{border-top:1px solid rgba(201,188,166,.22);margin-top:2.25rem;padding-top:.35rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1rem;font-size:.875rem;color:#9C8F7C} .foot-bar p{margin:0} .leafrule{height:3px;background:linear-gradient(90deg,var(--leaf) 0%,var(--leaf-bright) 50%,var(--bark) 100%)} /* ---- Reveal on scroll, with stagger ---- */ .reveal-init{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)} .reveal-init.in{opacity:1;transform:none} .stagger>*:nth-child(2).reveal-init{transition-delay:.11s} .stagger>*:nth-child(3).reveal-init{transition-delay:.22s} .stagger>*:nth-child(4).reveal-init{transition-delay:.33s} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} .reveal-init{opacity:1!important;transform:none!important} } /* ---- Phones and tablets ---- ⚠ Breakpoint is 56rem, not the 45rem used for layout. With six nav items the header wrapped onto two rows on tablets, and since it is sticky that cost a permanent slice of every screen. The disclosure menu takes over well before that happens. If this number changes, change the matching one in site.js. */ @media(max-width:55.99rem){ /* Header was 120px because brand and nav wrapped onto separate rows, and being sticky that cost 14.8% of every screen for the whole visit. */ .js-nav .nav-toggle{display:inline-flex} /* The