:root{
  --paper:#F4F2EF;
  --wash:#EAE7E2;
  --ink:#1B1A18;
  --grey:#635E57;
  --rule:#DFDAD3;
  --accent:#26403F;
  --accent-lt:#3C615F;
  --tint:#DCE6E4;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Figtree",-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(20px,5vw,72px);
  --maxw:1280px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:15.5px;line-height:1.72;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* <picture> wraps every photograph so a WebP can be offered first. It
   must not become a box of its own: an inline wrapper puts the image
   in a line box and the descender gap under it is exactly the stray
   white space on mobile that took two passes to get rid of. */
picture{display:contents}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
h1,h2{font-family:var(--display);font-weight:400;margin:0;line-height:1.08;
  letter-spacing:-.014em;font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 0}
h1{font-size:clamp(34px,4.8vw,64px)}
h2{font-size:clamp(27px,3.2vw,44px)}
h3{font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(19px,1.9vw,25px);line-height:1.22;letter-spacing:-.008em}
.ac{color:var(--accent)}
.label{font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin:0}
.lede{font-size:clamp(15.5px,1.3vw,18px);color:var(--grey);line-height:1.68}

/* ── bar: nothing behind it, the items adapt ── */
.bar{position:fixed;top:0;left:0;right:0;z-index:60;background:none;border:0}
.bar-in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:62px}
.bar-nav{display:flex;gap:clamp(14px,2vw,28px);font-size:11px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase}
.bar-nav.right{justify-content:flex-end;align-items:center}
.mark{font-family:var(--display);font-size:clamp(18px,1.7vw,24px);letter-spacing:.3em;
  text-align:center;white-space:nowrap;padding-left:.3em}
