/* Mobile and tablet layer.
   The desktop design carries its styling inline, so these corrections have to be
   !important — that is the only way a stylesheet outranks an inline declaration.
   Nothing in this file applies above 900px, which is also the width at which the
   script stops scrubbing the portrait with the cursor (App.narrow()).

   The hero has two layouts, and the switch is orientation, not width. A tablet held
   upright is 820px wide but 1180px tall: the portrait fills a box that tall by scaling
   until the subject covers the whole frame, and the headline, the paragraph and both
   buttons end up printed over a face and a dark suit. Anything portrait-shaped gets the
   phone stack; only a genuinely landscape tablet keeps the portrait beside the column. */

@media (max-width: 900px) {
  html, body { overflow-x: clip; -webkit-text-size-adjust: 100%; }
  /* Mobile browser toolbars resize the viewport mid-scroll; dvh keeps the pinned
     hero from jumping a toolbar's height on the first flick. */
  #hero > div { height: 100dvh !important; }
  /* ...and the column inside it has to agree. It asked for 100vh, which on iOS is the
     toolbar-hidden height: taller than the 100dvh box that clips it, so with the toolbar
     on screen the CTA row was pushed past the bottom edge and cut off. */
  #herocol { min-height: 100dvh !important; }
  #heromain h1 { min-height: 0 !important; }
  /* The float shape only exists to push desktop text clear of the portrait. */
  [data-ref="setShape"] { display: none !important; }

  /* viewport-fit=cover lets the page paint under the notch, which is what the hero wants
     — but nothing was reading the insets back, so on an iPhone the name sat behind the
     dynamic island. */
  #heroname {
    top: calc(var(--space-6) + env(safe-area-inset-top, 0px)) !important;
    left: calc(clamp(26px, 6vw, 92px) + env(safe-area-inset-left, 0px)) !important;
  }

  /* Every pill that downloads a document was 38.6px tall — under the 44px a thumb needs,
     and these are the links the whole page exists to get clicked. The same went for the
     contact icons (34px in the hero, 38px in the footer) and the footer's section links,
     which were a 21px line of text. */
  a[data-ihb] { min-height: 44px !important; }
  #heromain a[aria-label], footer a[aria-label] { width: 44px !important; height: 44px !important; }
  /* The three contact icons are a 1.5px stroke in --color-neutral-700. On desktop they
     sit high in the hero, against pale sky; on a phone the column starts lower and in
     landscape they land where the gradient has already gone blue, measuring 2.7:1 —
     under the 3:1 that WCAG asks of a meaningful graphic. One step darker on the same
     ramp reads the same and clears it. */
  #heromain a[aria-label] { color: var(--color-neutral-800) !important; }
  footer nav a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; }
  /* Five items on one nowrap line cleared a 375px screen by ten pixels before the icons
     grew; let the row break instead of betting on that margin. */
  footer nav + div { flex-wrap: wrap !important; }
}

/* Short viewports get the wordmark pulled up to the top edge (see the max-height rule in
   index.html, which frees the header's 78px). This sheet is linked after that block, so
   without repeating the override here its own #heroname rule above would win below
   900px and the name would sit on top of the headline. */
@media (max-width: 900px) and (max-height: 500px) {
  #heroname { top: calc(6px + env(safe-area-inset-top, 0px)) !important; }
}

/* Held sideways: the portrait stays beside the column, just further right and narrower.
   Width is not the question here — a 667px phone on its side and a 900px tablet on its
   side want the same thing, and both want the opposite of what they want upright. */
@media (max-width: 900px) and (orientation: landscape) {
  #vidwrap { -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 34%) !important; mask-image: linear-gradient(to right, transparent 2%, #000 34%) !important; }
  #vidwrap video { object-position: 92% center !important; transform: translate(2%, 8%) scale(1.24) !important; }
  /* 46ch is 58% of an 844px screen, and the subject's shoulder starts at 57%: the last
     words of every line landed on the dark suit at 1.5:1. The vw cap keeps the column
     inside the light half of the frame — the mask's own edge is not the limit, the
     shoulder behind it is, and the taller the box the further left the shoulder sits
     (object-fit: cover crops less, so the subject reads wider). 38vw clears it on both
     a 844x390 phone and a 900x600 tablet. */
  #heromain p { max-width: min(46ch, 38vw) !important; }
}

/* Held upright: the portrait moves under the copy and fades upward into the sky, so the
   headline sits on flat ground instead of over a face. */
