/* =====================================================================
   Core / contact.css — the Contact panel
   ---------------------------------------------------------------------
   SHARED, NOT COPIED. index.html carries its own inline copy of the rest
   of the chrome, deliberately — it owns the full viewport and answers to
   nothing in core/. This one file is the exception, for the same reason
   core/loader.* is: the panel is built from content/pages.json, it is
   about two hundred lines, and it is the single most drift-prone thing
   either page would carry. One artefact everywhere beats two disciplined
   copies. index.html <link>s this and imports core/contact.js, the way
   it already borrows core/tilt.js and core/menu-fit.js.

   DO NOT INLINE THIS INTO index.html "for consistency with the rest of
   the chrome." Consistency of FILE LAYOUT is not the thing being
   protected here; consistency of the panel between the home page and the
   interior pages is, and copying it is how that gets lost.

   The two pages name their tokens differently — index.html has --foam,
   --dur-s/-m/-l and --pad where core/site.css has --signal,
   --dur-fast/-med/-slow and --chrome-pad — so everything this file needs
   from its host is bridged once in the CONFIG block below, with a
   fallback for whichever page does not have it.
===================================================================== */

/* =====================================================================
   CONFIG — every tunable value the panel has is in this one block.

   The first group BRIDGES to whichever page this is running on. The rest
   belong to the component and are stated once, here, so the home page
   and the interior pages cannot end up with different panels.
===================================================================== */
#contactOverlay{
  /* ── bridged from the host page ─────────────────────────────────── */
  --c-ink:    var(--signal, var(--foam, #e2e6ea));   /* headings, values */
  --c-haze:   var(--haze, rgba(226,238,246,.54));    /* body prose */
  --c-dim:    var(--haze-dim, rgba(226,238,246,.30));/* labels */
  --c-line:   var(--line, rgba(226,238,246,.14));    /* hairlines */
  --c-warm:   var(--warm, #fff3e6);                  /* "lit" — hover only */
  --c-font:   var(--font-ui, var(--font, 'Syne', ui-sans-serif, system-ui, sans-serif));
  --c-pad:    var(--chrome-pad, var(--pad, clamp(18px, 3.4vmin, 34px)));
  --c-ease:   var(--ease, cubic-bezier(.22,.72,.2,1));

  /* ── the two new durations ──────────────────────────────────────────
     They live HERE rather than beside --dur-fast/-med/-slow because
     those exist twice — once in core/site.css and once inline in
     index.html — and a duration this component owns should not be a
     value that can differ between the two pages it runs on. There is a
     pointer to this block in core/site.css's motion tokens.

     Neither existing duration fits. --dur-fast (.22s) is the length of a
     hover answering; a whole panel arriving in it reads as a jump cut.
     --dur-med (.42s) is slower than the gesture being quoted — macOS
     zooms a window in about a quarter of a second, and past ~300ms the
     growth stops reading as a window opening and starts reading as
     something being presented to you.

     The exit is 65% of the entrance, which is the site's rule
     (DESIGN.md) and is also the asymmetry macOS itself has. */
  --dur-panel:     .26s;
  --dur-panel-out: .17s;   /* .26 * .65, rounded */

  /* ── the window's inset from the viewport ───────────────────────────
     The page underneath has to stay legible as a frame on all four
     sides — that inset is the whole of what makes this read as
     something opened OVER the page rather than as a page of its own.

     Measured off the reference: ~7.8% of the viewport's width and ~7.2%
     of its height, which is a larger gap left and right than top and
     bottom in absolute pixels. The clamps hold a usable frame on a
     phone, where the percentages alone would leave almost none. */
  --c-inset-x: clamp(16px, 7.5vw, 120px);
  --c-inset-y: clamp(16px, 7vh, 64px);

  /* ── the two voids ──────────────────────────────────────────────────
     The empty space is the design, and the two gaps are NOT equal: in
     the reference the space between the head row and the lede is ~25% of
     the panel's height and the space between the hairline and the bottom
     band is ~37%. Written as `fr` on the grid's empty tracks, so the
     proportion holds at any panel height and collapses to nothing on a
     viewport too short to spend it. Do not fill them. */
  --c-void-a: 25fr;
  --c-void-b: 37fr;

  /* ── the material ───────────────────────────────────────────────────
     The panel is transparent and the glass sheet (core/glass.js) reads
     through it. It is NOT a second sheet — there is one shader on the
     page and this is a window onto it, which is the only way it can read
     as glass at all (see core/glass-core.js: glass is a thing you see
     something ELSE through).

     --c-ground is how solid the panel's own backing is over that. Above
     about .7 the sheet stops coming through and this becomes a dark
     card; below about .4 the page behind competes with the words. */
  --c-ground:  .52;
  --c-blur:    18px;
  --c-sat:     1.12;

  /* how far the page outside the window is pushed back. Low on purpose:
     the frame is meant to stay readable, not to be dimmed out of the
     way. 0 is no scrim at all — the click target is still there. */
  --c-scrim:   .22;

  /* ── the zoom ───────────────────────────────────────────────────────
     Scale it grows from. Nearer 1 and there is no gesture; below about
     .8 the panel reads as flying in from a distance rather than opening
     out of the control that was pressed. NO overshoot: --c-ease never
     crosses 1, and a spring here would put a register on this page that
     nothing else on the site uses. */
  --c-scale-from: .86;

  /* THE BLUR IS DROPPED WHILE THE WINDOW MOVES, and restored when it
     lands. Two reasons, and the second is not negotiable:

       1. cost. Animating a transform on a backdrop-filtered element
          re-filters the backdrop every frame, and the backdrop here
          contains a live WebGL canvas.
       2. CORRECTNESS. The window fades as it grows, and an ancestor with
          opacity < 1 is a Backdrop Root — so for the whole of the
          transition the panel's "backdrop" would be the window's own
          empty box rather than the page. The blur would filter nothing.

     Set to `blur(var(--c-blur)) saturate(var(--c-sat))` to keep it live
     throughout and see (2) for yourself. */
  --c-blur-moving: none;
}

/* ── the panel's grid, the lede, and the signature ───────────────────
   PART OF THE CONFIG ABOVE, and still on #contactOverlay. The panel is
   the only thing that reads these; /contact sets its own lede as
   .page-lede in its own document and is not on this grid. */
#contactOverlay{
  /* THE TWELVE COLUMNS. Everything on the panel is placed against them
     — the head row and the four cells of the bottom band — so that what
     is on the right of the top row and what is on the right of the
     bottom one are given the same measure, instead of each ending up
     wherever its own content ran out.

     THE GUTTER IS 28px AND THE PADDING IS 34px, flat rather than
     clamp()ed: the panel is already inset from the viewport by
     --c-inset-x/y, so this is the margin inside a frame that has
     already been sized, and a second clamp inside the first only makes
     the column measure move for no reason anyone can see. The narrow
     layout below states its own, because at phone width the twelve
     columns are gone and the number is doing a different job. */
  --c-cols:     12;
  --c-col-gap:  28px;
  --c-grid-pad: 34px;

  /* THE LEDE. One register, the panel's full ink, and the lightest
     weight in the family — the line is a single sentence and is set as
     one. What gives it its weight is the measure and the void above it,
     not a second size inside it.

     THE SIZE IS A CEILING AT 36px, reached at about 1900px of viewport
     (1.9vw x 1900 = 36.1). Below that it comes down with the screen and
     never under 24, which is still clearly the largest thing on the
     panel next to the 12px labels.

     24ch IS A MEASURE, NOT A LINE COUNT. The copy will be rewritten,
     and the panel must not depend on a character count to hold its
     shape — a measure in ch breaks the sentence somewhere deliberate at
     any length. At 36px it is about four lines, which is what fills the
     band above the divider. */
  --c-lede-size: clamp(24px, 1.9vw, 36px);
  --c-lede-meas: 24ch;
  --c-lede-lh:   1.28;

  /* THE MARK'S CAP HEIGHT — and the only number it needs. The word's box
     is 267.46 x 100 with the 100 being the cap itself (assets/
     LOGO-SPEC.md), so this IS the cap height and --word-ratio in
     core/brand-mark.css gives the width. At 26px it is a signature the
     band can carry across two columns rather than a detail hung off the
     end of the prose — roughly twice the 12px labels, which is the step
     that makes it read as the studio's name and not as another one of
     them. */
  --c-logo-h: 26px;
}

/* =====================================================================
   THE CONTROL, IN THE FOURTH CORNER

   Bottom right. The site draws three corners — the mark top left, the
   menu top right, the sound bottom left — and this is the only one no
   page has ever claimed: the Works reel puts its two marks at the
   bottom CENTRE and the Studio pager sits at mid-height on both edges.
   The home page now keeps its sound in the bottom-left corner too, so
   the four corners are one grid on every page, at one --chrome-pad.

   #contactZone is a .corner, and the button is inside it — the mark's
   arrangement (#brand > a.ic). The class is what carries the chrome's
   shared arrival, departure and picked-tile dimming in both hosts; see
   the note in mountContact() in core/contact.js.

   IT IS NOT IN THE HEADER, AND THAT IS THE REASON IT IS HERE. The mark
   and the burger leave at 140px of scroll and stay gone (see THE HEADER
   GOES WITH THE TOP OF THE PAGE in core/site.js). Contact is the one
   control on this site that is most wanted at the BOTTOM of a long
   project page, which is where somebody actually decides to write. A
   control you have to scroll back up to reach is the mistake core/site.js
   already fixed once for the sound, and this is the same mistake.

   The safe-area inset is what keeps it clear of a phone's home
   indicator, where the system takes the touch and the button simply
   never answers. The other three corners add theirs the same way, in
   both hosts, so a phone's insets move all four together.

   SIZE AND INSET ARE THE CORNER GRID'S. The type is --corner-h
   (core/mark.css), on a line exactly that tall, so the button's box is
   the same height as the burger's and the sound's and sits on the same
   centre line as the sound across the bottom row. The negative right
   margin takes back the tracking the last letter carries after itself —
   letter-spacing is added after every glyph, the final one included —
   so the T, not an empty 0.22em past it, is what sits --chrome-pad from
   the edge.
===================================================================== */
#contactZone{
  position:fixed;z-index:40;       /* both hosts' .corner say the same */
  --c-btn-pad: var(--chrome-pad, var(--pad, clamp(18px, 3.4vmin, 34px)));
  bottom:calc(var(--c-btn-pad) + env(safe-area-inset-bottom, 0px));
  right: calc(var(--c-btn-pad) + env(safe-area-inset-right, 0px));
}
#contactBtn{
  position:relative;display:block;   /* the ::before hit area below hangs off this */
  font-family:var(--font-ui, var(--font, 'Syne', ui-sans-serif, system-ui, sans-serif));
  font-size:var(--corner-h, 12px);font-weight:500;line-height:1;
  letter-spacing:.22em;text-transform:uppercase;
  margin-right:-.22em;               /* the trailing tracking — see above */
  color:var(--haze, rgba(226,238,246,.54));
  /* .wl carries the waterline — the hairline wipe and the tracking
     opening — and exists identically in both stylesheets. Nothing about
     the hover state is stated here. */
}
/* The glyph is small, so the target is an invisible box around it rather
   than padding that would move the word. Same trick as the other three
   corners. */