.book{padding:9px 18px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid currentColor;white-space:nowrap}
.bar .bar-nav a,.bar .menu-btn{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.bar .mark{color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.45)}
.bar .bar-nav a.book{text-shadow:none}
.bar .bar-nav a.book:hover{background:#fff;color:var(--ink)}
.bar.ink .bar-nav a,.bar.ink .menu-btn{color:var(--grey);text-shadow:none}
.bar.ink .bar-nav a:hover{color:var(--ink)}
.bar.ink .mark{color:var(--ink);text-shadow:none}
.bar.ink .bar-nav a.book{color:var(--ink)}
.bar.ink .bar-nav a.book:hover{background:var(--ink);color:var(--paper)}

/* ── hero ──────────────────────────────────────────
   A split, not a full bleed. This photograph is 600x720 and a full-width
   hero would upscale it; at this size it is shown at or below native and
   she is large enough to actually meet your eye, which a full-bleed shot
   of her standing across the room was not. */
.opener{padding-top:62px;background:var(--wash)}
.opener-grid{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(28px,5vw,80px);align-items:center;
  padding-block:clamp(34px,5vw,74px)}
/* She is cut out of her backdrop now, so a plain crop would leave her
   floating. A tinted panel sits behind and she stands out of the top of
   it — the cutout then reads as a deliberate device rather than a
   photograph with its background missing. */
.opener-img{position:relative;display:flex;align-items:flex-end;
  justify-content:center;isolation:isolate}
.opener-img::before{content:"";position:absolute;left:0;right:0;bottom:0;
  height:76%;background:var(--tint);z-index:-1}
/* A headshot, not a poster: capped well under native so the headline
   leads and she sits beside it rather than filling the fold. */
.opener-img img{width:100%;max-width:380px;height:auto;display:block}
.opener-type h1{margin-top:14px}
.opener-type .lede{margin-top:20px;max-width:42ch}
.opener-type .cta{margin-top:30px}
.btn.dark{border-color:var(--ink);color:var(--ink)}
.btn.dark.fill{background:var(--ink);color:var(--paper)}
.btn.dark:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/* ── the hero on a phone ──────────────────────────────────────────
   James, 2026-10-20: "what u sent should be the hero... with a book
   button." The split works on a wide screen and nowhere else: stacked,
   it was a cutout with the headline either under it or above it, and
   neither read like the photograph he kept pointing at.

   So below 860 the hero becomes the band. The <picture> swaps the
   cutout for the frame she was shot in, the photograph fills the
   section, and the type — eyebrow, headline, both buttons — sits in
   the backdrop beside her, white over a scrim. One composition on the
   phone and one on the desktop, each built for its own width. */
@media (max-width:860px){
  .opener-grid{position:relative;isolation:isolate;max-width:none;
    overflow:hidden;
    display:flex;align-items:center;justify-content:flex-end;
    /* "Place the image of her back more so there's more gray and she's
       smaller." The crop is height-driven, so a shorter section is a
       smaller scale, and a smaller scale shows more of the frame she was
       photographed in — she steps back and the backdrop opens up. */
    /* 257px read as too short, 429px as a little too tall. 378px on a
       390 phone is the landing between them: the section goes 487px to
       436px, just over half an 844px screen instead of 58% of it, and she
       goes 122px wide to 108px rather than back to the 73px he rejected. */
    min-height:clamp(330px,97vw,460px);
    padding-block:clamp(24px,5vw,34px)}
  .opener-grid::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg,transparent 16%,rgba(32,32,38,.36) 38%,
      rgba(32,32,38,.66) 68%)}
  /* "Move her a little left too." With this much of the frame on screen
     there is barely any crop left for object-position to work with, so
     the photograph itself hangs off the left edge and the section clips
     it — which moves her without moving the backdrop out from under the
     type. */
  .opener-img{position:absolute;top:0;bottom:0;right:0;z-index:0;display:block;
    left:calc(clamp(14px,5vw,30px) * -1)}
  .opener-img::before{display:none}
  .opener-img img{width:100%;height:100%;max-width:none;margin:0;
    object-fit:cover;object-position:48% center}
  .opener-type{position:relative;z-index:2;width:min(100%,56%)}
  /* "Hero looks too crowded and too many words." Five stacked things in
     a 196px column is a page, not a hero. Three survive: who she is,
     what the practice is for, and the one button the hero exists to get
     pressed. The sentence and the second button are a scroll away — the
     section immediately below opens on the same idea, and the bar
     already carries Treatments. */
  .opener-type .label{color:#E4E0DA;font-size:9.5px;letter-spacing:.24em}
  .opener-type .label-creds{display:none}
  .opener-type h1{color:#fff;font-size:clamp(27px,7.4vw,37px);margin-top:11px}
  .opener-type h1 .ac{color:#DCE6E4}
  .opener-type .lede{display:none}
  .opener-type .cta{margin-top:24px;flex-direction:column;align-items:stretch}
  .opener-type .cta .btn:not(.fill){display:none}
  .opener-type .cta .btn{text-align:center;padding:13px 6px;font-size:10px}
  .opener-type .cta .btn.dark{border-color:rgba(255,255,255,.72);color:#fff}
  .opener-type .cta .btn.dark.fill{background:#fff;border-color:#fff;
    color:var(--ink)}
  /* The same photograph twice on one screen is once too many: on a phone
     the hero is the band, so the band lower down stands down. */
  .portrait-echo{display:none}
}

.sec{padding-block:clamp(62px,9vw,132px)}
.sec.wash{background:var(--wash)}
.sec.deep{background:var(--accent);color:#DCE6E4}
.sec.deep h2{color:#fff}
.sec.deep .label{color:#9CBAB7}
.sec.deep .lede{color:#C3D5D3}
.head{max-width:60ch;margin:0 auto clamp(36px,5vw,66px);text-align:center}
.head .lede{margin-top:20px}

/* ── a section head for a page that carries nine of them ───────────
   James, 2026-10-21: "The landing page feels like someone made it with
   Wordpress." Nine sections, eight of them opening with the same
   centred eyebrow, serif heading and grey paragraph, seven centred, and
   a pair of filled rectangles at the foot of most: that stack repeated
   nine times is the page-builder template, and it was the rhythm rather
   than the palette or the type, which he likes where they appear once.

   So the landing page sets its heads across two columns under a
   hairline — heading left, the sentence right, baselines aligned —
   the way a spread announces a section. .head is untouched: an inner
   page carries one of these, and centred is right for one. */
.head-x{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4vw,70px);align-items:end;
  padding-top:clamp(18px,2.2vw,28px);border-top:1px solid var(--rule);
  margin-bottom:clamp(32px,4.4vw,58px)}
.head-x .label{grid-column:1;grid-row:1}
.head-x h2{grid-column:1;grid-row:2;margin-top:11px;max-width:15ch}
.head-x .lede{grid-column:2;grid-row:1 / span 2;align-self:end;
  margin:0;max-width:48ch}
.sec.deep .head-x{border-top-color:rgba(255,255,255,.26)}
@media (max-width:820px){
  .head-x{grid-template-columns:1fr;gap:15px;align-items:start}
  .head-x .label,.head-x h2,.head-x .lede{grid-column:1;grid-row:auto}
  .head-x h2{max-width:none}
}

/* ── the quiet way out of a section ────────────────────────────────
   The page carried twenty buttons. A filled rectangle is a decision
   being asked for, and twenty of them is a form rather than a page —
   it is also the single most page-builder thing on the screen. Moving
   between sections is a ruled link now; the filled button is kept for
   the two places the page actually asks for something, the hero and
   the closing band. */
.more{display:inline-flex;align-items:baseline;gap:9px;font-size:11px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--rule);padding-bottom:7px;
  transition:color .15s,border-color .15s}
.more::after{content:"\2192";font-size:12.5px;letter-spacing:0}
.more:hover{color:var(--ink);border-bottom-color:var(--ink)}
.more+.more{margin-left:clamp(20px,3.2vw,46px)}
.sec.deep .more{color:#DCE6E4;border-bottom-color:rgba(255,255,255,.3)}
.sec.deep .more:hover{color:#fff;border-bottom-color:#fff}
.mores{margin-top:clamp(30px,3.6vw,48px);display:block}
@media (max-width:560px){
  .more+.more{margin-left:0;margin-top:14px}
  .more{display:flex;justify-content:space-between}
}

/* ── the one section that is not a row of boxes ────────────────────
   Nine sections of grid need somewhere to breathe, and this is the one
   that earns it: a sentence about restraint reads beside a photograph,
   not above a table. The picture runs off the right edge of the screen
   while the type stays on the page's own left margin, which is the
   measurement this does that a column inside .wrap cannot. */
/* The photograph reaches the top and bottom of the band, so the
   section's own vertical padding moves onto the type column. */
.sec.flush{padding-block:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  align-items:center;gap:clamp(28px,4.6vw,76px);
  padding-left:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)))}
.split-t{padding-block:clamp(38px,5vw,86px)}
.split-t h2{margin:12px 0 20px;font-size:clamp(30px,4vw,54px);max-width:13ch}
.split-t p{margin:0 0 15px;color:var(--grey)}
.split-i img{width:100%;height:100%;object-fit:cover;
  min-height:clamp(360px,44vw,600px)}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:0;padding-left:0}
  .split-t{padding-inline:var(--pad);padding-block:clamp(34px,6vw,48px)}
  .split-t h2{max-width:none}
  .split-i img{height:clamp(280px,70vw,420px);min-height:0}
}

/* ── the bands between sections ── */
/* James, 2026-10-20: "Landing page itself can use more images tbh." It
   ran nine sections on one photograph between the hero and her portrait.
   These are full-bleed and carry no text — each belongs to the section
   above it and ends it, which is why they sit at the join rather than
   inside the centred heads, where an image beside the type would fight
   the composition the whole page is built on. The height is clamped
   rather than left to the aspect ratio: a 20:9 file left to itself is a
   letterbox slot on a phone and a wall on a desktop. */
.band{display:block;width:100%;overflow:hidden;background:var(--wash)}
.band img{display:block;width:100%;height:clamp(190px,30vw,400px);
  object-fit:cover}

/* ── the four ideas ── */
.idea{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,88px);
  align-items:center;margin-bottom:clamp(54px,7vw,110px)}
.idea:last-child{margin-bottom:0}
.idea.flip>div:first-child{order:2}
.idea img{width:100%;aspect-ratio:4/5;object-fit:cover}
.idea .n{font-family:var(--display);font-size:13px;letter-spacing:.2em;
  color:var(--accent);display:block;margin-bottom:14px}
/* Sections 01 and 03 wore a serif 13px eyebrow while 02 and 04-07 wore the
   sans 10.5px .label, so the same element alternated typeface and size all
   the way down the homepage. .label is the system — it is on every other
   section and every inner page — so .n matches it. Deleting these four
   lines puts the serif back. */
.idea .n{font-family:var(--text);font-size:10.5px;font-weight:600;
  letter-spacing:.3em;margin-bottom:16px}
.idea h2{margin-bottom:18px}
.idea p{margin:0 0 16px;color:var(--grey)}
.idea p:last-child{margin-bottom:0}
@media (max-width:860px){
  .idea{grid-template-columns:1fr;gap:26px}
  .idea.flip>div:first-child{order:0}
}

/* ── the stack diagram ── */
figure.plan{margin:0}
figure.plan svg{width:100%;height:auto;display:block}
figure.plan figcaption{margin-top:18px;font-size:13.5px;color:var(--grey);
  max-width:62ch}
.sec.deep figure.plan figcaption{color:#A9C2C0}

/* ── decades ── */
.ages{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.ages>div{background:var(--paper);padding:clamp(22px,2.6vw,32px)}
.sec.wash .ages>div{background:var(--wash)}
.ages .d{display:block;font-family:var(--display);color:var(--accent);
  font-size:clamp(28px,3.4vw,42px);line-height:1;margin-bottom:14px}
.ages p{margin:0;color:var(--grey);font-size:14.5px;line-height:1.62}
@media (max-width:900px){.ages{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ages{grid-template-columns:1fr}}

/* ── instruments ── */
.instruments{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,52px)}
.inst h3{padding-top:18px;border-top:1px solid currentColor;margin-bottom:12px}
.inst p{margin:0;color:var(--grey);font-size:15px}
.sec.deep .inst p{color:#B6CCCA}
@media (max-width:820px){.instruments{grid-template-columns:1fr}}

/* ── doctor ── */
.doc{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:center}
.doc img{width:100%;aspect-ratio:3/4;object-fit:cover}
.creds{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px}
.cred{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--accent);border:1px solid var(--accent);padding:7px 14px}
@media (max-width:860px){.doc{grid-template-columns:1fr}}

/* ── closing portrait, after House's opener: she sits left in the pink
   dress and the right half is plain backdrop, so paper type sits there
   behind a scrim. Below 820 the copy drops under the photograph. ── */
.portrait{position:relative;isolation:isolate;background:var(--wash)}
.portrait img{width:100%;height:clamp(440px,60vw,780px);object-fit:cover;
  object-position:18% center}
.portrait::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,transparent 34%,rgba(32,32,38,.30) 62%,
    rgba(32,32,38,.52) 100%)}
.portrait-type{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.portrait-type .wrap{width:100%;display:flex;justify-content:flex-end}
.portrait-type .wrap > div{width:min(100%,clamp(280px,40vw,560px))}
.portrait-type h2{color:#fff;margin-top:12px}
.portrait-type h2 .ac{color:#DCE6E4}
.portrait-type .label{color:#E4E0DA}
.portrait-type .lede{color:#EDEAE5}
.portrait-type .cred{color:#fff;border-color:rgba(255,255,255,.7)}
/* James, 2026-10-20: "pink dress wit her title in the space to the right
   just like on desktop". It used to drop the copy under the photograph
   below 820. She is measurably 12%-37% across this frame, so pulling the
   crop to 25% leaves her at the left edge and the backdrop free on the
   right at every phone width — the same composition, scaled. */
@media (max-width:860px){
  .portrait img{height:clamp(300px,86vw,440px);object-position:33% center}
  .portrait::after{background:linear-gradient(90deg,transparent 20%,
    rgba(32,32,38,.34) 42%,rgba(32,32,38,.62) 72%)}
  .portrait-type .wrap > div{width:min(100%,50%)}
  .portrait-type .label{font-size:9.5px;letter-spacing:.26em}
  .portrait-type h2{font-size:clamp(23px,6.2vw,31px);margin-top:7px}
  .portrait-type .creds{gap:6px;margin:12px 0 13px}
  .portrait-type .cred{font-size:9px;padding:5px 8px;letter-spacing:.16em}
  .portrait-type .lede{font-size:13px;line-height:1.54}
}
/* James: "if it becomes too tall let's make the paragraph shorter." Both
   bands lost a clause instead of losing type size, so the copy is set at
   the same scale on a 320 phone as on a 430 one. Only the eyebrow tightens,
   to hold YOUR DERMATOLOGIST on one line in a 140px column. */
@media (max-width:400px){
  .portrait-type .label{font-size:8.6px;letter-spacing:.2em}
  /* BOOK A CONSULTATION on two lines reads as a paragraph, not a button. */
  .opener-type .cta .btn{font-size:9px;letter-spacing:.14em}
}

/* ── voices ── */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,52px)}
.voice{margin:0;padding-top:20px;border-top:1px solid var(--ink)}
.voice blockquote{margin:0 0 14px;font-family:var(--display);
  font-size:clamp(16.5px,1.7vw,21px);line-height:1.4}
.voice figcaption{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}
@media (max-width:860px){.voices{grid-template-columns:1fr}}

/* ── close ── */
.close{background:var(--ink);color:var(--paper);padding-block:clamp(56px,8vw,112px)}
.close h2{color:var(--paper)}
.close .lede{color:#B4AEA6}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{border:1px solid var(--paper);color:var(--paper);padding:13px 28px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.btn.fill{background:var(--paper);color:var(--ink)}
.btn:hover{background:var(--accent-lt);border-color:var(--accent-lt);color:#fff}
footer{padding-block:clamp(30px,4vw,50px);font-size:13px;color:var(--grey)}
/* A Google post that shipped with a photograph keeps it, set above the
   copy at the width of the column rather than floated beside it — these
   are 4:3 snapshots, not art direction. */
.upd-body picture{display:contents}
.upd-body img{display:block;width:100%;height:auto;margin:0 0 20px;
  background:var(--wash)}
@media (min-width:861px){.upd-body img{max-width:460px}}

/* ── the footer ─────────────────────────────────────────────────
   James: "footer looks way too crowded on mobile", then "can u just
   restructure footer so it looks good". So it is built rather than
   stripped: her name and how to reach her on the left, the menu's three
   groups as columns on the right, a rule, then the year and where she
   posts. On a phone the columns stand down — every one of those links
   is in the sheet, reachable from the sticky bar at any width — and
   what is left is the part the footer is the only place for. */
.site-foot{border-top:1px solid var(--rule,rgba(32,32,38,.12));
  margin-top:clamp(40px,6vw,80px);font-size:13px;color:var(--grey)}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(28px,5vw,80px);padding-block:clamp(34px,4.6vw,60px)}
.foot-mark{font-family:var(--display);font-size:22px;letter-spacing:.34em;
  color:var(--ink);margin:0}
.foot-sub{margin:6px 0 0;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase}
.site-foot address{font-style:normal;margin-top:20px;line-height:1.7}
.foot-reach{display:flex;flex-direction:column;gap:4px;margin:14px 0 0}
.foot-reach a:first-child{font-size:17px;color:var(--ink);letter-spacing:.02em}
.foot-book{margin-top:22px;display:inline-block}
.foot-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px)}
.foot-nav div{display:flex;flex-direction:column;gap:9px}
.foot-k{font-size:10px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent);margin:0 0 4px}
.foot-end{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  align-items:center;padding-block:18px clamp(26px,3vw,40px);
  border-top:1px solid var(--rule,rgba(32,32,38,.10))}
.foot-end p{margin:0}
.foot-social,.foot-legal{display:flex;flex-wrap:wrap;gap:18px}
.site-foot a:hover{color:var(--ink);text-decoration:underline;
  text-underline-offset:3px}
@media (max-width:860px){
  .foot-top{grid-template-columns:1fr;gap:30px}
  .foot-nav{display:none}
  .foot-book{display:block;text-align:center}
  .foot-end{flex-direction:column;align-items:flex-start;gap:16px}
  .foot-social,.foot-legal{gap:16px;font-size:12.5px}
}

/* ── mobile menu ── */
/* Visible at every width. It used to appear only under 860px, which
   meant a desktop visitor could reach the journal, the updates, men's
   care and the payment plans from the footer and nowhere else — six
   bar links were the whole of the navigation. The sheet already lays
   itself out in three columns on a wide screen; it just was not
   reachable from one. */
.menu-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;
  font-family:var(--text);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;padding:8px 0}
.menu-btn .bars{display:inline-block;width:18px;height:9px;position:relative}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;
  height:1px;background:currentColor}
.menu-btn .bars::before{top:0}.menu-btn .bars::after{bottom:0}
.sheet{position:fixed;inset:0;z-index:70;background:var(--paper);display:flex;
  flex-direction:column;padding:calc(62px + clamp(20px,6vw,34px)) var(--pad) 0;
  opacity:0;pointer-events:none;transition:opacity .28s ease}
.sheet.open{opacity:1;pointer-events:auto}
/* Grouped, because ten flat items in one column is a list to read
   rather than a menu to use — and because at thirteen it no longer fit
   a phone at all. Headings name the three questions a patient arrives
   with: what do you treat, what happens at my visit, who are you. */
.sheet{overflow-y:auto;overscroll-behavior:contain;padding-bottom:30px}
.sheet-cols{display:grid;grid-template-columns:1fr;gap:4px 48px;align-content:start}
.sheet-k{font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin:22px 0 6px}
.sheet-grp:first-child .sheet-k{margin-top:0}
.sheet a{display:block;font-family:var(--display);font-size:clamp(18px,4.2vw,22px);
  line-height:1.3;padding:9px 0;border-bottom:1px solid var(--rule)}
.sheet-grp a:last-child{border-bottom:0}
.sheet-end{margin-top:auto;padding-top:26px}
.sheet a.sheet-book{display:block;border:1px solid var(--ink);text-align:center;
  font-family:var(--text);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;padding:15px 0;line-height:1.2}
/* .sheet a styles every link in the sheet, and the address line has two
   of them: without this the phone number came out as 22px serif. */
.sheet-foot{margin-top:16px;font-size:13px;color:var(--grey);display:block}
.sheet-foot a{display:inline;font-family:var(--text);font-size:13px;
  line-height:inherit;padding:0;border-bottom:0;color:inherit}
@media (min-width:720px){
  .sheet-cols{grid-template-columns:repeat(3,1fr);gap:0 clamp(28px,4vw,64px)}
  .sheet-grp .sheet-k{margin-top:0}
  .sheet a.sheet-book{max-width:300px}
  .sheet-end{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
  .sheet-foot{margin-top:0}
}
.sheet .sheet-close{position:absolute;top:16px;right:var(--pad);font-family:var(--text);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  background:none;border:0;padding:10px;cursor:pointer}
@media (max-width:860px){
  .bar-in{grid-template-columns:auto 1fr auto;gap:12px;min-height:58px}
  .bar-nav:not(.right){display:none}
  .mark{text-align:left;padding-left:0}
  .bar-nav.right a:not(.book){display:none}
  .opener{padding-top:58px}
}
/* ══════════════════════════════════════════════════════════════════
   Everything below was added when the site grew past one page.
   The rules above are Protocol's homepage, lifted out of its <style>
   block unchanged so that nine pages share one cascade instead of
   nine copies of it drifting apart.
   ══════════════════════════════════════════════════════════════════ */

/* ── inner page head ───────────────────────────────────────────────
   The bar has no background of its own, so an inner page has to buy
   its own headroom. padding-block, never the shorthand: a shorthand
   with a horizontal 0 cancels .wrap's padding-inline at equal
   specificity and puts the type against the screen edge. */
.pagehead{background:var(--wash);
  padding-block:calc(62px + clamp(26px,4vw,54px)) clamp(32px,4.5vw,58px)}
.crumb{margin:0 0 18px;font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--grey)}
.crumb a{color:var(--accent)}
.crumb a:hover{text-decoration:underline}
.pagehead h1{max-width:20ch;font-size:clamp(31px,4.2vw,56px)}
.pagehead .lede{margin-top:20px;max-width:58ch}
@media (max-width:860px){
  .pagehead{padding-block:calc(58px + clamp(22px,6vw,38px)) clamp(26px,6vw,40px)}
}

/* ── the age spectrum ──────────────────────────────────────────────
   Four decade bands said "30s to 60s and beyond", which is not the
   practice: she sees newborns. Nine bands, three up, so the first
   days and the ninth decade sit in the same table. */
/* Nine cells in a ruled box read as a table of contents for a product,
   which is the look the whole page was being judged for. The rule over
   each column says the same thing about grouping and says it quietly;
   the decade is doing the structural work anyway. */
.spectrum{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(22px,3vw,52px);row-gap:clamp(30px,3.6vw,54px)}
.spectrum>div{padding-top:16px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column}
.spectrum .d{display:block;font-family:var(--display);color:var(--accent);
  font-size:clamp(21px,2.3vw,30px);line-height:1.1;margin-bottom:12px}
.spectrum .d small{display:block;font-family:var(--text);font-size:10.5px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey);margin-top:6px}
.spectrum p{margin:0;color:var(--grey);font-size:14px;line-height:1.6}
@media (max-width:900px){.spectrum{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.spectrum{grid-template-columns:1fr}}

/* ── diagnoses ─────────────────────────────────────────────────────
   A list that has to carry eighty condition names and still be
   scannable: two columns of grouped lists, each group ruled off. */
.dx{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,3.6vw,54px) clamp(30px,4vw,64px)}
.dxg h3{padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.sec.deep .dxg h3{border-bottom-color:#4C6E6C;color:#fff}
.dxg ul{margin:0;padding:0;list-style:none}
.dxg li{color:var(--grey);font-size:14.5px;line-height:1.5;padding:5px 0;
  border-bottom:1px solid transparent}
.dxg li b{font-weight:500;color:var(--ink)}
.sec.deep .dxg li{color:#B6CCCA}
.sec.deep .dxg li b{color:#fff}
@media (max-width:760px){.dx{grid-template-columns:1fr}}

/* ── resource cards ───────────────────────────────────────────────
   Forms, payment, financing: four errands a patient runs before or
   after a visit, each one a destination rather than a paragraph. */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);padding:clamp(24px,2.8vw,36px);
  display:flex;flex-direction:column;gap:12px}
.sec.wash .card{background:var(--wash)}
.card .k{font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:0}
.card h3{margin:0}
.card p{margin:0;color:var(--grey);font-size:14.5px;flex:1}
.card .go{margin-top:4px;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent);align-self:flex-start;padding-bottom:3px}
.card .go:hover{color:var(--ink);border-bottom-color:var(--ink)}
.card .go.soon{color:var(--grey);border-bottom-style:dashed;
  border-bottom-color:var(--grey)}
@media (max-width:860px){
  .cards,.cards.three{grid-template-columns:1fr}
}

/* ── financing ────────────────────────────────────────────────────
   Two partners side by side. Neither logo is used: a wordmark we do
   not have permission to set is worse than her own typography. */
.fin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px)}
.fin>div{border:1px solid var(--rule);padding:clamp(26px,3vw,40px);
  display:flex;flex-direction:column;gap:14px}
