/* Lev Developments — blueprint lockup for the home hero.
   Scoped to .hh-logo-img only: inner-page .brand-logo renders at 40px tall,
   where these dimension annotations would be unreadable noise. The art is
   white-on-transparent, so it sits on whatever navy is behind it.

   Sized down from a 78px cap: the masthead is the first fixed cost in a hero
   that now has to land inside one viewport, and every pixel here is a pixel the
   drawing below cannot have. The width tracks the height at the artwork's own
   3.35:1, so the lockup never stretches. */
.hh-logo-img{
  background-image:url("/assets/lev-logo-blueprint.webp");
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  height:clamp(42px,4.4vw,66px);
  width:clamp(140px,14.7vw,221px);
}

/* .hh-masthead::after (a dashed drafting rule under the logo and the nav) and
   ::before (a short drop tick where that rule met the hero's sheet frame)
   were here, both drawn for the paper band. The band is navy again and both
   pseudos are spent on the full brass title-block frame instead (styles.css,
   title-block frame section) — the frame's own bottom rule already does the
   job this datum line did, so recolouring it brass would have drawn two
   competing lines along the same edge. Gone rather than recoloured. */

/* ---------------------------------------------------------------------------
   Ambient drafting guide.

   One line, drawn slowly across the lower third and then let go. The cycle is
   long enough (26s) that it reads as something happening on a drawing board
   rather than a background animation, and the peak opacity is low enough that
   it is easy to miss entirely — which is the intent.
   --------------------------------------------------------------------------- */
.hh-datum{
  position:absolute;
  left:0;
  bottom:22%;
  height:1px;
  width:min(46vw,620px);
  transform-origin:left center;
  transform:scaleX(0);
  opacity:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,.5) 12%,
    rgba(255,255,255,.5) 88%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
  z-index:1;
  animation:hh-draw 26s ease-in-out infinite;
}
/* A tick riding the leading edge, so the line reads as being drawn rather than
   wiped in. */
.hh-datum::after{
  content:"";
  position:absolute;
  right:0;
  top:-4px;
  width:1px;
  height:9px;
  background:rgba(255,255,255,.55);
}
@keyframes hh-draw{
  0%      {transform:scaleX(0);opacity:0}
  6%      {opacity:.5}
  26%     {transform:scaleX(1);opacity:.5}
  44%     {transform:scaleX(1);opacity:.5}
  60%     {transform:scaleX(1);opacity:0}
  60.01%,100%{transform:scaleX(0);opacity:0}
}

/* .hh-annot and .hh-annot-tick were here: the upright label on a dimension line
   that filled the gap between the hero's two columns. The hero is two columns
   again, but the gap is the breathing room between the copy and the drawing
   now, and a dimension line through it would be one more thing in the space
   that makes the split readable. Neither class is in the markup. */

/* ---------------------------------------------------------------------------
   Scroll cue. Sits on the hero's bottom edge with a rule running out either
   side, so it reads as a note on the drawing rather than a floating button.
   --------------------------------------------------------------------------- */
.hh-scroll{
  position:absolute;
  left:50%;
  bottom:clamp(18px,3vh,34px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--sans);
  font-size:clamp(.54rem,.66vw,.62rem);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  text-decoration:none;
  z-index:4;
  white-space:nowrap;
}
.hh-scroll::before,
.hh-scroll::after{
  content:"";
  width:clamp(40px,7vw,110px);
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.3));
}
.hh-scroll::after{background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,0))}
.hh-scroll svg{width:11px;height:16px;opacity:.7;animation:hh-nudge 3.4s ease-in-out infinite}
.hh-scroll:hover{color:rgba(255,255,255,.75)}
@keyframes hh-nudge{
  0%,72%,100%{transform:translateY(0)}
  84%{transform:translateY(4px)}
}
@media (prefers-reduced-motion:reduce){
  .hh-scroll svg{animation:none}
}

@media (prefers-reduced-motion:reduce){
  /* The guide is the only ambient motion on the page; stopping it leaves the
     hero completely still rather than merely slower. */
  .hh-datum{animation:none;display:none}
}