#contactBtn::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px);
}
/* While the panel is open the control has been replaced by the close
   inside it, and two ways to shut one thing is one too many. It keeps
   its box so nothing reflows. */
body.contact-open #contactBtn{opacity:0;pointer-events:none}

/* =====================================================================
   THE OVERLAY
   The scrim, and the click-outside target. z-index 70 puts it over the
   chrome (40), over the Studio rack's pick scrim and over a wall page's
   opened picture (60), and under the transition veil (100) and the
   pointer (110) — so a navigation still seals over it and the cursor is
   still drawn on top of it.
===================================================================== */
#contactOverlay{
  position:fixed;inset:0;z-index:70;
  background:rgba(4,6,10,var(--c-scrim));
  opacity:0;
  transition:opacity var(--dur-panel-out) var(--c-ease);

  /* index.html's <body> is 10px/1, uppercase and tracked out — this
     panel must not inherit any of it. Stated rather than reset so the
     two pages render identically. */
  font-family:var(--c-font);
  font-size:12px;font-weight:400;line-height:1.65;
  letter-spacing:.01em;text-transform:none;
  color:var(--c-haze);
}
#contactOverlay[hidden]{display:none}
#contactOverlay.is-open{opacity:1;transition-duration:var(--dur-panel)}

/* =====================================================================
   THE WINDOW — the panel and its close control, as ONE OBJECT

   The close is outside the panel's box and inside this, so both scale
   from the same origin off the same transform. core/contact.js writes
   that origin — the centre of the control that was pressed — onto this
   element in the frame of the press. That is the whole effect: a panel
   that always grows from the middle of the screen is a modal, and one
   that grows from the button you just pressed is a window.

   ONLY transform AND opacity. A panel that animates its width or its
   inset drags the backdrop-filter and the shader behind it into a
   relayout and a repaint every frame.
===================================================================== */
#contactWindow{
  position:absolute;
  inset:var(--c-inset-y) var(--c-inset-x);
  display:flex;flex-direction:column;align-items:stretch;
  opacity:0;
  transform:scale(var(--c-scale-from));
  transform-origin:50% 50%;      /* replaced per press by contact.js */
  transition:transform var(--dur-panel-out) var(--c-ease),
             opacity   var(--dur-panel-out) var(--c-ease);
}
#contactOverlay.is-open #contactWindow{
  opacity:1;transform:none;
  transition-duration:var(--dur-panel);
}
/* will-change goes on ONLY while it moves. Left on permanently it would
   make this a Backdrop Root for good, and the panel inside it would
   never see the page again — see --c-blur-moving above. */