.fin h3{margin:0;font-size:clamp(22px,2.3vw,30px)}
.fin .by{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey)}
.fin p{margin:0;color:var(--grey);font-size:14.5px}
.fin ul{margin:0;padding-left:1.1em;color:var(--grey);font-size:14.5px}
.fin li{padding:3px 0}
.fin .btn{align-self:flex-start;margin-top:4px}
@media (max-width:760px){.fin{grid-template-columns:1fr}}

/* ── pre & post care ──────────────────────────────────────────────
   One procedure per disclosure. A patient opens the one they are
   having and reads nine lines, instead of scrolling eight procedures
   they are not. */
.procs{border-top:1px solid var(--rule)}
details.proc{border-bottom:1px solid var(--rule)}
details.proc summary{display:flex;align-items:baseline;gap:14px;cursor:pointer;
  padding-block:clamp(18px,2vw,24px);list-style:none}
details.proc summary::-webkit-details-marker{display:none}
details.proc summary::after{content:"+";margin-left:auto;font-family:var(--display);
  font-size:22px;line-height:1;color:var(--accent);flex:none}
details.proc[open] summary::after{content:"\2013"}
details.proc summary h3{margin:0}
details.proc summary .tag{font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);flex:none}
.proc-body{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(22px,3vw,48px);padding-bottom:clamp(24px,3vw,36px)}
.proc-body h4{margin:0 0 12px;font-family:var(--text);font-size:10.5px;
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.proc-body ol{margin:0;padding-left:1.3em;color:var(--grey);font-size:14.5px}
.proc-body li{padding:4px 0}
@media (max-width:760px){.proc-body{grid-template-columns:1fr;gap:22px}}

/* A clinical instruction published under her name is hers, not ours. */
.clinical{border-left:2px solid var(--accent);background:var(--wash);
  padding:clamp(18px,2.2vw,26px);margin-top:clamp(28px,3.4vw,44px);
  font-size:14px;color:var(--grey);max-width:68ch}
.clinical strong{color:var(--ink);font-weight:500}

/* ── journal ──────────────────────────────────────────────────────── */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,48px)}
.post{display:flex;flex-direction:column;gap:12px;padding-top:20px;
  border-top:1px solid var(--ink)}
