/* Bullish Media — contact.
   1-to-1 replica of depoluxe.xyz/contact/. Geometry measured live at
   1600x1000; the probe output is archived at
   docs/reference/2026-08-05/depo-contact-computed.json.

   The signature move: the same name is printed twice and CSS splits it, so the
   portrait lands between first and last name. */

/* The page inverts — the reference carries data-palette="secondary", which
   computes to a white background with black text.

   Off-white rather than pure white so the pure-white menu pill reads against
   it (see menu.css); the reference site keeps the same two-step relationship. */
body[data-page='contact'] {
  --page-bg: #efeeeb;
  /* The page colour is painted by html, not body, so the cursor trail canvas
     (z -1, see menu.css) can sit between the two. This sheet only loads on
     contact.html, so styling html here is safe. */
  background: transparent;
  color: var(--black);
}
html {
  --page-bg: #efeeeb;
  background: var(--page-bg);
}

/* The reference steps its type tokens at three viewport breakpoints — measured
   in docs/reference/2026-08-05/depo.css:

     --font-size-l  36 → 39.6 → 43.2 → 46.8px
     --font-size-s  13 → 14.3 → 15.6 → 16.9px   (at 1400 / 1650 / 1900px)

   Our --font-size already tracks their base via clamp (17.78px vs 17.6px at
   1600w), but --font-size-l is a flat 36px site-wide, which rendered the
   founder names one step small. Scoped to the contact page on purpose: the
   same token sets the home gallery's article type, which must not move. */
@media (min-width: 1400px) {
  body[data-page='contact'] { --font-size-l: 39.6px; --font-size-s: 14.3px; }
}
@media (min-width: 1650px) {
  body[data-page='contact'] { --font-size-l: 43.2px; --font-size-s: 15.6px; }
}
@media (min-width: 1900px) {
  body[data-page='contact'] { --font-size-l: 46.8px; --font-size-s: 16.9px; }
}

.widget-contact {
  /* Derived from the measured 510px item pitch at vh:1000 — the reference's
     --padding-item is calc(--padding-xl * 0.5), which lands on ~70px at
     1600w. Kept fluid so the rhythm survives other viewports. */
  --padding-item: clamp(2rem, 4.4vw, 5rem);
  --width-image: 2.9375rem;
  --height-image: 3.5625rem;

  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  /* Reference literal. The MIDDLE COLUMN IS EMPTY — on depoluxe the wordmark
     shows through it; here it frames the two founders against open space. */
  grid-template-columns: 33.33% 33.33% 33.33%;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh) * 100);
  padding: 0;
  color: inherit;
}

.widget-contact > ul {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Revealed by contact.js once the columns have been laid out, so nothing
     flashes at its untransformed position. */
  opacity: 0;
  transition: opacity .8s ease;
}
.widget-contact > ul.is-ready { opacity: 1; }
.widget-contact > ul:first-child { grid-column: 1 / 2; }
.widget-contact > ul:last-child  { grid-column: 3 / 4; }

.widget-contact > ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: var(--padding-item) 0;
  will-change: transform;
}

.widget-contact > ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  color: inherit;
  text-decoration: none;
  outline: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.widget-contact > ul li img {
  width: var(--width-image);
  height: var(--height-image);
  object-fit: cover;
  object-position: center center;
  /* Greyscale is baked into the asset by build/portraits.sh — a live filter
     here would re-rasterize under the drifting column every frame. */
}

.widget-contact > ul li .role,
.widget-contact > ul li .email,
.widget-contact > ul li .phone {
  font-family: var(--font-serif);
  font-size: var(--font-size);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
}

/* The phone line has no counterpart on the reference — Bullish addition. */
.widget-contact > ul li .phone { margin-top: 0.55em; opacity: 0.72; }

.widget-contact > ul li .name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-l);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 1.2em;
  text-align: center;
}

/* THE TRICK. Identical markup printed twice: n1 keeps only the first word,
   n2 drops it — so the portrait sits between "Alvaro" and "Paz". */
.widget-contact > ul li .name.n1 span:not(:first-child) { display: none; }
.widget-contact > ul li .name.n2 span:first-child       { display: none; }

.widget-contact > ul li a:focus-visible { outline: 2px dashed currentColor; }

/* ------------------------------------------------------------------ meta */

/* Bottom strip. The reference does NOT corner-pin this line: its footer rows
   are centred serif set at --font-size-s (14.3px at 1600w) with a ~3rem gap
   between groups, sitting at the bottom centre under the wordmark. Restyled to
   match — serif, sentence case, one centred row, no margin-left:auto split.

   z-index 40 keeps it above the wordmark layer (31) and the blur bands (30). */
.contact-meta {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: 3rem;
  width: 100%;
  padding: var(--padding);
  font-family: var(--font-serif);
  font-size: var(--font-size-s);
  letter-spacing: -0.01em;
  color: var(--muted);
  pointer-events: none;
}

@media (max-width: 700px) {
  /* Both groups still fit on one row at 390w; only the gap has to give. */
  .contact-meta { gap: 1.5rem; }
}

/* ------------------------------------------------------------- edge bands */

