/* ═══════════════════════════════════════════════════════════════════
   Footer — the details, then the name.

   Two halves and a rule. On top, four ways to reach the firm, set as
   equal quarters of a twelve-column grid. Under them, the name at the
   size a name is worth, running the full width of the page — the last
   thing on screen and the only thing at that scale anywhere on the site.

   Shared by index.html and contact.html, so nothing in here may assume
   what is above it.

   The page has spent its whole length refusing to draw boxes. Nothing
   here is boxed either: one hairline above the legal line, and the type
   does the rest.

   Inherits every token from style.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ the ground ══════════════════════════════════════════════════
   The footer is brown — the brand's deepest bronze, the one tone in the
   palette that was previously only ever used as ink. It used to be
   --ink, a half-shade off the paper, which said "a different room" so
   quietly that on most screens it said nothing. A footer is the one
   place a page can afford to change ground entirely: nothing scrolls
   past it, so there is no seam to defend further down.

   Everything inside then has to flip, and it flips by redefining the
   tokens here rather than by rewriting the twenty-odd rules below.
   Custom properties inherit, so every `var(--bone)` and `var(--hair)`
   already written in this file resolves against these values inside
   .ftr and against the page's own outside it. Two consequences worth
   knowing: a rule added below needs no special casing to be correct,
   and the light set cannot drift out of step with the dark one,
   because there is only one set of names.

   The colours are not the page's inverted. On paper, --bone-dim is
   near-black body text; here it is a white at 80%, which is a different
   relationship — reversed type needs to sit slightly back from its
   ground or it buzzes, where dark type on white wants all the contrast
   it can get. Measured ratios are on each value below; the quietest
   clears 6.2:1 and the contact details clear 13.8:1.
   ─────────────────────────────────────────────────────────────────── */
.ftr{
  position:relative;
  /* Its own value rather than --bronze-dp, which is a brand ink used
     for fills and marker strokes elsewhere and should not be dragged
     darker to suit one surface.

     Taken down and desaturated together, which is the pair that matters
     — dropping only the lightness would have given a deeper version of
     the same orange-brown, and the complaint about that tone was never
     that it was too light on its own. #4A2E14 sat at 57% saturation, a
     furniture-catalogue brown; this is 15% at a lower lightness, which
     is closer to dark earth. It reads as a ground the page ends on
     rather than as a colour the page is wearing. */
  --ftr-ground:#2C2219;
  background:var(--ftr-ground);
  padding-top:clamp(3.5rem,11vh,7.5rem);
  /* the wordmark is fitted to the width; a sub-pixel remainder must
     never become a horizontal scrollbar */
  overflow:hidden;

  /* ── the type set, flipped ──────────────────────────────────────
     --bone        the numbers, the addresses, the studio name
     --bone-dim    the legal line
     --bone-faint  anything quieter still
     --bronze-lt   labels, and the colour a link answers in
     --hair        the one rule above the legal bar

     --olive is deliberately not overridden: the sign-off is the same
     green it is on every other page, and on this brown it carries
     about 9:1 — the accent finally has a ground worth sitting on.

     Every ratio above improved when the ground went darker, so nothing
     here needed re-tuning; the numbers are simply the new ones. */
  --bone:       #F7F3ED;   /* 13.8:1 */
  --bone-dim:   rgba(247,243,237,.80);   /*  9.2:1 */
  --bone-faint: rgba(247,243,237,.60);   /*  6.2:1 */
  --bronze-lt:  #E8C49B;   /*  9.2:1 */
  --bronze:     #E8C49B;
  --bronze-hi:  #F0D3B2;
  --hair:       rgba(247,243,237,.16);
}

/* ═══ the columns ═════════════════════════════════════════════════ */
.ftr__cols{
  padding-inline:var(--gut);
  /* Close. The word below is the same object as the details above it,
     not a second section, so this is set to the distance that keeps the
     capitals off the last line of type and no more. */
  padding-bottom:clamp(1.25rem,3vh,2rem);

  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(2.25rem,5vh,3.25rem) clamp(1.25rem,2.4vw,2rem);
}