#contactOverlay.is-moving #contactWindow{will-change:transform,opacity}

/* =====================================================================
   THE PANEL
===================================================================== */
/* TWELVE COLUMNS AND FIVE ROWS, and everything on the panel is placed
   against them. The two wrappers the markup still has — .c-head and
   .c-foot — are display:contents, so their children sit directly on
   this grid: the head's three cells and the band's four are placed in
   one list of columns below, and what is at the right of the head row
   and what is at the right of the band are measured against the same
   twelve rather than against whatever each row divided up.

   THE LEDE'S ROW IS THE FLEXIBLE ONE. It was an auto row with a void
   above it; now it IS the void, and the lede is aligned to its end. The
   sentence therefore hangs from the divider and the empty space opens
   above it, between the head and the words, rather than being a fixed
   gap the sentence happens to sit under. An fr track's minimum is auto,
   so a long lede grows the track instead of overflowing it. */
#contactPanel{
  flex:1 1 auto;min-height:0;
  display:grid;
  grid-template-columns:repeat(var(--c-cols, 12), minmax(0, 1fr));
  column-gap:var(--c-col-gap, 28px);
  /* head · lede (bottom-anchored) · rule · void · band */
  grid-template-rows:auto var(--c-void-a) auto var(--c-void-b) auto;
  padding:var(--c-grid-pad, 34px);
  overflow:auto;

  background:rgba(5,6,7,var(--c-ground));
  border:1px solid var(--c-line);
  -webkit-backdrop-filter:blur(var(--c-blur)) saturate(var(--c-sat));
  backdrop-filter:blur(var(--c-blur)) saturate(var(--c-sat));
}
#contactOverlay.is-moving #contactPanel{
  -webkit-backdrop-filter:var(--c-blur-moving);
  backdrop-filter:var(--c-blur-moving);
}

