children inside a
, which no parser accepts: the outer
closes at the first inner one, so the three taglines and a stray empty
from the orphaned close tag escaped into .nav__inner as SIBLINGS. Measured on the live site: six grid children where the CSS below assumes two, laid out as three rows of a two-column grid -- "Telehealth Services..." alone in the 22ch column with "Call or TXT" beside it, the links pushed to a third row, and 106/166/121px rows separated by the 3.5rem block padding each phantom child collected. That is the whole of the awkward spacing. The class is unchanged; only the element it sits on. */ .nav__taglines { margin: 0; font-size: .82rem; line-height: 1.9; color: var(--dim); } .nav__taglines p { margin: 0; max-width: none; } /* THE COLUMN GUTTER WAS 1.6px. `gap: .1rem` set the row AND column gap, so "Workshops & Speaking Engagements" ended at x=1171 and "Board Of Directors" began at x=1173 -- two adjacent links reading as one run of text. Row gap and column gap are now stated separately. 16.5rem, not 22ch: the longest label measures 250px at the rendered font, and a 22ch column resolves to 219px, so it wrapped. The floor is the widest label with room to spare, which is what stops a menu of ten unequal labels from looking ragged. min(100%, ...) keeps it one column when the panel is narrower than a single column. */ .nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); } .nav a { display: block; padding: .55rem 0; text-decoration: none; font-size: 1rem; color: var(--bone); position: relative; } .nav a span { position: relative; } .nav a span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .nav a:hover span::after, .nav a:focus-visible span::after, .nav a[aria-current="page"] span::after { transform: scaleX(1); } .nav a[aria-current="page"] { color: var(--gold); } /* A DATED ONE-OFF EVENT, drawn as a bordered gold panel among plain links. Three constraints shaped this rather than free choice: 1. It must not read as "the page you are on". Plain gold text is already taken by aria-current, and a second meaning for the same colour would make both ambiguous. The border is what separates them. 2. It must not become a second primary action. DESIGN.md records that the Schedule a Session control is the only gold-FILLED thing on the site, so this one is gold on the ground colour and fills only on hover -- the same grammar as .header-cta, one step quieter. 3. No glyph, no emoji, no badge image. The clipped corner is the site's own idiom, drawn, and already used by .header-cta. The underline is switched off: the border does that job, and the two together read as a mistake. */ .nav__event a { display: inline-block; color: var(--gold); border: 1px solid var(--line-gold); padding: .5rem 1.05rem; letter-spacing: .03em; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background .22s var(--ease), color .22s var(--ease); } .nav__event a span::after { content: none; } .nav__event a:hover, .nav__event a:focus-visible { background: var(--gold); color: var(--ground); } /* ------------------------------------------------------------------ hero -- */ .hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(3.5rem, 9vh, 6rem); } .hero__lattice { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .hero__plate { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 74% 60% at 50% 34%, rgba(14, 20, 24, .30) 0%, rgba(14, 20, 24, .80) 56%, var(--ground) 100%); } .hero__body { position: relative; z-index: 2; text-align: center; } /* The medallion: the rosette drawn AROUND the portrait. The geometry frames the person it is in service of, and nothing crosses the headline. */ .hero__medallion { position: relative; width: min(74vmin, 460px); aspect-ratio: 1; margin: 0 auto clamp(2rem, 5vw, 3.2rem); display: grid; place-items: center; } .hero__figure { position: absolute; inset: -22%; pointer-events: none; opacity: .85; } .hero__figure .girih { width: 100%; height: 100%; } .hero__eye { position: relative; width: 76%; aspect-ratio: 1; } .hero__eye::after { content: ""; position: absolute; inset: -8px; clip-path: var(--decagon); background: var(--line-gold); z-index: -1; } .hero__eye img { width: 100%; height: 100%; clip-path: var(--decagon); } /* Without a photograph the figure stands alone, at full size. */ .hero:not(.hero--portrait) .hero__medallion { width: min(64vmin, 400px); } .hero:not(.hero--portrait) .hero__figure { inset: -10%; } .hero__body h1 { color: var(--gold); margin-bottom: .3em; } [data-heading="short"] h1 { font-size: clamp(2.4rem, 6.2vw, 5rem); } [data-heading="long"] h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.18; } .hero__kicker { font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-style: italic; color: var(--bone); margin-bottom: 1.5rem; } .hero__kicker p { margin: 0 auto; max-width: 46ch; } .hero__prose { color: var(--bone); max-width: 60ch; margin-inline: auto; font-size: 1.02rem; } .hero__prose p { max-width: none; margin-inline: auto; } /* The client's copy opens with a bare "Our Mission" line. It is content, not a label, so it reads as the opening of the paragraph rather than an eyebrow. */ .hero__prose p:first-child { color: var(--gold); font-family: var(--display); font-style: italic; font-size: 1.15rem; margin-bottom: .6rem; } .hero__actions { display: flex; gap: 1.6rem; justify-content: center; align-items: center; flex-wrap: wrap; margin: 2.6rem auto 0; max-width: none; } /* --------------------------------------------------------------- opening -- */ .opening { position: relative; padding: var(--band) 0 clamp(2rem, 5vw, 3.5rem); overflow: hidden; } .opening__field, .difference__field, .contact__field, .site-footer__field { position: absolute; inset: 0; pointer-events: none; background-image: var(--girih-tile); background-repeat: repeat; background-size: 190px 190px; -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 42%, #000 0%, transparent 76%); mask-image: radial-gradient(ellipse 74% 74% at 50% 42%, #000 0%, transparent 76%); } .opening__body { position: relative; text-align: center; } .opening__body h1 { color: var(--gold); } .opening__kicker { font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.4rem); margin-bottom: 1.4rem; } .opening__kicker p { margin-inline: auto; } .opening__prose { color: var(--dim); max-width: 64ch; margin-inline: auto; } .opening__prose p { max-width: none; } /* -------------------------------------------------------------- services -- */ /* A constructed list, not a card grid: one continuous ruled column where each service's strap draws across as it arrives. The original's 1..6 numbering is gone — the sequence carried no information. */ .services { padding: var(--band) 0; } /* The client's services photograph, restored as an APERTURE -- the unit this world uses for every photograph. It was dropped silently by the first build; it is the client's content, so it comes back. Above the list, never behind it: no text of ours sits on a picture, and a bright sky spread full-width would break the rule this near-black ground exists to keep. */ .services__eye { width: min(320px, 54%); margin: 0 auto clamp(2.2rem, 5vw, 3.5rem); position: relative; } .services__eye::after { content: ""; position: absolute; inset: -8px; clip-path: var(--decagon); border: 1px solid var(--line-gold); } .services__eye img { width: 100%; height: auto; aspect-ratio: 1 !important; object-fit: cover; clip-path: var(--decagon); } .services__head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); } .services__head h2 { color: var(--bone); } .services__list { border-top: 1px solid var(--line-faint); } .service { position: relative; display: grid; gap: .4rem 1.8rem; grid-template-columns: 66px 112px minmax(0, 22ch) minmax(0, 1fr) auto; align-items: start; padding: clamp(1.8rem, 4vw, 2.8rem) 0; border-bottom: 1px solid var(--line-faint); } /* Each service's figure: struck from the same ten-fold construction as the hero rosette, and drawn with the same gesture — the scaffold first, then the interlace resolving out of it. The light layer is a second copy of the straps; a short dash travelling it is the only thing that can demonstrate the interlace is unbroken rather than assert it. */ .service__figure { width: 66px; margin-top: .35rem; } .tile-figure { width: 100%; height: auto; overflow: visible; } .tile-figure__light { opacity: 0; } .service:hover .tile-figure__strap { stroke: var(--bone); } .tile-figure__strap { transition: stroke .45s var(--ease); } .service__rule { position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--gold) 0%, var(--line-gold) 70%, transparent 100%); transform: scaleX(0); transform-origin: left; } /* The photograph, added 2026-08-28 at the client's request. It sits in the same decagonal aperture as every other photograph on this site -- the unit is a window, never a card -- between the drawn mark and the name, so the row still reads left to right as construction, subject, name, prose. */ .service__eye { width: 112px; aspect-ratio: 1; overflow: hidden; margin-top: .2rem; clip-path: var(--decagon); background: var(--ground-raised); } .service__eye img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .service:hover .service__eye img { transform: scale(1.045); } .service__name { font-size: clamp(1.4rem, 2.6vw, 2.1rem); color: var(--gold); margin: 0; letter-spacing: -.01em; } .service__body { color: var(--dim); font-size: .98rem; } .service__body p { margin: 0; max-width: 62ch; } .service__act { margin: 0; align-self: center; } /* ------------------------------------------------------------ difference -- */ .difference { position: relative; padding: var(--band) 0; background: var(--ground-raised); overflow: hidden; } .difference__inner { position: relative; display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } /* the space belongs to the heading's top margin, not the mark's bottom one: the two look identical and only one of them measures as a heading with something above it */ .difference__mark { margin: 0; } .difference__logo { width: 60px; height: auto; } .difference__head h2 { color: var(--gold); margin-top: 1.4rem; } .difference__head h2:first-child { margin-top: 0; } .difference__kicker { font-family: var(--display); font-style: italic; color: var(--bone); font-size: 1.15rem; } .difference__points ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; } .difference__points li { display: grid; grid-template-columns: 16px 1fr; gap: .9rem; align-items: start; color: var(--bone); font-size: 1rem; } .difference__points li p { margin: 0; max-width: none; } .difference__points .mark { width: 16px; height: 16px; color: var(--gold); margin-top: .45rem; flex: 0 0 auto; } /* ------------------------------------------------------------- apertures -- */ /* The unit is a window, not a card: the photograph sits in a decagonal opening, the same figure the lattice is built from. */ .apertures { padding: var(--band) 0; } .band--grey { background: var(--ground-raised); } .apertures__head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); } .apertures__head h2 { color: var(--gold); } .apertures__head p { margin-inline: auto; color: var(--dim); } .apertures__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .aperture { text-align: center; } .aperture__eye { width: min(220px, 62%); margin: 0 auto 1.4rem; position: relative; } .aperture__eye::after { content: ""; position: absolute; inset: -7px; clip-path: var(--decagon); background: var(--line-gold); z-index: -1; } .aperture__eye img { width: 100%; aspect-ratio: 1; clip-path: var(--decagon); } .aperture__name { color: var(--gold); font-size: 1.25rem; letter-spacing: .01em; margin-top: .3em; } .aperture__kicker { font-family: var(--display); font-style: italic; color: var(--bone); } .aperture__kicker p { margin: 0 auto .6rem; } .aperture__body { color: var(--dim); font-size: .95rem; } .aperture__body p { margin-inline: auto; } .aperture__act { margin: 1.2rem 0 0; } .columns--icon .aperture__eye { width: 56px; } .columns--icon .aperture__eye img { clip-path: none; aspect-ratio: auto; object-fit: contain; } .columns--icon .aperture__eye::after { display: none; } /* ------------------------------------------------------------------ team -- */ .team { padding: var(--band) 0; } .team__head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); } .team__head h2 { color: var(--gold); } .team__kicker { font-family: var(--display); font-style: italic; color: var(--dim); } .team__kicker p { margin-inline: auto; } .team__grid { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .member { text-align: center; } .member__eye { width: min(190px, 78%); margin: 0 auto 1rem; position: relative; } .member__eye::after { content: ""; position: absolute; inset: -6px; clip-path: var(--decagon); background: var(--line-faint); z-index: -1; } .member__eye img { width: 100%; aspect-ratio: 1; clip-path: var(--decagon); } .member__name { margin: 0; font-family: var(--display); font-size: 1.1rem; color: var(--bone); } .member__role { margin: .1rem 0 0; font-size: .82rem; color: var(--dim); letter-spacing: .04em; } /* ----------------------------------------------------------------- split -- */ .split { padding: var(--band) 0; } .split__inner { display: grid; gap: clamp(2rem, 6vw, 4.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .split__eye { position: relative; } .split__eye img { width: 100%; } .split__eye::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--line-gold); transform: translate(14px, 14px); } .split__body h2 { color: var(--gold); font-size: clamp(1.5rem, 2.6vw, 2.1rem); } .split__kicker { font-family: var(--display); font-style: italic; color: var(--bone); margin-bottom: 1rem; } .split__body ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .7rem; } .split__body li { color: var(--dim); position: relative; padding-left: 1.4rem; } .split__body li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); } .split__act { margin: 0; } /* --------------------------------------------------------------- contact -- */ .contact { position: relative; padding: var(--band) 0; background: var(--ground-raised); overflow: hidden; } .contact__inner { position: relative; display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } .contact__lede h1, .contact__lede h2 { color: var(--gold); } .contact__lede p { color: var(--dim); } /* the contact lede's email and phone are standalone links, not links inside a sentence, so they carry a real touch target */ .contact__lede a { color: var(--gold); display: inline-flex; align-items: center; min-height: 44px; } .contact__eye { grid-column: 1 / -1; } .contact__eye img { width: 100%; max-height: 460px; } .field { margin-bottom: 1.6rem; } .field label { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .5rem; } .field .req { text-transform: none; letter-spacing: .04em; color: var(--gold); font-size: .72rem; margin-left: .4rem; } .field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--bone); font: inherit; font-size: 1rem; padding: .6rem 0; transition: border-color .22s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: rgba(148, 166, 174, .75); } .field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); } .field input:focus-visible, .field textarea:focus-visible { outline: none; } .field textarea { resize: vertical; min-height: 7rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1rem, 3vw, 2rem); } /* The honeypot ships in the same file as its markup on purpose: styling that never arrives renders a visible "Website" field that real people fill in, and every one of those enquiries is then silently discarded. */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .contact__submit { margin: 2rem 0 .5rem; } .form-note { font-size: .95rem; min-height: 1.6rem; margin: 0; color: var(--dim); } .form-note--error { color: #FFB4A8; } .form-note--ok { color: var(--gold); } /* ----------------------------------------------------------------- modal -- */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.25rem; } .modal__backdrop { position: absolute; inset: 0; background: rgba(6, 10, 12, .82); backdrop-filter: blur(6px); } .modal__panel { position: relative; background: var(--ground-lift); max-width: 460px; width: 100%; max-height: 92svh; overflow-y: auto; text-align: center; border: 1px solid var(--line-gold); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .75); } .modal__eye img { width: 100%; } .modal__body { padding: 1.6rem 1.8rem 2.2rem; } .modal__body h1 { color: var(--gold); font-size: clamp(1.5rem, 4vw, 2.1rem); } .modal__kicker { font-family: var(--display); font-style: italic; margin-bottom: .8rem; } .modal__body p { color: var(--dim); font-size: .95rem; margin-inline: auto; } .modal__close { position: absolute; top: .5rem; right: .5rem; z-index: 1; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: rgba(14, 20, 24, .78); border: 1px solid var(--line); color: var(--bone); cursor: pointer; transition: background .22s var(--ease); } .modal__close:hover { background: var(--gold); color: var(--ground); } .modal__close svg { width: 18px; height: 18px; } body.modal-open { overflow: hidden; } /* --------------------------------------------------------------- journal -- */ .journal { padding: var(--band) 0; } .journal__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); } .journal__head h1 { color: var(--gold); } .journal__list { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); } .entry__link { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); text-decoration: none; color: inherit; border: 1px solid var(--line-faint); transition: border-color .3s var(--ease); } .entry__link:hover, .entry__link:focus-visible { border-color: var(--line-gold); } .entry__eye { display: block; overflow: hidden; } .entry__eye img { width: 100%; height: 100%; transition: transform .8s var(--ease); } .entry__link:hover .entry__eye img { transform: scale(1.03); } .entry__body { display: block; padding: clamp(1.5rem, 3vw, 2.2rem); } .entry__meta { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: .9rem; } .entry__title { font-size: clamp(1.3rem, 2.4vw, 1.85rem); color: var(--bone); margin-bottom: .5rem; } .entry__link:hover .entry__title { color: var(--gold); } .entry__excerpt { display: block; color: var(--dim); font-size: .95rem; } .entry__more { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; color: var(--gold); font-size: .9rem; letter-spacing: .04em; } .entry__more .arrow { width: 20px; transition: transform .3s var(--ease); } .entry__link:hover .entry__more .arrow { transform: translateX(4px); } /* --------------------------------------------------------------- article -- */ .article { padding: var(--band) 0; } .article__back { margin-bottom: 2rem; } .post { max-width: 68ch; margin-inline: auto; } .post h1 { color: var(--gold); font-size: clamp(1.9rem, 4vw, 3rem); } /* The author's avatar, in the same decagonal aperture every other photograph on this site sits in. V2 dropped it on the blog index and all three posts. */ .entry__byline, .post__byline { display: flex; align-items: center; gap: .7rem; } .byline__eye { flex: none; width: 30px; height: 30px; position: relative; display: block; } .byline__eye img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; clip-path: var(--decagon); } .post__byline { margin-bottom: 2.4rem; } .post__byline .post__meta { margin-bottom: 0; } .post__meta { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 2.4rem; } .post p, .post li { font-size: 1.06rem; line-height: 1.85; color: var(--bone); } .post p { margin-bottom: 1.5em; max-width: none; } .post ul { padding-left: 1.2rem; } .post img { margin: 2.6rem 0; width: 100%; } .post a { color: var(--gold); } .recent { max-width: 68ch; margin: clamp(3rem, 7vw, 5rem) auto 0; border-top: 1px solid var(--line-faint); padding-top: 1.8rem; } .recent__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .recent__head h2 { font-size: 1.15rem; margin: 0; color: var(--bone); } .recent__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.4rem; } .recent-card a { text-decoration: none; display: block; color: inherit; } .recent-card img { width: 100%; aspect-ratio: 3/2; margin-bottom: .7rem; } .recent-card__title { font-family: var(--display); font-size: 1rem; line-height: 1.3; display: block; } .recent-card a:hover .recent-card__title { color: var(--gold); } /* ---------------------------------------------------------------- footer -- */ .site-footer { position: relative; margin-top: auto; padding: var(--band) 0 2rem; border-top: 1px solid var(--line-faint); overflow: hidden; } .site-footer__inner { position: relative; display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .site-footer__logo { width: 108px; margin-bottom: 1.2rem; } .site-footer__name { font-family: var(--display); font-size: 1.5rem; margin: 0 0 .6rem; } .site-footer__id p { margin: 0; color: var(--dim); font-size: .95rem; } .site-footer__reach p { margin: 0 0 .25rem; } /* measured at 24px tall before the padding: too small to hit on a phone, and these two links are how someone in distress actually reaches a human */ /* :not(.btn) matters. Without it this rule beat .btn on specificity and painted the footer's Schedule a Session gold-on-gold at 1.2:1 -- the same failure as a black label on a black button, and just as invisible. */ .site-footer__reach a:not(.btn) { color: var(--gold); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: .25rem 0; } .site-footer__reach a:not(.btn):hover { text-decoration: underline; } .site-footer__cta { margin-top: 1.6rem; } .site-footer__cta .btn { min-height: 48px; } .site-footer__legal { position: relative; text-align: center; margin: 3rem 0 0; font-size: .78rem; letter-spacing: .1em; color: var(--dim); } /* ------------------------------------------------------------- reveal in -- */ /* Default is VISIBLE. A failed script must never hide the page. */ [data-reveal] { opacity: 1; } .js [data-reveal] { opacity: 0; transform: translateY(18px); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* ------------------------------------------------------------ responsive -- */ @media (max-width: 1000px) { .difference__inner, .contact__inner, .split__inner { grid-template-columns: 1fr; } .entry__link { grid-template-columns: 1fr; } .entry__eye img { max-height: 260px; } .service { grid-template-columns: 64px 104px minmax(0, 1fr); } .service__figure { width: 64px; grid-column: 1; grid-row: 1 / -1; } .service__eye { width: 104px; grid-column: 2; grid-row: 1 / -1; align-self: start; } .service__name, .service__body, .service__act { grid-column: 3; } .service__act { margin-top: .6rem; } } /* The taglines stop being a sidebar here. The 22ch column is a fixed cost that does not shrink, so below roughly 900px it leaves the links too little room to hold more than one column -- ten links stacked in a single file, which is the "disorganised" complaint in its other form. Stacking the taglines above the links hands the whole width back and the links keep two or three columns down to phone size. */ @media (max-width: 900px) { .nav__inner { grid-template-columns: 1fr; } /* Stacked, the two children are separate rows, so giving both the full block padding would put 5rem between them where the wrapper gave 1.5rem. The padding goes on the outer edges only, which is exactly what the wrapper used to draw. */ .nav__inner > * { padding-block: 0; } .nav__inner > :first-child { padding-top: 1.5rem; } .nav__inner > :last-child { padding-bottom: 2rem; } } @media (max-width: 720px) { /* Every one of these three is placed EXPLICITLY. Left to auto-placement the toggle's `grid-column: 1 / -1` claims a whole row, and because it comes before the button in the DOM the button is pushed past it onto a third row -- measured `58.875px 41.0156px 43.3906px`, a 182px header bar on a 375px phone, with the logo, MENU and Schedule a Session each on their own line. Naming the rows puts the button back beside the logo where it was meant to be: 132px, and 50px of the first viewport handed back to the page. */ .site-header__bar { grid-template-columns: auto 1fr; row-gap: .4rem; } .brandmark { grid-row: 1; grid-column: 1; } .header-cta { grid-row: 1; grid-column: 2; justify-self: end; } .nav-toggle { grid-row: 2; grid-column: 1 / -1; justify-self: start; } /* One column. The mark and the photograph share the first line so a service still opens with something to look at without pushing the name a whole picture's height down the screen. */ .service { grid-template-columns: auto minmax(0, 1fr); gap: .5rem .9rem; } .service__figure { width: 56px; grid-column: 1; grid-row: 1; margin-bottom: .3rem; align-self: center; } .service__eye { width: 88px; grid-column: 2; grid-row: 1; justify-self: start; margin-top: 0; margin-bottom: .3rem; } .service__name, .service__body, .service__act { grid-column: 1 / -1; } .field-row { grid-template-columns: 1fr; } .split__eye::after { transform: translate(8px, 8px); } .recent__grid { grid-template-columns: 1fr; } .site-footer__inner { grid-template-columns: 1fr; } .hero { min-height: auto; padding-top: clamp(3rem, 10vh, 5rem); } /* The rosette is drawn as an overhang: at inset -22% it is 44% wider than the medallion it frames, which is 416px against a 390px phone. `.hero` clips the overflow, so the figure's outermost star tips were being cut off on every page carrying a medallion. Tightening the overhang keeps the whole figure on screen and leaves the medallion -- and so the photograph inside it -- exactly the size it was. */ .hero__figure, .hero:not(.hero--portrait) .hero__figure { inset: -8%; } body { font-size: 16px; } } /* --------------------------------------------------------- reduced motion -- */ /* Not a downgrade: the same page, arriving instantly. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } .hero__lattice { display: none; } }