/* Even quarters. They can be equal because the mail column does not need
   the display size — it is set a step down for measure, and at that size
   the longest address sits inside a quarter with room to spare. Equal
   columns mean the grid stays invisible, which is the whole argument of
   the page above. */
.ftr__col{ grid-column:span 3 }

/* ── label / value ────────────────────────────────────────────────── */
/* The same voice the eyebrows upstairs use: small, wide-tracked, bronze.
   #C89A70 on #16161A is ~7:1, so it clears AA at this size rather than
   relying on the value beneath it to carry the meaning. */
.ftr__lbl{
  font-size:var(--fs-micro);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--bronze-lt);
  margin-bottom:.7rem;
}
.ftr__val + .ftr__lbl{ margin-top:clamp(1.4rem,3vh,2rem) }

/* Playfair and not the site's usual Marcellus, for one reason: Marcellus
   draws its zero as a full round O. In a name that is invisible; in
   designfirms01@gmail.com and in 98717 86023 it is an address and a
   phone number that get typed back wrong. Playfair's zero is a narrow
   oval, unmistakable beside its o and its O — and it is the face of the
   wordmark below, so the whole footer speaks in one voice. */
.ftr__val{
  font-family:var(--display-hi);
  font-weight:400;
  font-size:var(--fs-lede);
  line-height:1.4;
  color:var(--bone);
}
.ftr__val + .ftr__val{ margin-top:.15rem }

/* The mail column sets a size down. Not a hierarchy decision — an
   address is simply longer than a name, and holding it at the display
   size would either wrap it or force the column wider than the grid can
   spare. */
.ftr__col--mail .ftr__val{
  font-size:var(--fs-body);
  overflow-wrap:anywhere;
}

/* ── the numbers ──────────────────────────────────────────────────
   The phone numbers come off the display face and onto the sans.

   Playfair earned the rest of this footer — the note above is still
   right about its zero — but it ships oldstyle figures, and oldstyle
   figures are drawn for running prose: the 3, 4, 7 and 9 hang below the
   baseline and the 6 and 8 rise above it, so a line of them undulates.
   That is exactly what you want inside a sentence and exactly what you
   do not want in a number somebody has to read back one digit at a
   time. "+91 98733 87266" was arriving as a decorative flourish rather
   than as something dialable.

   tabular-nums on top of lining-nums, so every digit occupies the same
   advance width and the three numbers stack into a column that lines up
   digit under digit. It costs nothing and it is the difference between
   a list of numbers and three unrelated strings.

   The addresses and the social names stay on Playfair. They are words,
   which is what that face is for, and the split is the point: in this
   footer the display face carries names and the sans carries data. */
.ftr__col--call .ftr__val,
.ftr__col--wa .ftr__val{
  font-family:var(--sans);
  font-weight:300;
  font-variant-numeric:lining-nums tabular-nums;
  font-size:var(--fs-lede);
  letter-spacing:.02em;
}

/* ── links ────────────────────────────────────────────────────────── */
/* inline-block with vertical padding rather than a taller line-height:
   the padding grows the hit area without opening a gap inside the type,
   which is what a taller line box would have done. */
.ftr__link{
  display:inline-block;
  padding-block:.35rem;
  color:inherit;
  /* The underline is painted, not a border — a background gradient
     follows the line boxes if an address ever does wrap, where a
     pseudo-element rule would sit under the whole block.

     background-origin makes the gradient measure the content box rather
     than the padding box, so it sits on the foot of the type and stays
     there when the padding below changes with the pointer type. */
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-origin:content-box;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .3s var(--ease-out), color .3s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .ftr__link:hover{
    color:var(--bronze-lt);
    background-size:100% 1px;
  }
}
/* Touch devices fire :hover on tap, so the wipe above is gated behind a
   real pointer. This is the feedback that replaces it — instant, and it
   cannot be mistaken for a hover that stuck. */
.ftr__link:active{ color:var(--bronze-lt) }

/* 44×44 is a touch requirement, not a mouse one, so it is asked for
   where a finger is doing the aiming. It has to be met at the small end
   of the type's clamp — which is exactly the phone, where the numbers
   are also the likeliest thing on the page to be tapped. .75rem clears
   44px against the shortest line box here (the mail column's .95rem at
   1.4), and the extra margin keeps two stacked numbers 8px apart so a
   near miss doesn't dial the other office. */