@media (max-width: 900px) and (orientation: portrait) {
  /* The portrait sat high enough that the intro paragraph ran across the hair, and its
     bottom edge put the dark suit under the CTA row, where "Selected work" measured
     1.7:1 against its background — an invisible button. Dropping the frame clears the
     text; ending the lower fade a fixed distance above the bottom edge returns a light
     ground under the buttons.

     The tail stops are px, not percentages, on purpose: the CTA band is a button plus
     its padding, so it is about the same number of pixels tall on every phone, while a
     percentage of the frame means something different on a 667px screen than on a
     915px one. Pinned in px, the clear strip lands under the buttons at every height. */
  #vidwrap {
    inset: auto 0 0 0 !important;
    height: 58dvh !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 calc(100% - 205px), transparent calc(100% - 118px)) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 calc(100% - 205px), transparent calc(100% - 118px)) !important;
  }
  #vidwrap video { object-position: 60% top !important; transform: none !important; }
  /* The side padding follows the same clamp as the header above it, so the copy stays
     flush with "Ledio Beqiraj" instead of starting 23px to its left on a tablet. */
  #heromain {
    align-items: flex-start !important;
    padding: clamp(26px, 9vh, 74px) calc(clamp(26px, 6vw, 92px) + env(safe-area-inset-right, 0px)) 0 calc(clamp(26px, 6vw, 92px) + env(safe-area-inset-left, 0px)) !important;
  }
  #heromain h1 { font-size: clamp(33px, 9.4vw, 46px) !important; }
  #heromain p { max-width: 30ch !important; }
  #herocta {
    padding: 0 calc(clamp(26px, 6vw, 92px) + env(safe-area-inset-right, 0px)) calc(clamp(20px, 4vh, 40px) + env(safe-area-inset-bottom, 0px)) calc(clamp(26px, 6vw, 92px) + env(safe-area-inset-left, 0px)) !important;
  }
  /* Touch targets. */
  #herocta a { min-height: 44px !important; }
}

/* A tablet upright has the phone's stack but not the phone's width: 30ch of text in an
   820px column reads as a stray narrow strip, and the headline can afford to be larger. */
@media (min-width: 701px) and (max-width: 900px) and (orientation: portrait) {
  #heromain p { max-width: min(100%, 46ch) !important; }
  #heromain h1 { font-size: clamp(40px, 6.4vw, 62px) !important; }
}

/* Phone-width layout for everything below the hero. */
@media (max-width: 700px) {
  /* Timeline: narrow the rail gutter and let the section labels scroll away
     instead of sticking over the cards they belong to. */
  .tlwrap { padding-left: 40px !important; }
  /* "Download it" carried the desktop rail gutter of 76px, so it started 36px right of
     "Education" and every card below it — a quarter of a 390px screen spent on an indent
     that no longer matches the rail it was cut for. */
  div[style*="+ 76px)"] { padding-left: calc(clamp(22px, 5vw, 64px) + 40px) !important; }
  /* relative, not static: the dots are absolutely positioned against their own section
     head at left:-37px. Take the head out of the positioned flow and all four of them
     fall back to .tlwrap instead — stacked on top of each other at the top of the
     timeline, and half off the left edge of the screen. relative stops the sticking
     just as well and leaves each dot beside its own heading. */
  .tlhead { position: relative !important; top: auto !important; flex: 1 1 100% !important; }
  /* The head starts 62px in (22px section padding + the 40px rail gutter above) and the
     rail's centre line is at 33.5px, so the 17px dot hangs 37px back to sit on it. */
  .tlwrap [data-dot] { left: -37px !important; }
  #startdot { left: 0.5px !important; }

  /* Each document becomes plate over text rather than plate beside text. */
  .card { flex-direction: column !important; gap: 14px !important; }
  .card > a:first-child { width: 136px !important; }

  /* The university marks are sized for a desktop row. At 112px they took a third of a
     390px screen and squeezed "Baruch College, Zicklin School of Business" onto three
     lines beside them. */
  #studies div[style*="width:clamp(112px"] { width: 88px !important; height: 44px !important; }

  /* The "Theses" spine is a desktop device: a 34px vertical label plus its gap indent
     the thesis cards 48px further right than the education rows above them, which on a
     390px screen reads as a misalignment. Below 700px the label lies down above the
     cards and the column returns flush with the rest of the timeline. */
  div[style*="gap:clamp(14px,1.6vw,22px)"] { flex-direction: column !important; gap: 12px !important; }
  div[style*="gap:clamp(14px,1.6vw,22px)"] > div[style*="width:34px"] {
    width: auto !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--doc-line, rgba(242,239,233,0.16)) !important;
    padding-bottom: 8px !important;
  }
  span[style*="writing-mode:vertical-rl"] { writing-mode: horizontal-tb !important; }
}

/* No cursor, no cursor light. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  #lampwrap, #flowlight { display: none !important; }
}

/* Short phones (SE class, ~667px tall). The paragraph runs to four lines there and its
   last line still reached the hairline at 58dvh, so the column starts higher and the
   portrait drops further. Taller phones keep the roomier rhythm above. */
@media (max-width: 700px) and (max-height: 740px) and (orientation: portrait) {
  #heromain { padding-top: 20px !important; }
  #vidwrap { height: 52dvh !important; }
}