/* The washed top and bottom of the columns is NOT a per-item fade — every item
   measures opacity:1 at every position. It is a pair of fixed backdrop-blur
   strips, gradient-masked. Reference: #Header__blur. */
.edge-blur {
  --blur: 40px;
  --opacity: 0.05;
  --size: 10vw;
  pointer-events: none;
}
.edge-blur > div {
  position: fixed;
  left: 0;
  width: 100%;
  height: var(--size);
  z-index: 30;
  background: rgb(255 255 255 / var(--opacity));
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transform: translateZ(4px);
}
.edge-blur > .top {
  top: -1px;
  mask-image: linear-gradient(180deg, #000 10%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent);
}
.edge-blur > .bottom {
  bottom: -1px;
  mask-image: linear-gradient(0deg, #000 10%, transparent);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent);
}

/* --------------------------------------------------------- centre wordmark */

/* Reference mechanic, measured on depoluxe.xyz/contact/ at 1600x1000: a fixed,
   full-viewport, pointer-events:none layer holds a square mark box dead centre
   — the reference's --size-logo, 14.5rem (257.77px here, because our root font
   size is the same fluid 1.1111vw clamp as theirs) dropping to 11.25rem below
   480px. Four serif glyphs are pushed out to that box's four corners, so the
   middle of the mark is empty and the columns read through it; they fade in
   with a short stagger once the page has loaded. The mark never moves while
   the columns drift — that is what makes the empty middle column read as the
   page's fixed centre.

   Ours carries a centred lockup rather than four corner glyphs: "Bullish" on
   the box's top edge, the bull mark dead centre, "Media" on the bottom edge —
   space-between down the square, so the three pieces sit evenly spaced. The
   words are set in the display face (Inter 700 uppercase, the site's headline
   voice) — deliberately the ONLY non-serif type on this page, so the brand
   name reads as a logo and not as another line of the column text.

   Stack order is the reference's: columns (10) < blur bands (30) < mark (31) <
   meta (40) < menu pill (60). The mark paints over the wash bands. */
.contact-mark {
  --mark-size: 14.5rem;

  position: fixed;
  inset: 0;
  z-index: 31;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  /* Never intercepts the wheel: the columns own every input on this page. */
  pointer-events: none;
}

/* The reference's own breakpoint for --size-logo. */
@media (max-width: 480px) {
  .contact-mark { --mark-size: 11.25rem; }
}

.contact-mark__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.contact-mark__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: var(--mark-size);
  height: var(--mark-size);
}

.contact-mark__word {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  /* ~21% of the box — the size at which BULLISH, the longer word, spans
     roughly the box width in the display face. */
  font-size: calc(var(--mark-size) * 0.21);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--black);
  white-space: nowrap;
  /* Revealed by the staggered fade below; this page has no WebGL intro to
     wait on, so the animation runs straight off page load. */
  opacity: 0;
  animation: contact-mark-in 0.65s ease forwards;
}

/* The bull between the words — the menu pill's mark, sized so the three
   pieces and the two gaps read evenly down the square. */
.contact-mark__logo {
  width: calc(var(--mark-size) * 0.38);
  color: var(--black);
  opacity: 0;
  animation: contact-mark-in 0.65s ease forwards;
  animation-delay: 0.175s;
}
.contact-mark__logo svg { display: block; width: 100%; height: auto; }

/* Staggered like the reference's quadrants: word, mark, word — each 0.175s
   behind the last (~1s for the trio). */
.contact-mark__word--bottom { animation-delay: 0.35s; }

@keyframes contact-mark-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .contact-mark__word,
  .contact-mark__logo { opacity: 1; animation: none; }
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  .edge-blur { --size: 30vw; }

  /* The desktop page is a fixed, non-scrolling layer, but the collapsed mobile
     column is ordinary flow — it has to be able to scroll, or any founder past
     the first screen is unreachable. */
  body[data-page='contact'] {
    overflow-y: auto;
    height: auto;
    min-height: 100%;
  }

  /* Reference collapses to a single static column and drops the second list. */
  .widget-contact {
    position: relative;
    display: block;
    height: auto;
    /* Clears the floating pill (top 1rem + 3.125rem bar) — at mobile sizes
       --padding-item alone left the first role label behind it. */
    padding: calc(5.5rem + var(--padding-item)) 0 var(--padding-item);
  }
  .widget-contact > ul {
    height: auto;
    opacity: 1;
  }
  .widget-contact > ul:last-child { display: none; }
  .widget-contact > ul li {
    position: relative;
    transform: none !important;
  }
  .widget-contact .--hide-mobile { display: none; }

  /* The reference never paints its mark over the list. The mark is fixed over a
     100dvh in-flow spacer (`.fake-footer`, measured in depo.css) that sits right
     after the contact article: on desktop the article is `position:fixed`, so
     the spacer starts at the top of the flow and the mark lands on the empty
     middle column from load — but once the article collapses into flow, that
     same spacer moves BELOW the list, and the mark with it.

     Reproduced here by dropping the layer out of `fixed` at the collapse
     breakpoint: same square, same words, same 100dvh field, now a footer the
     column scrolls into instead of a stamp across the founders' names. */
  .contact-mark {
    position: relative;
    height: 100vh;
    height: 100dvh;
  }
}