@media (pointer:coarse){
  .ftr__link{ padding-block:.75rem }
  .ftr__val + .ftr__val{ margin-top:.4rem }
}

/* ── socials ──────────────────────────────────────────────────────── */
/* The mark, then the handle, one account per row. The network name used
   to be set here beside the handle; the logo says the same thing in a
   quarter of the width, which is what buys the handle room to be read at
   the size of the addresses in the column beside it rather than the
   .78rem it was squeezed to before. */
.ftr__link--social{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  /* Handed to the handle instead — see below. */
  background-image:none;
  transition:color .3s var(--ease-out);
}
/* flex:none so a long handle wrapping cannot squeeze the mark. Sized a
   step above the type it sits with: matched to the cap height the glyph
   reads as a letter in the word rather than as a logo beside it. */
.ftr__glyph{
  display:block;
  flex:none;
  width:1.2rem; height:1.2rem;
  fill:currentColor;
}
/* The email column's size, not the display size the other values take.
   A handle is the same kind of thing as an address — a literal string
   somebody is about to type — and it is set to match one. */
.ftr__handle{
  font-size:var(--fs-body);
  letter-spacing:.02em;
  /* The painted underline every other link in this footer carries, moved
     off the link and onto the words. Drawn across the whole link it runs
     under the glyph too, where it reads as a rule struck through the
     mark rather than as an underline. */
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .3s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .ftr__link--social:hover .ftr__handle{ background-size:100% 1px }
}

/* ═══ the name ════════════════════════════════════════════════════ */
/* Fitted to the width of the page, in CSS, with the script only
   correcting the remainder.

   The word is sized as a fraction of the container's own width: the
   divisor is its measured width in ems at this tracking, so 100cqw ÷
   divisor is the size at which it is exactly one container wide.
   Container units and not vw, because 100vw is the
   viewport including the scrollbar and includes neither the margin
   below nor whatever gutter a future layout puts around it — cqw is
   this element's real content width, whatever is outside it.

   Two things fall out of sizing by measurement rather than by metrics:
   the line box is the same height before and after Playfair Display
   arrives, so the block does not resize when the webfont swaps in; and
   if the script never runs, the mark is still the right size.

   aria-hidden: the firm's name is in the nav, in the legal line below,
   and in the page title. A fourth reading teaches a screen reader
   nothing. */
.ftr__mark{
  container-type:inline-size;
  margin-inline:clamp(.75rem,1.6vw,1.5rem);
  padding-bottom:clamp(1.25rem,3.5vh,2.5rem);
  user-select:none;


  /* Wipes open from the top on enter — the same device every figure on
     the page uses. Long for a UI transition, but this plays once, at the
     end of the document, and it is the reveal of the name rather than a
     control responding to a press. */
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease-out) .12s;
}
.ftr.is-in .ftr__mark{ clip-path:inset(0 0 0 0) }

.ftr__word{
  display:block;
  font-family:var(--display-hi);
  font-weight:400;
  font-optical-sizing:auto;
  /* Held under 1 so the line box is not much taller than the capitals
     inside it. At this size the default leading would open a band of
     dead space above and below the word that no amount of padding
     tuning could account for. */
  line-height:.82;
  letter-spacing:-.01em;
  text-transform:uppercase;
  white-space:nowrap;
}
/* The divisor is measured, not derived: ARCOS sets 3.176em wide at this
   tracking. Change the word, or the tracking above, and it has to be
   measured again — the script will correct a wrong one at runtime, but
   the frame before the script runs would be wrong.

   Grey, not bone. At this size a solid bone ARCOS was the brightest
   thing on the page and pulled the eye straight past the numbers above
   it, which are the part of this section anyone actually came for. Set
   back into the ground, it reads as the name the page is printed on
   rather than as a headline — and the contact details become the
   lightest type in the footer, which is the right order.

   No optical pull to the left edge: the word is fitted flush to its
   advance width, and .ftr__mark's own margin makes the few px of
   sidebearing read as part of it. */
