/* ═══════════════════════════════════════════════════════════════════════════
   AC STUDIOS LOCKUP
   "AC Studios by Angie!" — option 05, the highlight band, set in Gabarito.

   Drop this into the AC Studios stylesheet and add Gabarito to the font link:

     <link rel="stylesheet"
           href="https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap">

   The ital axis is not optional. The small "by" is italic, and without a real
   italic face the browser synthesises one by slanting the upright, which on a
   geometric sans comes out visibly wrong. One extra axis in the same request.

   Markup is at the bottom of this file.
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-logo{
  /* Three knobs. Everything else is derived. */
  --ac-band:#FFD23F;     /* the marker highlight */
  --ac-ink:#141414;      /* "AC Studios" */
  --ac-by:#141414;       /* the small italic "by" */

  display:inline-flex;align-items:baseline;gap:.3em;
  font-size:var(--ac-logo-size,1.75rem);
  line-height:1;                     /* the band maths below depends on this */
  white-space:nowrap;
  text-decoration:none;
}

/* ───────────────────────────────────────────────────────────────────────────
   THE BAND
   Drawn as a background-image, not as a ::before with z-index:-1. A negative
   z-index child escapes to behind the nearest stacking context, which on a
   nav bar means it can land behind the bar itself and disappear. A background
   cannot do that.

   The two numbers are measured from Gabarito's own metrics, not eyeballed:
     unitsPerEm 1000, hhea ascent 940, descent -260, capHeight 681.
   Content area is therefore 1.2em. With line-height:1 the half-leading is
   (1 - 1.2) / 2 = -0.1em, so the baseline sits 0.84em below the top of the
   line box and the cap top sits at 0.159em. The band runs from a hair above
   the caps to a hair below the baseline:
     top    0.159 - 0.045 = 0.114em
     height 0.681 + 0.090 = 0.771em
   "AC Studios" has no descenders, which is why the band can stop at the
   baseline and still look complete.

   IF YOU CHANGE THE DISPLAY FACE, RECALCULATE THESE. A face with a different
   ascent or cap height will sit the band off the letters.
   ─────────────────────────────────────────────────────────────────────────── */
.ac-logo__name{
  font-family:"Gabarito",system-ui,sans-serif;
  font-weight:800;letter-spacing:-.03em;
  color:var(--ac-ink);
  padding-inline:.14em;
  background:linear-gradient(var(--ac-band),var(--ac-band)) no-repeat;
  background-size:100% .771em;
  background-position:0 .114em;
  border-radius:.04em;
}

.ac-logo__by{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-weight:400;font-style:italic;
  font-size:.3em;letter-spacing:.01em;
  color:var(--ac-by);opacity:.72;
}

/* THE ANGIE MARK
   Sized by height; the width follows from aspect-ratio, so the lockup scales
   from one number. The PNG has a solid white letter fill inside a black
   outline, so it needs no colour variants — see the ground rules below.
   1.02em rather than cap height (0.681em): the artwork carries its own padding
   plus the exclamation mark, so matching cap height makes it read undersized.
   translateY nudges it down because an inline-block sits its BOTTOM edge on
   the baseline, which leaves the drawing floating slightly high. */