.post .k{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.post h3{margin:0}
.post p{margin:0;color:var(--grey);font-size:14.5px}
.post .when{font-size:12px;color:var(--grey);letter-spacing:.04em}
.post:hover h3{color:var(--accent)}
@media (max-width:860px){.posts{grid-template-columns:1fr}}

/* ── article ──────────────────────────────────────────────────────── */
/* A photograph at the head of a post. Seven of the eleven have one; the
   rest have nothing in her library that is actually about them, and a
   decorative picture over a piece of clinical writing reads worse than
   none at all. Wider than the 64ch text column and sharing its left
   edge, so the two line up as a step rather than a stack of boxes. The
   ratio is reserved here because every import is cropped to 3:2, which
   is what stops the headline jumping when the image lands. */
.post-art{margin:0 0 clamp(30px,4vw,46px);max-width:820px}
.post-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;background:var(--wash)}
.prose{max-width:64ch}
.prose p{margin:0 0 1.15em;color:#302E2B;font-size:16.5px;line-height:1.78}
.prose h2{font-size:clamp(22px,2.4vw,31px);margin:clamp(34px,4vw,54px) 0 .55em}
.prose h3{margin:clamp(26px,3vw,38px) 0 .5em;font-size:clamp(18px,1.8vw,22px)}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.3em;color:#302E2B;
  font-size:16.5px;line-height:1.72}