/* Written as a literal rather than a token because it is neither ink
   nor a tint of one — it is the ground itself, lifted. On paper that
   was brown at 28%; on brown it is the paper at 13%. The percentage
   drops because a light ghost on a dark ground reads far stronger than
   a dark one on a light ground at the same alpha, and the point of this
   word is that it sits behind the numbers rather than in front. */
.ftr__word--a{
  color:rgba(247,243,237,.13);
  font-size:calc(100cqw / 3.176);
}

/* ═══ legal ═══════════════════════════════════════════════════════ */
.ftr__legal{
  margin-inline:var(--gut);
  border-top:1px solid var(--hair);
  padding-top:clamp(1rem,2.4vh,1.5rem);
  /* The floating contact button parks bottom-right. It takes itself out
     of the way when this section is on screen (js/transformation.js), but
     it is a fixed element over a fixed corner and the inset costs
     nothing. */
  padding-bottom:calc(clamp(1rem,2.4vh,1.5rem) + env(safe-area-inset-bottom));

  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between;
  gap:.5rem clamp(1rem,3vw,2.5rem);

  font-size:var(--fs-fine);
  letter-spacing:.04em;
  color:var(--bone-dim);
}
.ftr__legal p{ margin:0 }

/* Copyright and build credit, kept together on the left so the bar
   stays a two-part bar. Dropped into three children of a
   space-between row the credit would have landed in the middle of the
   line, which is the one position in a legal bar nobody reads. */
.ftr__legal-l{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.35rem clamp(.9rem,2.4vw,1.6rem);
}

/* The quietest line on the site, and deliberately. A studio credit
   under a client's name is a signature in the corner of a drawing: it
   should be findable by anyone looking for it and invisible to everyone
   else, so it takes the same size and colour as the copyright beside it
   and earns its contrast only from the name itself. */
.ftr__by{ color:var(--bone-dim) }
/* The name carries .ftr__link as well, so it answers a pointer with the
   same underline sweeping out from the left that every other link in
   this footer uses. It only needs to say the two things the shared rule
   leaves to the caller: that it is the name in the line, and that it is
   the part worth reading. */
.ftr__by-n{
  color:var(--bone);
  letter-spacing:.06em;
}

@media (pointer:coarse){
  /* The legal bar sets .72rem — shorter than the addresses above it, so
     the .75rem the shared rule adds lands this one at about 40px. A
     hair more clears 44. */
  .ftr__by .ftr__link{ padding-block:.9rem }
}

/* the tagline, one last time, in the face it is meant to be read in */
/* Green, like every other line on the site set in this hand — the one
   accent that comes out of the logo mark rather than out of the bronze.
   See the --olive note in style.css for why it is not the mark's own
   pistachio. */
.ftr__sign{
  font-family:var(--script);
  /* Sized up about a quarter from the Nothing You Could Do setting.
     Alex Brush draws small on its em — a low x-height under tall
     ascenders — so the same font-size reads noticeably lighter than
     the hand it replaced. This holds the optical size the layout was
     built around. */
  font-size:var(--fs-lede);
  letter-spacing:0;
  color:var(--olive);
}

/* ═══ entrance ════════════════════════════════════════════════════ */
/* Parked here, opened by js/footer.js on enter. Staggered by 60ms per
   column — enough to read as a sequence, short enough that the last
   column is up 180ms after the first and nobody is waiting on it.
   Nothing is disabled while this plays; every link is already live. */
.ftr__col{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:calc(var(--i,0) * 60ms);
}
.ftr.is-in .ftr__col{ opacity:1; transform:none }

/* No script, no observer, nothing to open any of it. Same fallback the
   collage sections use — the class is removed in <head> before paint, so
   this only ever applies when JS is genuinely off. */
.no-js .ftr__col{ opacity:1; transform:none }
.no-js .ftr__mark{ clip-path:none }

/* ═══ responsive ══════════════════════════════════════════════════ */

/* Tablet — halves, two rows of two. A quarter of 1024px is 217px against
   an address that sets 202px at its smallest clamp, and a 15px margin is
   not one worth shipping. */
@media (max-width:1024px){
  .ftr__col{ grid-column:span 6 }
}

/* Phone — one column. */
@media (max-width:620px){
  .ftr__col{ grid-column:span 12 }
  .ftr__cols{ gap:clamp(1.75rem,4vh,2.5rem) }

  .ftr__legal{ flex-direction:column; align-items:flex-start }
}