/* ---------- the label register -------------------------------------------
   ONE of the panel's two registers, and everything that is not the lede
   is in it: uppercase, wide tracking, 12px. It is how this site says
   "monospace label" without a second typeface — the same thing the rail
   and the spec lists do. */
.c-label{
  font-size:12px;font-weight:500;line-height:1.2;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--c-dim);
}

/* ---------- the head row -------------------------------------------------
   CONTACT · VAL STUDIO · the Elsewhere stack, on columns 1-3, 5-8 and
   9-12.

   .c-head IS NOT A BOX. display:contents drops it out of the layout and
   leaves its three children as items of #contactPanel's grid, so the
   socials are placed on the panel's own columns rather than on a share
   of whatever the head row divided up. Their cell therefore ends on the
   same vertical the divider and the signature's cell do, at the panel's
   right edge.

   THE WORDMARK IS STILL GENUINELY CENTRED, and now by construction
   rather than by arithmetic: columns 5-8 are the middle four of twelve,
   so their midpoint IS the panel's, and justify-self:center holds the
   word there whatever is on either side of it. An empty Elsewhere
   cannot move it, because nothing about its position is derived from
   the other two cells any more. */
.c-head{display:contents}
.c-head-l{grid-column:1 / 4;  grid-row:1;min-width:0}
.c-head-c{grid-column:5 / 9;  grid-row:1;justify-self:center;color:var(--c-ink)}
.c-head-r{grid-column:9 / 13; grid-row:1;min-width:0}