/* ---------------------------------------------------------------------------
   Hero typography and the primary CTA.

   These live here rather than in styles.css because every one of them is
   hero-only — .cta-box appears on no other page. This file loads after
   styles.css, so the two .hh-lead / .cta-box overrides below win on the
   cascade without !important, and a 39KB shared stylesheet stays untouched.
   --------------------------------------------------------------------------- */

/* Sits above the headline and says what the company is in one line. Small
   enough that the eye still reaches the headline first — the rule to its left
   does the locating, so the words themselves can stay quiet. */
.hh-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--sans);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:clamp(.56rem,.72vw,.66rem);
  color:rgba(206,224,255,.62);
  margin:0 0 clamp(14px,calc(6.9vh - 38px),48px);
}
.hh-eyebrow::before{
  content:"";
  width:clamp(20px,3vw,40px);
  height:1px;
  background:var(--line);
  flex:none;
}
/* The one brass touch on the eyebrow: the bullet only. The rule to its left
   (::before, below) stays the quiet white it always was — brassing that too
   would put two accents on one short line and neither would read as the
   accent. */
.hh-eyebrow i{font-style:normal;color:var(--brass)}

/* Lifts the headline off the grid so it sits above the drawing rather than on
   it. Three shadows doing three jobs:

   A tight, nearly-opaque one for contact — this is what separates the letter
   edges from the grid lines running behind them, and it is the reason the type
   stops looking printed onto the background.

   A mid one for the drop, offset further down.

   A wide, faint one for ambient occlusion, no offset — the darkening a raised
   object casts all round itself.

   All three are the page's own navy rather than black. Black would grey the
   blue and read as a bevel effect; the background colour reads as depth. */
.hh-title{
  text-shadow:
    0 1px 2px rgba(1,15,40,.55),
    0 6px 16px rgba(1,15,40,.45),
    0 0 42px rgba(1,15,40,.5);
  margin:0 0 clamp(18px,calc(9.1vh - 50px),64px);
}

/* ---------------------------------------------------------------------------
   Vertical rhythm.

   The steps between these elements were fixed pixels set against a headline
   that scales with the viewport, so on a tall screen the block bunched at the
   top and on a short one it crowded. Each gap is a clamp on vh, so the column
   opens up as there is room for it and closes when there is not.

   The gaps also step in size deliberately — rule to copy is the smallest,
   copy to action larger, action to the process note largest — so the block
   reads as three groups rather than five evenly spaced lines.

   Every one of these came down by roughly a third for the one-screen rule: the
   hero has to finish inside 768px of viewport height, .home-hero is
   overflow:hidden, and what does not fit is not scrolled to, it is cut off.
   The proportions between the gaps are unchanged, so the grouping survives the
   tightening. See the same pass on .hh-body's padding in styles.css.

   The middle term is now a line rather than a bare vh, because a bare vh could
   not tell the two problems apart. At 768px of viewport the hero has no slack
   at all and every gap has to stay where the one-screen pass left it; at 1080
   and above there was around 300px of dead navy sitting in the middle of the
   hero because the copy block is far shorter than the box it is centred in.
   calc(k*vh - c) is zero-growth at 768 by construction (the constant is chosen
   so the line passes through the old value there) and opens up from there, and
   the max term catches it again before the gaps turn into holes on a tall
   screen. Same five gaps, same order of size, same three groups: only the rate
   at which they open changes. The arithmetic per gap, at 768/1080/1440:

     eyebrow  15.0 / 36.5 / 48      rule   17.2 / 42.5 / 56
     title    19.9 / 48.3 / 64      lead   25.3 / 61.2 / 80
     process  23.5 / 57.8 / 76
   --------------------------------------------------------------------------- */
.hh-rule{margin:0 0 clamp(16px,calc(8.1vh - 45px),56px)}

/* Only the hero-specific half is left here: a blue-white instead of plain white
   so the headline keeps the only pure white in the block, and the vh-based gap
   below it that the rhythm above describes.

   The type scale this used to override with — .15em tracking on a .83rem
   uppercase line — belonged to the old four-word strapline. The copy is a
   two-sentence promise now and its scale is set once, in styles.css, for a
   sentence. Keeping a second opinion here would have quietly beaten it: this
   file loads later. */