/* Landscape phones have almost no height. The mark is the one thing here
   that can afford to give some back. */
@media (max-height:480px) and (orientation:landscape){
  .ftr{ padding-top:clamp(2rem,8vh,3.5rem) }
  .ftr__mark{ padding-bottom:1rem }
}

/* ═══ reduced motion ══════════════════════════════════════════════ */
/* style.css already collapses every duration to nothing, which would
   leave the parked states snapping into place on enter. Open them
   outright instead: nothing here moves, and nothing waits for an
   observer. */
@media (prefers-reduced-motion:reduce){
  .ftr__col{ opacity:1; transform:none }
  .ftr__mark{ clip-path:none }
}

/* ═══ the name, sewn ══════════════════════════════════════════════ */
/* js/stitch.js redraws the wordmark as a single stitched thread on a
   canvas over it, and pushes the stitches about under the cursor. The
   <span> stays exactly where it is — it is what the canvas measures the
   font, the size and the position from, and it is what is left if the
   script never runs. Only its ink is taken away.

   Both ends of the thread are declared here rather than in the script,
   so the effect stays on the theme's tokens. Rest is the same grey the
   word was already set in: at rest the picture is unchanged, only the
   means of drawing it. Pulled out of line a stitch warms to bronze and
   comes forward out of the ground at the same time — the alpha is part
   of the blend, not just the hue. */
.ftr__mark{
  /* Matched to .ftr__word--a above, for the reason given in its note:
     at rest the canvas has to redraw exactly the word it replaced, so
     if one of these two moves the other has to move with it. --pull
     resolves against the footer's own --bronze-hi, which on this ground
     is a pale bronze rather than the page's darkest one. */
  --stitch-rest:rgba(247,243,237,.30);
  --stitch-pull:var(--bronze-hi);
  position:relative;
}
.ftr__stitch{
  position:absolute; inset:0;
  display:block;
  width:100%; height:100%;
  /* Signals that the word answers the cursor. The rest of the page is
     read, not handled; this is the one thing on it that is not. */
  cursor:crosshair;
  touch-action:pan-y;      /* a drag across it still scrolls the page */
}
/* visibility, not display: the box has to keep its size and position,
   because both are what the canvas is drawn from. */
.is-stitched .ftr__word{ visibility:hidden }

/* No canvas, no thread — and the word is simply the word again. */
.no-js .ftr__word{ visibility:visible }

/* ═══ the contact dock, on brown ═══════════════════════════════════
   contact.html parks the dock inside this footer. Its own stylesheet
   colours it for paper, and three of those choices invert badly once
   the ground goes dark — so they are corrected here, next to the change
   that caused them, rather than left for whoever next opens dock.css.

   The panel is the interesting one. dock.css lifts it a few percent
   TOWARD bone to read as raised, on the argument that a panel darker
   than its ground is a hole rather than an object. That argument is
   still right; it is the direction that flips. Lifting toward bone on
   brown means lifting toward light, so the same 5% dark wash that
   raised it on paper now sinks it.
   ─────────────────────────────────────────────────────────────────── */
.ftr .dock__row{
  background:rgba(247,243,237,.10);
  /* The shadow goes to black. It was brown at 14%, which on paper was a
     soft grey and on this ground is the ground — a shadow the same hue
     as what it falls on does not exist. */
  box-shadow:
    0 18px 44px -20px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(247,243,237,.14),
    inset 0 1px 0 rgba(247,243,237,.22);
}

/* No blur available. dock.css substitutes the flat tone the blur
   resolves to; on brown that tone is a lightened brown, not #EFEBE4 —
   which would have put a near-white slab behind icons that are now
   themselves light. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ftr .dock__row{ background:#3B322A }
}

/* The tooltip keeps its bone panel — light on brown is exactly right
   for a thing that pops. Only its label needs saying: it was set in
   --black, which is the paper token, and paper on bone is nothing at
   all. */
.ftr .dock__tip{ box-shadow:0 8px 22px -10px rgba(0,0,0,.5) }
.ftr .dock__tip-t{ color:var(--bronze-dp) }