/* ==========================================================================
   Greta Volungevičiūtė — Contact
   Design canvas: 1440 wide, free height. Requires css/base.css.

   The reference (9061dc87) sets three words at poster size between hairlines
   and nothing else. This keeps that structure and inverts the ground: white
   page, black type, matching the work index rather than the hero — the same
   two faces at the same two sizes, so the page reads as part of the same set.
   ========================================================================== */

/* Same trick as the work index: the tokens are re-pointed rather than the
   rules overridden, so the shared header, nav and strikethrough invert with
   the page for free. */
:root {
  --bg: #ffffff;
  --ink: #0d0d0d;
  --ink-dim: rgba(13, 13, 13, 0.55);
  --ink-faint: rgba(13, 13, 13, 0.34);
  --hairline: rgba(13, 13, 13, 0.14);

  --pad-x: 96px;               /* the work index's gutter, so the hairlines
                                  above and below the words start on the same
                                  vertical as the project grid's */
}

/* dark text on white wants the opposite smoothing from the hero */
body {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   1440 canvas that scales down but keeps scrolling
   Identical to work and about — #shell is given its height in js/contact.js
   because a transform does not affect layout.
   -------------------------------------------------------------------------- */

#shell {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#page {
  position: relative;
  width: var(--design-w);
  transform-origin: 0 0;
  padding: 0 var(--pad-x) 96px;

  /* the page is short by design; this holds the foot at the bottom of the
     window instead of leaving it floating halfway up a tall screen */
  min-height: 900px;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Head
   -------------------------------------------------------------------------- */

.say {
  flex: 1 0 auto;
  padding-top: 204px;          /* same as .work-head */
}

/* the work index's caption scale exactly: nav face, 16px, 0.04em, uppercase */
.say__eyebrow {
  margin: 0 0 26px;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* --------------------------------------------------------------------------
   The three lines

   One hairline per line, on top, plus one closing the list — so the words sit
   in a ruled stack rather than in three separate boxes. The rule belongs to
   the line, which is what lets a drawer open without the rules shifting apart.
   -------------------------------------------------------------------------- */

.lines {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--hairline);
}

.line { border-top: 1px solid var(--hairline); }

/* A button, not a div with a click handler: it is focusable, it answers the
   keyboard, and aria-expanded tells a screen reader what the arrow only shows.
   The reset is what strips the browser's own button look off it. */
.line__head {
  width: 100%;
  padding: 26px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* 84px is measured, not chosen: "INSTAGRAM" is the longest of the three and at
   84 it comes to 731px against the 1248 the gutters leave, so the widest word
   still sits well clear of the arrow at the far edge. Uppercase and 0.04em are
   the work index's own title treatment (.project__title), one size up. */
.line__word {
  font-family: var(--font-display);
  font-size: 84px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.line__mark {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  color: var(--ink-faint);
  transition: color 0.35s ease,
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.line__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* hover only where there is a pointer to hover with — on a phone :hover sticks
   after a tap and the line would stay nudged over once touched */
@media (hover: hover) {
  .line__head:hover .line__word { transform: translateX(14px); }
  .line__head:hover .line__mark { color: var(--ink); }
}

.line__head:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

/* the arrow is drawn pointing up and out; a quarter turn lands it pointing
   down into the drawer it just opened */
.line.is-open .line__mark {
  color: var(--ink);
  transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   The drawer

   0fr → 1fr on a grid row is what makes this animate at all: height cannot be
   transitioned to auto, and a max-height guess would either clip the panel or
   leave dead time at the end of the easing. The row is free to be exactly as
   tall as its content and still travels smoothly between the two.

   min-height: 0 on the inner is required, not defensive — a grid item's
   automatic minimum size is its content, so without it the row could never
   reach 0 and the panel would simply always be open.
   -------------------------------------------------------------------------- */

.line__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Nothing but the clipping lives here. The padding has to go on the wrapper
   inside it: border-box cannot take a box below its own padding, so 44px of
   padding on this box left the closed drawer 44px tall — a gap under every
   word that only showed up once measured. */
.line__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.line__details {
  display: flex;
  gap: 88px;
  padding: 4px 0 40px;
}

.line.is-open .line__panel { grid-template-rows: 1fr; }

/* the details fade in behind the drawer rather than with it, so the movement
   reads as the panel opening and the content arriving, not as one shove */
.detail {
  display: block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.line.is-open .detail {
  opacity: 1;
  transform: none;
  transition-delay: 0.18s;
}

.detail__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.detail__value {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 3px;
  transition: border-color 0.35s ease;
}

@media (hover: hover) {
  .detail:hover .detail__value { border-bottom-color: var(--ink); }
}

/* --------------------------------------------------------------------------
   Standing line + foot
   -------------------------------------------------------------------------- */

.based {
  margin: 34px 0 0;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* the footer itself is in base.css. flex-shrink: 0 is this page's business:
   #page is a flex column holding the foot at the bottom of a short page, and
   without it the footer would be the thing that gives. */
.site-foot {
  flex-shrink: 0;
  margin-top: 120px;
}

/* --------------------------------------------------------------------------
   Phones

   The canvas is abandoned rather than scaled, as on the other two pages —
   1440 inside 390 would set the 16px captions at 4px. Must match MOBILE_W in
   js/contact.js.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

  #shell {
    height: auto !important;
    overflow: visible;
  }

  #page {
    width: 100%;
    min-height: 0;
    padding: 0 18px 56px;
    transform: none !important;
  }

  /* back into the flow: there is no fixed canvas to hang off any more */
  .header {
    position: relative;
    width: 100%;
    height: 64px;
    padding: 0;
  }

  .brand { font-size: 12px; }
  .nav { gap: 12px; }
  .nav a { font-size: 10px; }

  .say { padding-top: 46px; }

  .say__eyebrow {
    margin-bottom: 18px;
    font-size: 13px;
  }

  /* 32 rather than 84: "INSTAGRAM" measures 279px here, which clears the arrow
     on a 360-wide phone. It is the widest of the three that sets the size. */
  .line__word { font-size: 32px; }

  .line__head {
    padding: 18px 0 20px;
    gap: 16px;
  }

  .line__mark { width: 22px; height: 22px; }

  /* side by side there is not room for two details on a phone */
  .line__details {
    display: block;
    padding: 0 0 24px;
  }

  .detail + .detail { margin-top: 20px; }

  .detail__label { font-size: 12px; margin-bottom: 5px; }

  /* the address is the longest string on the page and the only one that can
     overflow a narrow screen */
  .detail__value {
    font-size: 15px;
    max-width: 100%;
    word-break: break-word;
  }

  .based {
    margin-top: 22px;
    font-size: 12px;
    line-height: 1.5;
  }

  .site-foot { margin-top: 56px; }
}

/* --------------------------------------------------------------------------
   Scroll reveal — the is-in class is set by js/contact.js
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .line__word,
  .line__mark,
  .line__panel,
  .detail,
  .detail__value { transition: none; }

  .reveal {
    opacity: 1;
    transform: none;
  }
}