.hh-lead{
  color:rgba(219,231,252,.66);
  margin:0 0 clamp(22px,calc(11.5vh - 63px),80px);
}

/* An annotation on the drawing, not a strapline: below the body copy in size,
   with the separators dimmer than the words so it scans as one line rather
   than as four items. Deliberately not badges or icons. */
.hh-process{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:clamp(.5rem,.64vw,.58rem);
  color:rgba(206,224,255,.4);
  margin:clamp(16px,calc(11vh - 61px),76px) 0 0;
}
.hh-process i{font-style:normal;color:rgba(206,224,255,.22);padding:0 2px}

/* The primary call to action. Still a drawn rectangle rather than a filled
   marketing button — the added weight comes from a brighter border, a lit top
   edge and a faint plate behind the label, never from colour. */
.cta-box{
  position:relative;
  border-color:var(--white-55);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:background-color .25s ease,border-color .25s ease,
             box-shadow .25s ease,transform .2s ease;
}
.cta-box:hover,
.cta-box:focus-visible{
  background:rgba(255,255,255,.11);
  border-color:var(--white);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 0 0 1px rgba(255,255,255,.06),
    0 6px 20px rgba(1,15,40,.4),
    0 0 18px rgba(255,255,255,.09);
}
.cta-box:active{transform:translateY(0)}
.cta-box svg{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.cta-box:hover svg,
.cta-box:focus-visible svg{transform:translateX(5px)}

/* Corner brackets, sitting just outside the box. Drawn with two gradients per
   corner on one pseudo-element per side, so the whole treatment costs no extra
   markup and scales with the button. */
.cta-box::before,
.cta-box::after{
  content:"";
  position:absolute;
  left:-5px;
  right:-5px;
  height:9px;
  pointer-events:none;
  background-image:
    linear-gradient(var(--white-55),var(--white-55)),
    linear-gradient(var(--white-55),var(--white-55)),
    linear-gradient(var(--white-55),var(--white-55)),
    linear-gradient(var(--white-55),var(--white-55));
  background-size:9px 1px,1px 9px,9px 1px,1px 9px;
  background-repeat:no-repeat;
  transition:opacity .25s ease;
  opacity:.55;
}
.cta-box::before{
  top:-5px;
  background-position:left top,left top,right top,right top;
}
.cta-box::after{
  bottom:-5px;
  background-position:left bottom,left bottom,right bottom,right bottom;
}
.cta-box:hover::before,
.cta-box:hover::after,
.cta-box:focus-visible::before,
.cta-box:focus-visible::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .cta-box,.cta-box svg{transition:none}
  .cta-box:hover{transform:none}
  .cta-box:hover svg{transform:none}
}

/* ---------------------------------------------------------------------------
   The brass variant: the single accented control on the first screen.

   Transparent, not filled — the concept draws it as a drawn brass rectangle
   with the blueprint grid reading straight through it, the same treatment as
   the frame and the logo keyline, so all three read as one drafting language.
   It used to be the one filled paper control on the page; the fill is gone
   because the accent color itself is now what carries the weight.

   Declared after .cta-box on purpose: both are a single class, so source order
   is what decides. The base rule already uppercases and tracks the label, so
   the markup's "See Our Work" sets as SEE OUR WORK; this only changes surface.
   font-weight and tracking are carried over unchanged from the retired paper
   variant — they were tuned for stem weight (700 for real stem weight on a
   high-contrast face, tracking pulled back from the base .22em to .2em) and
   that tuning has nothing to do with which colour sits behind the label.

   font-size is NOT carried over. 1.06rem became 1.17rem for contrast, not for
   looks. The paper variant was FILLED, so its label sat on solid cream and
   whatever the page drew behind the button was irrelevant. This variant is
   transparent, so the blueprint grid reads through and the label's real
   background is the grid line rather than the navy base: measured off rendered
   pixels with the label painted out, the backdrop under the glyph band is
   rgb(30,61,110) in every row, where #C8892E gives 3.63:1 — not the 4.92:1 a
   flat #04265c predicts. At 1.06rem the label renders 16.96px, which is NORMAL
   text to WCAG and owes 4.5:1, so it failed. 1.17rem renders 18.72px, and
   >=18.66px at weight 700 is LARGE text, where the bar is 3:1 and 3.63:1
   passes. The house rule is raise weight or size and never dilute the colour
   toward the background; weight is already 700, so size was the only lever
   left. Do not put this back to 1.06rem without either refilling the button or
   re-measuring what the grid actually does behind the glyphs.

   No box-shadow at all, on the rule or its hover state: the retired paper
   variant carried the drafting-plate double-inset-shadow trick and a pair of
   navy drop shadows, both of which existed to sell a raised paper plate. There
   is no plate now, so there is nothing for a shadow to describe — it would
   read as a stray fog around a flat line drawing. */