/* ---------- Elsewhere ----------------------------------------------------
   LEFT-ALIGNED IN A RIGHT-HAND COLUMN, not right-aligned. Each row ends
   in an outbound arrow, and right-aligning would line the arrows up and
   let the names go ragged — which reads as a column of arrows rather
   than as a list of places. The reference does it this way and it is
   right.

   The hairline above the stack spans the COLUMN, not the panel: it is
   the head of this list, not a division of the whole window. */
.c-else{
  list-style:none;margin:0;padding:var(--c-pad) 2.5em 0 0;
  border-top:1px solid var(--c-line);
  display:flex;flex-direction:column;gap:.7em;
  align-items:flex-start;
  /* THE RULE IS THE HEAD OF THIS LIST, so it is as wide as the list and
     not as wide as the column it sits in. max-content sizes it to the
     longest row; the padding lets it overhang that by a little, which is
     what stops it reading as an underline of the first word. */
  width:max-content;max-width:100%;
}
.c-else a{
  display:inline-flex;align-items:flex-start;gap:.5em;
  color:var(--c-haze);
}

/* The outbound arrow. Drawn from two rules rather than set as a glyph so
   it inherits currentColor and sits on the cap height at any size — and
   because ↗ is a different weight in every fallback face.

   ON EXTERNAL LINKS ONLY. mailto: and tel: are not leaving the site;
   they hand off to another app on the same machine, and an arrow that
   claims otherwise is telling the reader something untrue.
   core/contact.js is what decides which rows get one. */
.c-out{
  flex:0 0 auto;position:relative;
  width:.62em;height:.62em;margin-top:.12em;
  opacity:.6;transition:opacity var(--dur-panel-out) var(--c-ease);
}
.c-out::before,.c-out::after{
  content:"";position:absolute;background:currentColor;
}
.c-out::before{                    /* the shaft */
  left:0;bottom:0;width:130%;height:1px;
  transform-origin:0 100%;transform:rotate(-45deg);
}
.c-out::after{                     /* the head, two strokes of one corner */
  right:0;top:0;width:100%;height:100%;
  background:none;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}
.c-else a:hover .c-out,
.c-else a:focus-visible .c-out{opacity:1}

