/* ============================================================ Aldridge Aesthetics — med spa demo template Identity: "Plate". See aldridge-brand.md. Tenth and last in the set, and the only one that is not a trade. Everything before it is text-led with photography as support. This one is the reverse: the media IS the design, the graphics recede, and the page is a sequence of plates. collision cool gray / torch red / Anton / 1 page mechanical green-white/ teal+yellow / Saira / 1 page vet oatmeal / burgundy+sage / Gabarito / 6 pages remodel graphite / brass / Archivo / 9 pages tree stone+loden/ marking orange / Aleo slab / 6 pages pest indigo / scarlet / Petrona / 8 pages electric white / volt blue / Sora / 7 pages roofing hail white / harness lime / Familjen / 7 pages painting warm chalk / terracotta / Fraunces / 7 pages THIS PORCELAIN / ROSE CLAY / INSTRUMENT / 7 pages + deep ink case SERIF + SANS Every trade template shouts a little, because a contractor is competing on being noticed. A med spa competes on being trusted, so this one is quiet: one restrained accent used almost nowhere, enormous margins, and a serif that behaves. No stock people. No invented clinicians. No before-and-after photographs. See aldridge-brand.md for why that is a design decision and not a shortcut. ============================================================ */ :root{ --porcelain:hsl(34 24% 95%); --porcelain-2:hsl(32 18% 90%); --w:hsl(36 40% 98%); --line:hsl(30 12% 82%); --ink:hsl(20 12% 12%); --ink-2:hsl(20 6% 38%); --ink-3:hsl(24 6% 38%); /* 4.99:1 on the alt band, its worst ground */ /* the case */ --deep:hsl(20 14% 11%); --deep-2:hsl(20 10% 17%); --deep-line:hsl(24 8% 30%); --on-deep:hsl(34 26% 95%); --on-deep-2:hsl(30 10% 74%); /* rose clay — the only chromatic note on the site */ --clay:hsl(6 36% 44%); /* FILL. Light text sits on it */ --clay-ink:hsl(6 44% 36%); /* TEXT on porcelain */ --clay-lit:hsl(8 52% 68%); /* TEXT on the deep case */ --danger:hsl(2 62% 42%); --r:0; --pad:clamp(62px,8vw,132px); --gut:clamp(18px,2.4vw,36px); --mast:76px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--porcelain);color:var(--ink); font:400 17px/1.66 "Instrument Sans",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:"Instrument Serif",Georgia,serif;font-weight:400;margin:0; line-height:1.04;letter-spacing:-.012em} p{margin:0 0 1em} img,video{max-width:100%} a{color:inherit} ul,ol{list-style:none;margin:0;padding:0} /* The UA gives
`margin:1em 40px`. Every media plate on this site is a figure and most of them are grid children, so that default was quietly insetting each one 40px on both sides inside its own track. */ figure{margin:0} p,li,cite,dd,dt,td,th,figcaption{overflow-wrap:anywhere} .wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)} .narrow{max-width:680px} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--clay-ink);outline-offset:4px} .dark :focus-visible,.mast :focus-visible,.plate :focus-visible{outline-color:var(--w)} .skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--w); padding:12px 18px;font-weight:600;text-decoration:none} .skip:focus{left:8px;top:8px} h1{font-size:clamp(44px,6.6vw,92px);letter-spacing:-.02em} h2{font-size:clamp(30px,4vw,54px);letter-spacing:-.016em} h3{font-size:clamp(21px,1.9vw,27px)} .lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-2);max-width:54ch; margin:22px 0 0} .dark .lede{color:var(--on-deep-2)} /* ---------- the label: small caps, wide, quiet ---------- */ .eyebrow{display:block;font-family:"Instrument Sans",sans-serif;font-size:11.5px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--clay-ink);margin-bottom:20px} .dark .eyebrow{color:var(--clay-lit)} .plate .eyebrow{color:var(--w)} /* ---------- surfaces ---------- */ .section{padding:var(--pad) 0;position:relative} .section.alt{background:var(--porcelain-2)} .dark{background:var(--deep);color:var(--on-deep)} .dark h1,.dark h2,.dark h3,.dark h4{color:var(--on-deep)} .head{margin-bottom:clamp(34px,4vw,64px)} .head h2{max-width:18ch} .head.wide h2{max-width:24ch} .head p{color:var(--ink-2);max-width:56ch;margin:18px 0 0;font-size:18px} .dark .head p{color:var(--on-deep-2)} .rule-top{border-top:1px solid var(--line);padding-top:clamp(28px,3vw,44px)} .dark .rule-top{border-color:var(--deep-line)} /* ---------- masthead ---------- */ .mast{background:var(--porcelain);color:var(--ink);position:sticky;top:0;z-index:60; border-bottom:1px solid var(--line)} .mast .wrap{display:flex;align-items:center;gap:24px;min-height:var(--mast)} .logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;padding:8px 0} .logo .mark{width:22px;height:19px;flex:0 0 22px;color:var(--clay)} .logo b{font-family:"Instrument Serif",Georgia,serif;font-size:26px;font-weight:400; letter-spacing:-.01em} .nav{display:flex;gap:26px} .nav a{text-decoration:none;font-size:15px;color:var(--ink-2);position:relative; display:flex;align-items:center;min-height:44px} .nav a:hover{color:var(--ink)} .nav a.here{color:var(--ink)} .nav a.here::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:1px; background:var(--clay)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 26px; border-radius:0;border:1px solid transparent;text-decoration:none;font-weight:600; font-size:15.5px;cursor:pointer;font-family:"Instrument Sans",sans-serif;letter-spacing:.01em; transition:background-color .18s ease,border-color .18s ease,color .18s ease} .btn-1{background:var(--ink);color:var(--w);border-color:var(--ink)} .btn-1:hover{background:var(--clay-ink);border-color:var(--clay-ink)} .btn-2{background:transparent;color:var(--ink);border-color:var(--line)} .btn-2:hover{border-color:var(--ink)} /* EVERY dark container goes in this list. Forgetting one is the single most repeated bug across this whole template library — a button or a card keeps its light-ground text color and lands near-invisible on a dark background. The call bar was the fifth instance. If a new dark surface is added, it goes here in the same commit. */ .dark .btn-1,.plate .btn-1,.callbar .btn-1,.foot .btn-1{ background:var(--w);color:var(--ink);border-color:var(--w)} .dark .btn-1:hover,.plate .btn-1:hover,.callbar .btn-1:hover,.foot .btn-1:hover{ background:var(--porcelain-2);border-color:var(--porcelain-2)} .dark .btn-2,.plate .btn-2,.callbar .btn-2,.foot .btn-2{ color:var(--w);border-color:hsl(34 26% 95% / .55)} .dark .btn-2:hover,.plate .btn-2:hover,.callbar .btn-2:hover,.foot .btn-2:hover{ border-color:var(--w)} .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} /* ============================================================ THE PLATE — the site's whole structural idea. A full-bleed media block with a hairline, a number and a caption. Everything on this site is either a plate or the quiet text between two of them. ============================================================ */ .plate{position:relative;background:var(--deep);color:var(--on-deep);overflow:hidden} .plate-media{position:absolute;inset:0;z-index:0} .plate-media img,.plate-media video{width:100%;height:100%;object-fit:cover;display:block} .plate-veil{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,hsl(20 14% 8% / .18) 0%,hsl(20 14% 8% / .34) 46%, hsl(20 14% 8% / .74) 100%)} .plate-body{position:relative;z-index:2;display:flex;flex-direction:column; justify-content:flex-end;min-height:clamp(460px,74vh,760px); padding:clamp(40px,7vh,90px) 0 clamp(30px,5vh,56px)} .plate-body h1,.plate-body h2{color:var(--w);max-width:16ch} .plate-body .lede{color:hsl(34 26% 94%);max-width:48ch} .plate-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px; flex-wrap:wrap;margin-top:clamp(28px,4vh,52px);padding-top:18px; border-top:1px solid hsl(34 26% 95% / .35); font-size:13px;letter-spacing:.05em;color:hsl(34 20% 88%)} .plate-no{font-family:"Instrument Serif",Georgia,serif;font-size:15px;letter-spacing:.12em} /* a plate used inline in the flow rather than full-bleed */ .plate.inset{min-height:0} .plate.inset .plate-body{min-height:clamp(320px,46vh,480px)} /* ---------- the shot-list placeholder ---------- A media slot with no photograph in it yet. Drawn deliberately, so it reads as a brief for the client's photographer rather than as a broken image. */ .slot{position:relative;display:flex;flex-direction:column;justify-content:flex-end; background: repeating-linear-gradient(135deg,hsl(30 14% 88%) 0 2px,transparent 2px 11px), var(--porcelain-2); border:1px solid var(--line);color:var(--ink-2);padding:20px;min-height:230px} .slot::before{content:"";position:absolute;left:14px;right:14px;top:14px;bottom:14px; border:1px dashed hsl(30 12% 70%);pointer-events:none} .slot .tag{position:relative;font-family:"Instrument Sans",sans-serif;font-size:10.5px; font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--clay-ink); margin-bottom:8px} .slot .what{position:relative;font-family:"Instrument Serif",Georgia,serif; font-size:clamp(19px,1.7vw,24px);line-height:1.15;color:var(--ink);max-width:26ch} .slot .spec{position:relative;margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-2)} .slot.tall{min-height:400px} .slot.wide{min-height:300px} .dark .slot{background:repeating-linear-gradient(135deg,hsl(24 8% 22%) 0 2px,transparent 2px 11px), var(--deep-2);border-color:var(--deep-line);color:var(--on-deep-2)} .dark .slot::before{border-color:hsl(24 8% 34%)} .dark .slot .what{color:var(--on-deep)} .dark .slot .tag{color:var(--clay-lit)} .dark .slot .spec{color:var(--on-deep-2)} /* ---------- shot: a photograph that IS here ---------- Deliberately built to sit in the same grid as .slot and read as the same kind of object — a numbered plate — so a page that mixes real photographs with briefs for unshot ones does not look half-finished. The credit is not decoration. Two of the three photographs are CC BY-SA, where attribution is a license condition, and all three carry a line saying what they are not. That line is the smallest type on the site and it is still required to pass contrast. */ .shot{position:relative;display:flex;flex-direction:column;margin:0; background:var(--porcelain-2);border:1px solid var(--line)} .shot img{display:block;width:100%;height:100%;object-fit:cover; aspect-ratio:3/2;background:var(--porcelain-2)} .shot.tall img{aspect-ratio:4/5} .shot figcaption{padding:16px 18px 0} .shot .tag{display:block;font-family:"Instrument Sans",sans-serif;font-size:10.5px; font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--clay-ink); margin-bottom:7px} .shot .what{display:block;font-family:"Instrument Serif",Georgia,serif; font-size:clamp(19px,1.7vw,23px);line-height:1.18;color:var(--ink);max-width:30ch} .shot .credit{display:block;padding:12px 18px 16px;margin-top:auto; font-size:11.5px;line-height:1.55;color:var(--ink-3)} .shot .credit a{color:var(--clay-ink)} /* GROUND SAFETY. .shot carries its own light background, so a dark or tinted section must not repaint its text with the section's on-dark colors. Every component with its own ground belongs in this list; the fifth instance of forgetting one in this library was the call bar's buttons. */ /* :not(.plate-figure) matters. The header figure is a .shot inside a .plate, so this rule was repainting its background porcelain and putting the card border back — the feathered photograph rendered inside a light rectangle, which is precisely the thing the feathering exists to avoid. Ground safety is right by default and wrong for the one component that deliberately has no ground. */ .dark .shot,.plate .shot:not(.plate-figure){background:var(--porcelain-2); border-color:var(--line)} .dark .shot .what,.plate .shot:not(.plate-figure) .what{color:var(--ink)} .dark .shot .tag,.plate .shot:not(.plate-figure) .tag{color:var(--clay-ink)} .dark .shot .credit,.plate .shot:not(.plate-figure) .credit{color:var(--ink-3)} .dark .shot .credit a,.plate .shot:not(.plate-figure) .credit a{color:var(--clay-ink)} /* ---------- a photograph layered INTO the plate ---------- The hero's image is feathered to transparency by fetch-images.py rather than cropped to a rectangle, because the plate behind it is moving light and a hard-edged photograph dropped on top of that reads as a box pasted on. The alpha does the blending; CSS only places it. It is decorative — everything it shows is also said in the type beside it — but it is CC BY-SA, so the credit is a license condition and is rendered, not skipped. */ .plate .shot.plate-figure,.plate-figure{position:absolute;right:clamp(20px,4vw,72px);top:50%; transform:translateY(-50%);width:min(40%,520px); margin:0;background:none;border:0;pointer-events:none;z-index:1; display:flex;flex-direction:column;gap:10px} .plate .shot.plate-figure img,.plate-figure img{width:100%;height:auto;max-height:56vh;aspect-ratio:auto; object-fit:contain;background:none} /* The credit sits UNDER the picture, in the figure's own flow. Pinned to the bottom of the plate it landed on top of the plate footer — two right-aligned text blocks in the same 40px of screen. */ .plate-figure .credit{padding:0;text-align:right;font-size:11px;line-height:1.5; color:var(--on-deep-2);text-shadow:0 1px 3px hsl(20 14% 8% / .9)} .plate-figure .credit a{color:var(--on-deep-2);text-decoration:underline} /* The copy stays above the photograph AND clear of it: without the reserved right-hand gutter the headline's third line ran under the picture. */ .plate-body{position:relative;z-index:2} .plate-figure ~ .plate-body h1, .plate-figure ~ .plate-body .lede{max-width:min(52%,620px)} /* ---------- an instrument cut out of its background ---------- dermatoscope.webp carries a real alpha channel, keyed from a white studio ground. It gets no frame and no card, because the point of a cutout is that there is no edge. */ .cutout{margin:0;background:none;border:0;display:flex;flex-direction:column; align-items:center;gap:14px} .cutout img{width:100%;max-width:420px;height:auto;aspect-ratio:auto; object-fit:contain;background:none; filter:drop-shadow(0 26px 34px hsl(20 14% 8% / .22))} .dark .cutout img,.plate .cutout img{filter:drop-shadow(0 26px 34px hsl(20 14% 4% / .55))} .cutout figcaption{text-align:center} .cutout .tag{display:block;font-family:"Instrument Sans",sans-serif;font-size:10.5px; font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--clay-ink); margin-bottom:7px} .cutout .what{display:block;font-family:"Instrument Serif",Georgia,serif; font-size:clamp(19px,1.7vw,23px);line-height:1.18;color:var(--ink);max-width:26ch; margin:0 auto} .cutout .credit{display:block;margin-top:10px;font-size:11.5px;line-height:1.55; color:var(--ink-3)} .cutout .credit a{color:var(--clay-ink)} /* GROUND SAFETY — a cutout has no ground of its own, so on the case it must be repainted rather than left with its light-ground colors. */ .dark .cutout .what,.plate .cutout .what{color:var(--on-deep)} .dark .cutout .tag,.plate .cutout .tag{color:var(--clay-lit)} .dark .cutout .credit,.plate .cutout .credit{color:var(--on-deep-2)} .dark .cutout .credit a,.plate .cutout .credit a{color:var(--on-deep-2)} /* a video shown as a plate in the gallery grid, rather than as a background */ .clip{position:relative;margin:0;background:var(--deep);border:1px solid var(--line); overflow:hidden} .clip video{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9} .clip figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px; background:linear-gradient(180deg,transparent,hsl(20 14% 8% / .82) 62%)} .clip .tag{display:block;font-family:"Instrument Sans",sans-serif;font-size:10.5px; font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--clay-lit); margin-bottom:6px} .clip .what{display:block;font-family:"Instrument Serif",Georgia,serif; font-size:clamp(19px,1.7vw,23px);line-height:1.18;color:var(--on-deep);max-width:30ch} /* ---------- the gallery grid ---------- */ .plates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)} .plates .span2{grid-column:span 2} /* ---------- schedule: the honest treatment table ---------- */ .sched li{display:grid;grid-template-columns:1.25fr 1fr;gap:10px clamp(24px,3vw,54px); padding:30px 0;border-top:1px solid var(--line)} .sched li:last-child{border-bottom:1px solid var(--line)} .dark .sched li{border-color:var(--deep-line)} .sched h3{margin-bottom:10px} .sched p{color:var(--ink-2);margin:0 0 .7em;max-width:52ch} .sched p:last-child{margin-bottom:0} .dark .sched p{color:var(--on-deep-2)} .facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;align-content:start} .fact{border-top:1px solid var(--line);padding-top:10px} .dark .fact{border-color:var(--deep-line)} .fact b{display:block;font-family:"Instrument Sans",sans-serif;font-size:10.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px} .dark .fact b{color:var(--on-deep-2)} .fact span{display:block;font-family:"Instrument Serif",Georgia,serif;font-size:20px; line-height:1.2;color:var(--ink)} .dark .fact span{color:var(--on-deep)} /* ---------- figures ---------- */ .figures{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px)} .fig{border-top:1px solid var(--line);padding-top:18px} .dark .fig{border-color:var(--deep-line)} .fig .n{display:block;font-family:"Instrument Serif",Georgia,serif; font-size:clamp(38px,4.6vw,64px);line-height:1;margin-bottom:12px} .fig .l{display:block;font-size:14.5px;line-height:1.55;color:var(--ink-2)} .dark .fig .l{color:var(--on-deep-2)} /* ---------- note: a quoted rule, on paper ---------- */ .note{background:var(--w);border:1px solid var(--line);padding:clamp(24px,3vw,38px); color:var(--ink)} .note h3,.dark .note h3{color:var(--ink);margin-bottom:12px} .note p{color:var(--ink-2);max-width:56ch;font-size:16px} .note blockquote{margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--line); font-family:"Instrument Serif",Georgia,serif;font-size:19px;line-height:1.4;color:var(--ink)} .note cite{display:block;font-style:normal;font-family:"Instrument Sans",sans-serif;font-size:13px; line-height:1.6;color:var(--ink-2);margin-top:14px} .note cite a{color:var(--clay-ink);font-weight:600} /* ---------- careful: things we will not do ---------- */ .careful{background:var(--w);border:1px solid var(--line);border-left:4px solid var(--clay); padding:24px;color:var(--ink)} .careful h3,.dark .careful h3{color:var(--clay-ink);margin-bottom:10px} .careful p{color:var(--ink-2);margin:0 0 .7em} .careful p:last-child{margin-bottom:0} /* ---------- form ---------- */ .form{background:var(--w);border:1px solid var(--line);padding:clamp(24px,3vw,40px);color:var(--ink)} .form h2,.dark .form h2{color:var(--ink)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .f{display:flex;flex-direction:column} .f.full{grid-column:1/-1} .f label{font-size:15px;font-weight:600;margin-bottom:8px} .f .grouplabel{font-family:"Instrument Sans",sans-serif;font-size:10.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:12px} .f input,.f textarea,.f select{font:inherit;font-size:16px;padding:13px 14px;min-height:52px; border:1px solid var(--line);border-radius:0;background:var(--porcelain);color:var(--ink)} .f input:focus,.f textarea:focus{outline:2px solid var(--clay-ink);outline-offset:2px} .f textarea{min-height:130px;resize:vertical} .f .hint{font-size:13px;color:var(--ink-2);margin-top:7px} .f .err{display:none;font-size:13.5px;font-weight:600;color:var(--danger);margin-top:7px} .f.bad input,.f.bad textarea{border-color:var(--danger)} .f.bad .err{display:block} .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px} .opts label{display:flex;align-items:center;gap:10px;min-height:50px;padding:9px 14px; border:1px solid var(--line);background:var(--porcelain);font-size:15px;cursor:pointer} .opts label:hover{border-color:var(--ink)} .opts input{flex:none;width:19px;height:19px;min-height:0;accent-color:var(--clay-ink)} .sent{background:var(--w);border:1px solid var(--line);border-left:4px solid var(--clay); padding:clamp(24px,3vw,38px);color:var(--ink)} .sent h3,.dark .sent h3{color:var(--ink);margin-bottom:12px} .sent p{color:var(--ink-2);margin:0 0 .8em} .sent p:last-child{margin-bottom:0} .sent a{color:var(--clay-ink)} /* ---------- layout helpers ---------- */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,72px)} .grid-2.wide-left{grid-template-columns:1.15fr 1fr} .grid-2>*,.form-grid>*,.plates>*,.figures>*,.facts>*,.foot .wrap>*{min-width:0} .shot,.slot,.cutout,.clip{min-width:0} /* ---------- footer ---------- */ .foot{background:var(--deep);color:var(--on-deep-2);padding:clamp(56px,7vw,96px) 0 36px; font-size:15px} .foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px var(--gut)} .foot h2{font-family:"Instrument Sans",sans-serif;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--on-deep-2);margin-bottom:16px} .foot ul li{margin-bottom:10px;line-height:1.5;overflow-wrap:anywhere} .foot a{color:var(--on-deep)} .foot a:hover{color:var(--clay-lit)} .foot .logo{color:var(--on-deep);margin-bottom:16px} .foot .logo .mark{color:var(--clay-lit)} .demo{grid-column:1/-1;border-top:1px solid var(--deep-line);padding-top:24px;margin:16px 0 0; font-size:13.5px;line-height:1.65;color:var(--on-deep-2);max-width:98ch} .demo b{color:var(--on-deep)} .demo a{color:var(--clay-lit)} .callbar{display:none} /* ---------- reveals ---------- */ .js .up{opacity:0;transform:translateY(14px); transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)} .js .up.in{opacity:1;transform:none} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1040px){ .plates{grid-template-columns:1fr 1fr} .plates .span2{grid-column:span 2} .figures{grid-template-columns:1fr 1fr} .foot .wrap{grid-template-columns:1fr 1fr} } @media(max-width:860px){ .nav{display:none} /* The hero photograph is absolutely positioned over the copy on desktop. At phone width the copy is the full screen width, so there is no "beside" for it to sit in and any overlap puts type on a picture. It becomes a row of its own under the buttons — the same fix the electrician's scene needed. */ /* The header photograph becomes a row of its own beneath the copy. Three things had to be right and each one was wrong first: 1. These selectors MUST match the specificity of the desktop rules above. Written as a bare .plate-figure they lost to .plate .shot.plate-figure and the photograph stayed absolutely positioned over the lede. 2. position:static drops the element out of the stacking context, so z-index stopped applying and .plate-veil — which follows it in the DOM and is absolutely positioned — painted straight over it. It has to stay POSITIONED. relative, not static. 3. The plate is not a flex container by default, so `order` did nothing and the picture sat above the headline. */ .plate{display:flex;flex-direction:column;justify-content:center} .plate .shot.plate-figure,.plate-figure{position:relative;transform:none; width:auto;order:2;margin:8px 0 0;padding:0 var(--gut)} .plate .shot.plate-figure img,.plate-figure img{max-height:none} .plate-body{order:1} .plate-figure .credit{text-align:left;max-width:none} .plate-figure ~ .plate-body h1, .plate-figure ~ .plate-body .lede{max-width:none} .grid-2,.grid-2.wide-left,.form-grid,.opts{grid-template-columns:1fr} .sched li{grid-template-columns:1fr;gap:18px} .foot .wrap{grid-template-columns:1fr} body{padding-bottom:78px} .plate-body{min-height:clamp(400px,62vh,540px)} .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--deep); border-top:1px solid var(--deep-line);padding:10px;gap:9px} .callbar .btn{flex:1;min-height:54px;justify-content:center;font-size:15px; white-space:nowrap;padding:14px 12px} } @media(max-width:560px){ .plates{grid-template-columns:1fr} .plates .span2{grid-column:span 1} .figures{grid-template-columns:1fr} .facts{grid-template-columns:1fr} h1{font-size:clamp(38px,11vw,54px)} } /* ============================================================ PAGE TRANSITIONS ============================================================ */ @media(prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} ::view-transition-old(root){animation:vt-out .22s ease both} ::view-transition-new(root){animation:vt-in .3s ease both} ::view-transition-old(mast),::view-transition-new(mast){animation:none} } @keyframes vt-out{to{opacity:0}} @keyframes vt-in{from{opacity:0}} .mast{view-transition-name:mast} /* ============================================================ THE FLOOR. The hero loop is decorative and silent. Under reduced motion the