.cta-box--brass{
  background:transparent;
  color:var(--brass);
  border-color:var(--brass-line);
  font-weight:700;
  font-size:1.17rem;
  letter-spacing:.2em;
  box-shadow:none;
}
.cta-box--brass:hover,
.cta-box--brass:focus-visible{
  background:rgba(200,137,46,.12);
  border-color:var(--brass);
  box-shadow:none;
}
/* Corner brackets, repainted brass at full strength (the concept draws them
   solid, not at the base rule's .55 rest opacity) and given a small diagonal
   gusset just inside each corner — a mitred accent the concept cuts across
   the inside of the L, on the same two background layers rather than new
   markup. Two more gradient layers stacked on the four the base rule already
   draws, mirrored left/right by flipping the gradient's angle; the position
   list has to be redeclared in full because background-position is positional
   across every layer in the image list, not just the ones a rule adds. */
.cta-box--brass::before,
.cta-box--brass::after{
  opacity:1;
  background-image:
    linear-gradient(var(--brass),var(--brass)),
    linear-gradient(var(--brass),var(--brass)),
    linear-gradient(var(--brass),var(--brass)),
    linear-gradient(var(--brass),var(--brass)),
    linear-gradient(45deg,transparent 46%,var(--brass) 46%,var(--brass) 54%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,var(--brass) 46%,var(--brass) 54%,transparent 54%);
  background-size:9px 1px,1px 9px,9px 1px,1px 9px,7px 7px,7px 7px;
}
.cta-box--brass::before{
  background-position:left top,left top,right top,right top,1px 1px,calc(100% - 8px) 1px;
}
.cta-box--brass::after{
  background-position:left bottom,left bottom,right bottom,right bottom,1px calc(100% - 8px),calc(100% - 8px) calc(100% - 8px);
}

/* ---------------------------------------------------------------------------
   The hero phone number.

   A real control, not a line of decoration: 44px of height so a thumb has
   something to land on, the glyph sized off the digits so the two read as one
   object, and a rule that draws under the number on hover and focus. The rule
   is on the text only — the icon is a flex item, so the decoration passes it by
   — which is the same treatment the contact page's phone link already uses.

   Secondary to the brass button by weight, not by volume: white on navy
   beside an accented outline reads as the second option without having to be
   whispered.
   --------------------------------------------------------------------------- */
.hh-phone{
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  padding:0 2px;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1rem,1.35vw,1.2rem);
  letter-spacing:.14em;
  color:var(--white);
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:6px;
  text-decoration-thickness:1px;
  transition:text-decoration-color .25s ease;
}
/* Brass, full strength, static — no hover fade-in. The icon used to rise from
   .75 to 1 opacity on hover/focus, a glass-era cue for "this is interactive."
   The concept draws the glyph brass at rest, so the affordance the colour
   itself now provides would fight a fade that dims it back toward the base
   navy the moment the pointer moves away. */
.hh-phone svg{width:1.05em;height:1.05em;flex:none;color:var(--brass);opacity:1}
.hh-phone:hover,
.hh-phone:focus-visible{text-decoration-color:var(--white-70)}

@media (prefers-reduced-motion:reduce){
  .hh-phone{transition:none}
}

@media (max-width:520px){
  /* At this width the eyebrow wraps and its rule strands on the first line.
     Drop the rule and let the words carry it. */
  .hh-eyebrow{letter-spacing:.24em}
  .hh-eyebrow::before{display:none}
  .hh-process{letter-spacing:.2em}
}