/* ---------- the lede -----------------------------------------------------
   ONE REGISTER. Sentence case, large, the panel's full ink and the
   lightest weight in the family — and the one thing here that is not a
   label. There is no second size inside it and no markup in the copy
   that could put one there: what carries the sentence is its measure
   and the space above it.

   BOTTOM-ANCHORED, which is the row's doing and not the paragraph's.
   Its track is the flexible one (see #contactPanel), so align-self:end
   hangs the sentence from the divider and lets the void open between it
   and the head. A lede of two lines and a lede of five therefore both
   sit on the rule; only the gap above them changes.

   The columns end where the brief's do, four rows down — the left half
   of the panel is one measure whether it is holding the statement or
   the prose. --c-lede-meas caps it well inside that, so the span is the
   alignment and the measure is the reading. */
.c-lede{
  grid-column:1 / 8;
  grid-row:2;
  align-self:end;
  margin:0;max-width:var(--c-lede-meas, 24ch);
  font-size:var(--c-lede-size, clamp(24px, 1.9vw, 36px));
  font-weight:300;
  line-height:var(--c-lede-lh, 1.28);
  letter-spacing:.005em;
  text-transform:none;
  color:var(--c-ink);
}

/* the full-width division under it. Only drawn when there is something
   on both sides of it — see core/contact.js. */
.c-rule{
  grid-column:1 / -1;grid-row:3;
  height:1px;margin:var(--c-grid-pad, 34px) 0 0;background:var(--c-line);
}

/* ---------- the bottom band ----------------------------------------------
   FOUR CELLS ON THE PANEL'S OWN COLUMNS: the directory on 1-3, the
   brief on 4-7, the share note on 8-10, the signature on 11-12. Like
   .c-head, .c-foot is display:contents — the div groups the four in the
   markup and does nothing in the layout, so their columns are stated
   here in one list.

   THE GAPS ARE THE GRID'S. A flex row with one wide gap made the space
   between the directory and the prose a number to tune; on the grid it
   is the same 28px gutter as everywhere else, and what separates the
   four is that each has its own columns. */
.c-foot{display:contents}
.c-direct{
  grid-column:1 / 4;grid-row:5;align-self:start;
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:1.4em;
}
/* LABEL ABOVE VALUE, ONE ROW PER LINE — a directory, not a sentence, and
   the label and the value start on the same vertical. align-items is
   stated rather than left to `stretch` because the two are different
   sizes and different registers: EMAIL is 12px tracked wide and caps,
   val@valstudio.art is 12px set plain, and the only thing that makes
   them one row rather than two is that they begin at the same x. */
.c-direct a{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:.5em;text-align:left;color:var(--c-ink);
}
.c-direct .c-label,
.c-direct .c-value{display:block;text-indent:0}
.c-direct .c-value{font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--c-ink)}

/* THE SIGNATURE. The studio's mark, small and dim, at the right end of
   the band and sitting on the bottom of it — a thing signed rather than
   a thing to press. No href, no hover, nothing that answers a pointer:
   every other mark on this site lights under one, and this is the only
   one that must not, or it reads as a control that does nothing.

   SIX ELEMENTS, ONE PER STROKE, each cut by a polygon in
   core/brand-mark.css and filled with currentColor — the same mechanism
   the loading state and the home page's reveal use for the full word.
   No file is fetched and no path data is written here, so there is no
   third copy of the artwork to keep in step, and nothing that depends
   on an asset reaching the deployment.

   COLUMNS 11-12, justified to their end and aligned to the band's.

   ITS RIGHT EDGE IS THE PANEL'S — the same vertical the divider ends on
   and the same one the head row's right cell ends on. Not the Elsewhere
   stack's ink, which is left-aligned inside that cell on purpose (see
   .c-else): the signature lines up with the panel's own edge, which is
   a line the eye can actually find, rather than with a column of names
   whose left edge is set by the longest of them.

   align-self:end drops it to the foot of the band, so it sits on the
   line the directory's last value does while the prose beside it stays
   hung from the top. All of that is the grid's doing now, not a
   margin-left:auto against whatever measure the prose happened to
   have. */