.prose li{padding:3px 0}
.prose strong{font-weight:600}
.prose .first{font-size:18px;color:var(--grey)}
.prose hr{border:0;border-top:1px solid var(--rule);margin:clamp(34px,4vw,52px) 0}
.byline{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  margin-top:22px;font-size:12px;letter-spacing:.04em;color:var(--grey)}
.byline .dot{width:3px;height:3px;border-radius:50%;background:var(--rule)}

/* ── men's care ──────────────────────────────────────────────────── */
.mens{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)}
.mens>div{padding-top:18px;border-top:1px solid currentColor}
.mens h3{margin:0 0 10px}
.mens p{margin:0;color:var(--grey);font-size:14.5px}
.sec.deep .mens p{color:#B6CCCA}
@media (max-width:860px){.mens{grid-template-columns:1fr}}

/* ── a plain two-up for insurance / what to bring ───────────────── */
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px)}
.twoup h3{margin:0 0 14px}
.twoup ul{margin:0;padding-left:1.2em;color:var(--grey);font-size:15px}
.twoup li{padding:4px 0}
.plans{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.plans span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--grey);border:1px solid var(--rule);padding:7px 12px}
@media (max-width:760px){.twoup{grid-template-columns:1fr}}

/* ── a quiet inline link inside body copy ───────────────────────── */
.ln{color:var(--accent);border-bottom:1px solid var(--rule)}
.ln:hover{border-bottom-color:var(--accent)}