/* ---------------------------------------------------------------------------
   House studies: the toggle panel in the hero's right column.

   These were three links in a strip under the hero, and before that three
   callouts on a cream sheet. The strip was honest but wrong: a visitor
   comparing a spec house to a barndominium wants the same frame twice with a
   different drawing in it, not three small pictures side by side. So the three
   share one stage and a switch, and the second hero column has something to
   hold again.

   The drawings are 1040x238, 1040x364 and 1040x274, three different aspect
   ratios. A stage that sized itself to whichever drawing was showing would
   change height on every toggle, which is the one thing a switch must never do.
   The stage gets one height instead and art.css's background-size:contain
   letterboxes each elevation inside it: same datum, same frame, zero shift.
   --------------------------------------------------------------------------- */
/* The panel is one object with one datum. The tab row and the link used to be
   left-aligned to the column while the drawing sat centred in the stage, so the
   two disagreed by whatever the stage had spare, and the elevations make that
   worse: each PNG carries a label on its left and a dimension line on its
   right, so the house itself does not sit on the drawing's own left edge.

   Centred, not left-registered. background-position:left center on .art would
   have been the left-rail answer, but it moves nothing: under
   background-size:contain all three elevations are width-bound in this stage
   (the widest needs W/2.86 of height and the stage is taller than that at every
   desktop size), so each one already spans the full stage width and there is no
   horizontal slack for a position to act on. Centring the tab row and the link
   is the only lever that actually changes registration, and it is the one that
   survives a stage that does letterbox horizontally on an odd window shape,
   because a centred drawing and a centred control share an axis either way.

   max-width was a flat 720px, which is what held the artwork down: the stage
   was 720px wide at both 1920 and 2560 and every drawing was width-bound in it,
   so height alone could never make the art bigger. It is tied to the viewport
   height now, at roughly 2.74 times the stage height, which is just under the
   tallest elevation's 2.86 aspect. That keeps every variant width-bound (full
   width, letterboxed vertically, zero horizontal drift) at any screen shape,
   and the grid track caps it below that on a 1080p screen anyway. */
.hh-studies{
  position:relative;
  z-index:2;
  justify-self:end;
  width:100%;
  max-width:clamp(620px,104vh,1500px);
  text-align:center;
}

/* Drafting registers rather than pill buttons: hairline boxes on the sheet. */
.hs-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:0 0 clamp(10px,1.4vh,18px);
}
.hs-tab{
  min-height:40px;
  padding:0 clamp(11px,1.1vw,18px);
  border:1px solid var(--paper-line);
  border-radius:0;
  background:transparent;
  color:var(--paper);
  font-family:var(--sans);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:clamp(.56rem,.7vw,.66rem);
  cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.hs-tab:hover{
  border-color:rgba(255,255,255,.8);
  color:#fff;
  background:rgba(255,255,255,.06);
}

/* The selected register is filled, not merely brighter. A change of opacity
   alone is the kind of "selected" a visitor has to squint to be sure about,
   and this control has to answer which drawing is on screen at a glance.
   Brass fill now, not white — the concept's one other navy-on-accent
   pairing besides the logo keyline. font-weight 600, not the 500 this used
   to carry: at 9-11px uppercase on .18em tracking the stem is thin enough
   that navy ink on a mid-value brass loses definition at 500, and the fix is
   more weight, not a lighter brass — diluting the colour toward the
   background would just trade one contrast problem for another. Checked
   this does not widen the tab row enough to wrap it at 1366x768. */
.hs-tab.is-active{
  background:var(--brass);
  border-color:var(--brass);
  color:#04265c;
  font-weight:600;
}
/* A real ring, offset so it clears the fill on the active tab rather than
   drawing white on white. Never outline:none without something to replace it.
   White at every state, transparent or brass-filled: the previous white fill
   made a white-on-white ring only a hazard on .is-active, but brass is dark
   enough at 0.82 alpha that white still reads clearly against it too, so one
   ring colour still covers both states. */
.hs-tab:focus-visible{
  outline:2px solid var(--white);
  outline-offset:3px;
}

/* One height for all three, tuned against the hero's one-screen budget: large
   enough that the elevation reads as a drawing rather than a thumbnail, small
   enough that the whole hero still lands inside 768px of viewport. The vh term
   is what keeps the two honest on a short screen; the vw term stops it from
   running away on a wide short one.

   24vh was the old middle term and it was the wrong lever pulled too gently.
   The stage rendered 259px at 1080p inside a column with 600px of room, and
   because .hh-studies was capped at 720px wide the drawing was width-bound in
   it, so those 259px were mostly letterbox rather than drawing. Widening the
   panel is what enlarged the art; this raise is what stops the taller
   elevations from being cropped out of their own frame by that new width.

   38vh lands 292 / 410 / 547 at 768 / 1080 / 1440. The right column tops out at
   387 / 515 / 659 including the tabs and the link, which stays under the copy
   column at every one of them, so none of this costs the hero a pixel of
   height. The floor rose 170 to 190 with it and the ceiling 300 to 560, both to
   keep the same shape at the ends of the range. */
.hs-stage{
  position:relative;
  height:clamp(190px,min(38vh,22vw),560px);
}

/* The per-variant aspect-ratio in art.css has to come out of the sizing or it
   fights the fixed stage height. Two classes beat one, so the cascade settles
   this without !important.

   visibility, not opacity on its own: a drawing at zero opacity is still in the
   accessibility tree, so a screen reader would read all three elevation labels
   every time. visibility:hidden takes the inactive two out of it, and it is
   transitioned alongside opacity so the fade still gets its 280ms before the
   element disappears. */
.hs-stage .art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s;
}
.hs-stage .art.is-active{opacity:1;visibility:visible}