.c-mark{
  grid-column:11 / 13;grid-row:5;
  justify-self:end;align-self:end;
  position:relative;display:block;
  height:var(--c-logo-h, 26px);
  width:calc(var(--c-logo-h, 26px) * var(--word-ratio, 2.6746));
  color:var(--c-dim);
}
.c-mark i{position:absolute;inset:0;background:currentColor}
.c-mark .wm-v-left  {clip-path:var(--word-v-left)}
.c-mark .wm-v-right {clip-path:var(--word-v-right)}
.c-mark .wm-a-left  {clip-path:var(--word-a-left)}
.c-mark .wm-a-right {clip-path:var(--word-a-right)}
.c-mark .wm-l-stem  {clip-path:var(--word-l-stem)}
.c-mark .wm-l-foot  {clip-path:var(--word-l-foot)}

/* THE BRIEF, columns 4-7. No max-width any more: the four columns ARE
   the measure, which is the point of putting the band on a grid — a ch
   cap on top of them would only make the prose stop short of the column
   it is supposed to fill. */
.c-note{grid-column:4 / 8;grid-row:5;align-self:start;min-width:0}
.c-note p{margin:0;color:var(--c-haze)}
.c-note p + p{margin-top:1.1em}

/* THE BRIEF'S FOOTNOTE — the section's own links (Services), after the
   prose. Same rows as the directory, built by the same helper, but a
   step quieter: label and value run on ONE line rather than stacking,
   and the value is in the prose's haze rather than the directory's ink.
   Direct is where the panel sends you; this is an aside to the
   paragraph above it, so it reads as part of the brief and not as a
   second directory. The hover is .wl's waterline, like every other row. */
.c-note-links{list-style:none;margin:1.4em 0 0;padding:0}
.c-note-links li + li{margin-top:.6em}
.c-note-links a{
  display:inline-flex;align-items:baseline;flex-wrap:wrap;
  column-gap:1em;row-gap:.3em;color:var(--c-haze);
}
.c-note-links .c-value{letter-spacing:.02em;color:var(--c-haze)}

/* THE SHARE NOTE, columns 8-10, and the only block in the band that
   names itself. The brief runs on from the lede and needs no heading;
   this is an aside to somebody who has already been round the Studio,
   and without a label it would read as a third paragraph of the brief
   that had wandered into the next column.

   THE LABEL SITS CLOSER TO ITS PARAGRAPH THAN THE PARAGRAPHS DO TO EACH
   OTHER (.9em against the brief's 1.1em), because it belongs to the
   words under it rather than dividing the column. Same 12px label
   register as EMAIL and LINKEDIN beside it, so the band reads as one
   row of things rather than as three unrelated treatments. */
.c-share{
  grid-column:8 / 11;grid-row:5;align-self:start;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:.9em;
}
.c-share p{margin:0;color:var(--c-haze)}
.c-share p + p{margin-top:1.1em}

/* ---------- the close ----------------------------------------------------
   Outside the panel, at its bottom-right — directly over the control
   that opened it, which is also where the hand already is. The reference
   puts it above the top-left corner; the origin here is the bottom-right
   corner, and a close diagonally opposite the point the window grew from
   stops the two reading as one object.

   It is a sibling of the panel rather than a child of it, so the
   window's transform carries both. */
.c-close{
  flex:0 0 auto;align-self:flex-end;
  margin-top:clamp(16px, 3.2vh, 34px);
  display:inline-flex;align-items:center;gap:.7em;
  font-size:12px;font-weight:500;line-height:1;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--c-haze);
}
/* the ✕, from two rules of the same hairline everything else here is
   made of, rather than a multiplication sign in whichever face loaded */
.c-x{position:relative;width:9px;height:9px;flex:0 0 auto}
.c-x::before,.c-x::after{
  content:"";position:absolute;left:0;top:50%;
  width:100%;height:1px;background:currentColor;
}
.c-x::before{transform:rotate(45deg)}
.c-x::after {transform:rotate(-45deg)}