.ac-logo__mark{
  display:inline-block;flex:none;
  height:1.02em;aspect-ratio:480/230;
  background:url("../../brand/angie-logo.png") center/contain no-repeat;
  transform:translateY(.12em);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* Only the signature moves on hover. Tilting the whole lockup would drag the
   band off the horizontal, and the band is the thing holding the logo level. */
@media (hover:hover){
  a.ac-logo:hover .ac-logo__mark{transform:translateY(.12em) rotate(-4deg) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  .ac-logo__mark{transition:none}
  a.ac-logo:hover .ac-logo__mark{transform:translateY(.12em)}
}

.ac-logo:focus-visible{outline:3px solid #2D5BE3;outline-offset:4px;border-radius:8px}

/* ───────────────────────────────────────────────────────────────────────────
   GROUNDS
   Put one of these classes on the SECTION, not on the logo, so a section can
   be recoloured in one place and the logo follows.
   ─────────────────────────────────────────────────────────────────────────── */

/* Yellow section. A yellow band on a yellow ground is invisible, so it goes
   white. Not a new colour: the portfolio footer already sets white shapes on
   the yellow band, so this is a move the system already makes. */
.on-yellow .ac-logo,.ac-on-yellow .ac-logo{--ac-band:#FFFFFF}

/* Dark section (#141414). Only the small italic "by" needs flipping. The band
   is its own surface so the name keeps its dark ink, and the Angie mark's
   white letter fill reads on dark with no change. */
.on-dark .ac-logo,.ac-on-dark .ac-logo{--ac-by:#FFFFFF}

/* Blue section. Same as dark — the band carries itself. */
.on-blue .ac-logo,.ac-on-blue .ac-logo{--ac-by:#FFFFFF}

/* ───────────────────────────────────────────────────────────────────────────
   SIZES
   One number per context. The lockup is wide, so the nav steps down twice.
   Measured widths, from Gabarito's own advance widths rather than estimated:
     1.9rem   241px   desktop
     1.5rem   190px   tablet
     1.15rem  146px   mobile, which clears a 390px bar with the menu button
   ─────────────────────────────────────────────────────────────────────────── */
.nav .ac-logo{--ac-logo-size:1.9rem}
@media (max-width:860px){ .nav .ac-logo{--ac-logo-size:1.5rem} }
@media (max-width:560px){ .nav .ac-logo{--ac-logo-size:1.15rem} }
.footer .ac-logo{--ac-logo-size:1.5rem}

/* ───────────────────────────────────────────────────────────────────────────
   THE SQUARE MARK
   The band colour becomes the icon ground, so the favicon is a reduction of
   the logo rather than a separate idea. Use the PNGs in brand/icons/ for the
   favicon and social profiles; this CSS version is for marks inside the page.
   ─────────────────────────────────────────────────────────────────────────── */
.ac-mark{
  display:grid;place-items:center;flex:none;
  width:var(--ac-mark-size,40px);aspect-ratio:1;
  background:#FFD23F;color:#141414;
  border:2px solid #141414;border-radius:22%;
  font-family:"Gabarito",system-ui,sans-serif;
  font-weight:800;letter-spacing:-.02em;line-height:1;
  font-size:calc(var(--ac-mark-size,40px) * .42);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARKUP

   Nav and footer, as a link:

     <a class="ac-logo" href="/" aria-label="AC Studios by Angie — home">
       <span class="ac-logo__name">AC Studios</span>
       <span class="ac-logo__by">by</span>
       <span class="ac-logo__mark"></span>
     </a>

   The aria-label carries the whole name, so the mark needs no label of its
   own. Do not also put alt text on the mark — a screen reader would then
   read the name twice.

   Not a link (for example in body copy):

     <span class="ac-logo" role="img" aria-label="AC Studios by Angie">
       <span class="ac-logo__name">AC Studios</span>
       <span class="ac-logo__by">by</span>
       <span class="ac-logo__mark"></span>
     </span>

   Square mark:

     <span class="ac-mark" role="img" aria-label="AC Studios"
           style="--ac-mark-size:56px">AC</span>

   Head, replacing the current favicon block:

     <link rel="icon" href="/brand/icons/favicon.ico" sizes="48x48">
     <link rel="icon" type="image/png" sizes="32x32" href="/brand/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/brand/icons/favicon-16.png">
     <link rel="icon" type="image/png" sizes="192x192" href="/brand/icons/favicon-192.png">
     <link rel="apple-touch-icon" href="/brand/icons/apple-touch-icon.png">
     <meta name="theme-color" content="#FFD23F">
   ═══════════════════════════════════════════════════════════════════════════ */