/* The contextual link under the drawing: the one place the panel says where the
   active study goes. Same quiet treatment as the site's other inline links:
   a hairline under the words, an arrow that steps on hover. */
.hs-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:32px;
  margin-top:clamp(12px,1.6vh,22px);
  font-family:var(--sans);
  font-size:clamp(.62rem,.76vw,.72rem);
  letter-spacing:.04em;
  color:var(--white-70);
  transition:color .25s ease;
}
/* The rule is on the words only. The arrow is a sibling flex item, so it stays
   clear of the underline instead of being struck through by it. Dashed, per
   the concept, rather than the site's usual solid hairline — the hover
   behaviour underneath (solid white on interaction) is unchanged. */
.hs-link-text{
  border-bottom:1px dashed var(--line);
  padding-bottom:3px;
  transition:border-color .25s ease;
}
.hs-link span[aria-hidden]{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.hs-link:hover,
.hs-link:focus-visible{color:var(--white)}
.hs-link:hover .hs-link-text,
.hs-link:focus-visible .hs-link-text{border-color:var(--white)}
.hs-link:hover span[aria-hidden],
.hs-link:focus-visible span[aria-hidden]{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  /* The crossfade is the only motion the panel has, so removing it leaves an
     instant swap, which is what the fixed stage was built to make possible.
     Nothing jumps when the transition goes away. */
  .hs-stage .art{transition:none}
  .hs-tab,.hs-link,.hs-link-text,.hs-link span[aria-hidden]{transition:none}
  .hs-link:hover span[aria-hidden],
  .hs-link:focus-visible span[aria-hidden]{transform:none}
}

@media (max-width:900px){
  /* Stacked under the copy at this width. The drawing earns more height because
     it now has the full column instead of the narrower half of two. */
  .hh-studies{max-width:none;margin-top:clamp(26px,5vw,40px)}
  .hs-stage{height:clamp(150px,34vw,240px)}
}

/* A filter used to sit here recolouring .art to a mid navy, because the drawings
   sat on a cream sheet. They sit on a navy strip now, so that filter would
   render them near-invisible against their own background. Without it the
   artwork draws in the near-white it was built in. */

@media (max-width:900px){
  .hh-scroll{display:none}
  .hh-datum{bottom:14%;width:min(70vw,420px)}
}

/* A @media (hover:none) rule used to hide the study strip's hover-only
   underline on touch. The panel that replaced it has no hover-only affordance
   to hide: the tabs show their state in the fill, and the link's rule is drawn
   standing rather than on hover. So the rule is gone rather than retargeted. */