/* =====================================================================
   THE SCROLL LOCK

   The gutter is the width of the scrollbar that just went away, measured
   once by core/contact.js. Without giving it back, the page under the
   panel jumps sideways as it opens.

   The second rule is for the things that are positioned against the
   RIGHT edge of the viewport: taking the scrollbar away widens the
   initial containing block, and a fixed element at `right:` would step
   outward by the gutter under a scrim you can see through.
   margin-right on an element positioned by `left:` does nothing, so one
   rule covers the two corners that need it and leaves the other two
   alone.
===================================================================== */
html.contact-open{overflow:hidden;padding-right:var(--c-gutter,0px)}
html.contact-open .corner{margin-right:var(--c-gutter,0px)}  /* #contactZone is one */

/* =====================================================================
   REDUCED MOTION — no scale at all, a plain opacity crossfade.

   The !important and the id selector are both load-bearing. Both
   stylesheets carry a blanket `*{transition-duration:.01ms!important}`
   in this same query, and without a MORE SPECIFIC !important the panel
   would not crossfade, it would pop — which is not what "reduced motion"
   asks for. It asks for less motion, not for none of the transition.
===================================================================== */
@media (prefers-reduced-motion: reduce){
  #contactWindow{
    transform:none !important;
    transition:opacity var(--dur-panel-out) linear !important;
  }
  #contactOverlay.is-open #contactWindow{
    transition-duration:var(--dur-panel) !important;
  }
  #contactOverlay{transition:opacity var(--dur-panel-out) linear !important}
  #contactOverlay.is-open{transition-duration:var(--dur-panel) !important}
}

/* =====================================================================
   NARROW

   The head row stops being three columns — there is no room for a
   centred wordmark between two others — and becomes the label and the
   wordmark on one line with the Elsewhere stack under them. The bottom
   band stacks for the same reason. Nothing about the motion changes: the
   window still grows from the control, which on a phone is near a corner
   of a nearly-full-screen panel, and that is what a window zooming out
   of a Dock icon does.
===================================================================== */
@media (max-width: 760px){
  #contactOverlay{
    --c-void-a:16fr;--c-void-b:22fr;
    /* 34px of padding and a 28px gutter are the measurements of a panel
       that is most of a desktop screen. Here the panel is most of a
       phone, and the same numbers would take a third of the width. */
    --c-grid-pad:20px;
    --c-col-gap:16px;
    /* the signature comes down with everything else — 26px is a
       signature across two of twelve columns, and the whole width of a
       phone column is a different proposition */
    --c-logo-h:16px;
  }
  /* TWO COLUMNS, NINE ROWS. The head's label and wordmark stay on one
     line because they are two short words; everything else is the full
     width and read down in the order the markup already has it, which
     is why .c-head and .c-foot being display:contents costs nothing
     here — the nine children are simply placed again. */
  #contactPanel{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:auto auto var(--c-void-a) auto var(--c-void-b) repeat(4, auto);
    row-gap:var(--c-grid-pad, 20px);
  }
  .c-head-l{grid-column:1;   grid-row:1}
  .c-head-c{grid-column:2;   grid-row:1;justify-self:end}
  .c-head-r{grid-column:1/-1;grid-row:2}
  .c-lede  {grid-column:1/-1;grid-row:3;max-width:none;
            font-size:clamp(19px, 5.6vw, 24px)}
  /* the row gap above it is the division's air now, so the margin that
     was doing that job at full width would double it */
  .c-rule  {grid-column:1/-1;grid-row:4;margin:0}
  .c-direct{grid-column:1/-1;grid-row:6}
  .c-note  {grid-column:1/-1;grid-row:7}
  .c-share {grid-column:1/-1;grid-row:8}
  /* stacked, the band has no right end to sit at — the mark goes last
     in the column and back to the left edge everything else is on */
  .c-mark  {grid-column:1/-1;grid-row:9;justify-self:start}
}