/* Four posts in a three-up grid left one card stranded at a third width
   on its own row. Two-up for the index; three-up stays for the
   "keep reading" rails, which only ever hold two or three. */
.posts.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.posts.two{grid-template-columns:1fr}}

/* The procedure summary laid h3 + a 310px flex:none duration tag + the
   "+" in one flex row. On a 390px phone that overflowed to 412px, the
   page scrolled sideways, and because a fixed element's containing
   block grows to the scroll width, .bar and .sheet reported 438px too
   — they looked like two more bugs and were the same one.
   Below 760 the tag drops to its own row and the "+" stays put. */
@media (max-width:760px){
  details.proc summary{display:grid;grid-template-columns:1fr auto;
    align-items:baseline;column-gap:14px}
  details.proc summary h3{grid-column:1;grid-row:1}
  details.proc summary::after{grid-column:2;grid-row:1;margin-left:0}
  details.proc summary .tag{grid-column:1;grid-row:2;margin-top:7px}
}

/* The bar is fixed and, by request, has no background at all, so an
   anchor jump drops its target straight underneath it. #pay and #forms
   landed 54px from the top under a 58px bar on a phone and read as
   clipped headings; the section anchors cleared it by 4px, which is
   luck rather than clearance. */
section[id],.card[id],details[id]{scroll-margin-top:clamp(78px,9vw,96px)}

/* ── the journal, once it became a blog ───────────────────────────── */
/* These components only exist because posts are now generated from
   markdown: a topic filter needs topics to filter, previous/next needs
   to know the order, and the lead card needs an index that knows which
   post is newest. Four hand-built files could not have had any of them. */

.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pill{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 15px;border:1px solid var(--rule);border-radius:999px;
  color:var(--grey);white-space:nowrap;transition:color .18s,border-color .18s}
.pill:hover{color:var(--ink);border-color:var(--ink)}
.pill.on{background:var(--accent);border-color:var(--accent);color:#F4F2EF}

/* The newest note leads. Everything the same size is an index with no
   opinion about what to read first. */
.post.lead{display:grid;grid-template-columns:1.15fr 1fr;
  column-gap:clamp(28px,5vw,72px);row-gap:10px;align-items:start;
  padding-top:24px;border-top:2px solid var(--ink);
  margin-bottom:clamp(40px,5vw,68px)}
.post.lead .k{grid-column:1}
.post.lead h3{grid-column:1;font-size:clamp(25px,3.1vw,40px);line-height:1.12;
  max-width:22ch}
.post.lead p{grid-column:2;grid-row:1/span 3;font-size:16.5px;align-self:start}
.post.lead .when{grid-column:1}
@media (max-width:860px){
  .post.lead{grid-template-columns:1fr}
  .post.lead p{grid-column:1;grid-row:auto;font-size:15px}
}

/* Previous and next, which is the whole difference between a post that
   is a dead end and a blog somebody reads two of. */
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);
  margin-top:clamp(44px,5vw,70px);padding-top:26px;
  border-top:1px solid var(--rule)}
.pnav a{display:flex;flex-direction:column;gap:9px}
.pnav .next{text-align:right}
.pnav.one{grid-template-columns:1fr}
.pnav.one .next,.pnav.one .next .t{text-align:left;margin-left:0}
.pnav .k{font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.pnav .t{font-family:var(--display);font-size:clamp(17px,1.7vw,21px);
  line-height:1.3;max-width:26ch}
.pnav .next .t{margin-left:auto}
.pnav a:hover .t{color:var(--accent)}
@media (max-width:600px){
  .pnav{grid-template-columns:1fr;gap:24px}
  .pnav .next,.pnav .next .t{text-align:left;margin-left:0}
}

.also{margin-top:clamp(44px,5vw,70px);padding-top:26px;
  border-top:1px solid var(--rule)}
.also .label{margin-bottom:22px}

.prose blockquote{margin:clamp(28px,3.4vw,44px) 0;padding-left:clamp(18px,2vw,28px);
  border-left:2px solid var(--accent);font-family:var(--display);
  font-size:clamp(18px,1.9vw,23px);line-height:1.46;color:var(--accent)}
.prose blockquote p{font-size:inherit;color:inherit;line-height:inherit;margin:0}

/* ── Cherry, wired to the practice rather than to a placeholder ──── */
/* Her live site has had Cherry's widget installed with the slug from
   Cherry's own documentation still in it, so "See if you qualify" has
   been sending her patients to pay.withcherry.com/uniquecherryslug.
   The fallback below is what shows when no slug is configured here —
   deliberately, because a default would repeat exactly that bug. */
.cherry{margin-top:clamp(30px,3.6vw,48px)}
.cherry-ask{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:baseline;
  padding:20px 24px;background:var(--wash);border-left:2px solid var(--accent)}
.cherry-ask p{margin:0;font-size:14.5px;color:var(--grey);max-width:62ch}
.cherry-mount:empty{display:none}

/* A card whose real destination the practice has not given us yet says so
   in a line of its own, rather than quietly routing somewhere else. */
.soon-note{margin:0 0 14px;font-size:14px;color:var(--grey);
  padding-left:12px;border-left:2px solid var(--rule)}

/* A heading that exists for the outline rather than the layout.
   Every listing on this site ran h1 straight into h3 group titles, so a
   screen reader got the page title and then six unnamed groups, and the
   heading outline had a hole in it. Naming the section fixes both without
   changing anything on screen. Not display:none, which would take it out
   of the accessibility tree too. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0}

/* ── a button must never be the colour of what is behind it ───────── */
/* .btn is cream border on cream text, written for the dark closing band.
   Dropped on a light section it is invisible — which is exactly what
   happened on /payment-plans: "See if you qualify" rendered as a pale
   grey box and "Compare with CareCredit" could not be read at all.
   The convention is .btn.dark on light grounds, and this makes forgetting
   it merely redundant rather than invisible. */
.pagehead .btn,
.sec:not(.deep) .btn,
.opener .btn{border-color:var(--ink);color:var(--ink);background:none}
.pagehead .btn.fill,
.sec:not(.deep) .btn.fill,
.opener .btn.fill{background:var(--ink);color:var(--paper)}
.pagehead .btn:hover,
.sec:not(.deep) .btn:hover,
.opener .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── the bar needs something behind it once the page moves ────────── */
/* It was transparent at every scroll position, and the items only
   switched between ink and cream depending on the band underneath. That
   works over a flat band and fails over everything else: on a phone the
   nav sat directly on top of a black CTA and on photographs, and could
   not be read at either. Transparent over the hero, where it was
   designed to be; a real surface from the moment you scroll. */
.bar{transition:background-color .22s ease, box-shadow .22s ease,
     backdrop-filter .22s ease}
.bar.stuck{background:rgba(244,242,239,.92);
  box-shadow:0 1px 0 var(--rule), 0 6px 24px rgba(27,26,24,.05)}
@supports (backdrop-filter:blur(10px)){
  .bar.stuck{background:rgba(244,242,239,.78);backdrop-filter:saturate(1.5) blur(12px)}
}
/* Once there is a light surface the items are always ink, whatever band
   happens to be passing underneath. */
.bar.stuck .bar-nav a,.bar.stuck .menu-btn{color:var(--grey);text-shadow:none}
.bar.stuck .bar-nav a:hover{color:var(--ink)}
.bar.stuck .mark{color:var(--ink);text-shadow:none}
.bar.stuck .bar-nav a.book{color:var(--ink);border-color:var(--ink)}
.bar.stuck .bar-nav a.book:hover{background:var(--ink);color:var(--paper)}
/* .bars is an 18x9 transparent span; its two lines are drawn by ::before
   and ::after, which already take currentColor. Setting a background on
   the span itself filled that whole box solid — the black rectangle that
   appeared beside "Menu" the moment the bar gained a surface. The lines
   follow .menu-btn's colour on their own, so there is nothing to set. */
@media (prefers-reduced-motion:reduce){.bar{transition:none}}

/* .opener-img img already sets height:auto, and .portrait img sets a
   clamped height on purpose. An extra rule naming both at the same
   specificity, later in the file, only took the portrait crop away. */

/* ── keyboard: where you are, and a way past the bar ──
   The stylesheet had no focus rule at all, so the only focus ring was the
   browser's — black, and therefore invisible the moment the cursor landed
   on a teal band or the dark closing section. The accent reads on paper;
   on the dark grounds and on the bar before it has a background, paper
   reads instead. Offset keeps the ring clear of a filled button's edge. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sec.deep :focus-visible,.close :focus-visible,.portrait :focus-visible,
.bar:not(.stuck) :focus-visible{outline-color:var(--paper)}

/* Tabbing in used to mean tabbing through the whole bar and the menu
   before reaching a word of the page. */
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:var(--pad);top:10px;background:var(--ink);color:var(--paper);
  padding:11px 18px;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;outline:2px solid var(--paper);outline-offset:-5px}

/* The footer's third row is quieter than the two above it. */
.foot.social{font-size:13px;color:var(--grey)}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── updates: her Google posts, on her own site ────────────────────
   Not journal entries and deliberately not shaped like them. A Google
   post has no title, so there is nothing to set as a heading — the
   date leads, the first sentence carries, and the rest follows it. */
.updates{max-width:1000px}
.upd{display:grid;grid-template-columns:minmax(0,.26fr) minmax(0,1fr);
  gap:clamp(18px,3.4vw,56px);padding:clamp(26px,3vw,40px) 0;
  border-top:1px solid var(--rule)}
.upd:first-child{border-top:0;padding-top:0}
.upd .k{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grey)}
/* .upd-body p is (class, element) and was beating a bare .upd-lead on
   max-width, so the opening sentence ran the full measure. */
.upd-body .upd-lead{font-family:var(--display);font-weight:400;
  letter-spacing:-.008em;font-size:clamp(18px,1.85vw,22px);line-height:1.34;
  margin:0 0 14px;max-width:40ch;color:var(--ink)}
.upd-body p{margin:0 0 12px;color:var(--grey);max-width:62ch}
.upd-body p:last-of-type{margin-bottom:0}
.upd .src{display:inline-block;margin-top:14px;font-size:11px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--rule);padding-bottom:3px}
@media (max-width:760px){
  .upd{grid-template-columns:1fr;gap:12px}
}