/* --------------------------------------------------------------
   Mobile legibility layer
   --------------------------------------------------------------
   site.css shrinks phone body copy to 12.5px (11.8px on the smallest
   handsets) so that each section still lands inside one mandatory-snap
   panel. It fits, but it reads as fine print on the sections an employer
   actually stops on: experience, skills and the project cards.

   This layer lifts that copy back to 14px (13.5px on the smallest
   phones) and pays for the extra height out of card padding and grid
   gaps instead of type size. Nothing here touches layout, colour or
   desktop rendering, and every rule sits behind the same breakpoints
   site.css already uses, so removing this one <link> restores the
   original typography exactly.
   -------------------------------------------------------------- */

@media (max-width: 640px) {
  /* Experience: the densest section, and the one read first */
  .xp { padding: 9px 0; }
  .xp time { font-size: 10.5px; }
  .xp h3 { font-size: 15.5px; line-height: 1.3; }
  .xp p { font-size: 14px; line-height: 1.4; }

  /* Skills: seven cards, so the saving has to come out of the boxes */
  .skill-grid { gap: 6px; margin-top: 13px; }
  .sk-card { padding: 8px 12px 9px; }
  .sk-card h3 { font-size: 12.5px; margin-bottom: 3px; }
  .sk-card p { font-size: 14px; line-height: 1.4; }
  .sk-card-lead { padding: 10px 12px 11px; }
  .sk-card-lead p { font-size: 14px; line-height: 1.45; }

  /* Project cards are deliberately NOT touched. The card is a fixed 284px
     with `-webkit-line-clamp: 4`, so larger type does not show more text, it
     shows less of it: measured at 390px, 14px pushed the description from 7
     rendered lines to 8 while the visible 4 stayed the same, and raising the
     clamp to 5 overlapped the tag row on one card by 12px. Bigger type here
     costs words, so the words win. Needs a detail view, not a type rule. */
}

/* Smallest phones and short viewports: one notch down, still above the
   14px floor everywhere it matters except the two tightest blocks. */
@media (max-width: 380px), (max-width: 640px) and (max-height: 800px) {
  .skill-grid { gap: 4px; margin-top: 10px; }
  .sk-card { padding: 5px 10px 6px; }
  .sk-card h3 { font-size: 12px; margin-bottom: 2px; line-height: 1.25; }
  .sk-card p, .sk-card-lead p { font-size: 13.5px; }
  .sk-card-lead { padding: 8px 12px 9px; }
  .sk-idx { top: 8px; right: 11px; }
  .xp { padding: 6px 0; }
  .xp p { font-size: 13.5px; }
}

/* 320px-class phones: at this width every extra tenth of a point costs a
   wrapped line, and the five experience entries pay for it five times over.
   Measured: 13.5px here pushes the list 100px further past the fold, so the
   experience block holds near its original size and only the skills cards,
   which measured better, keep the larger type. This block comes last on
   purpose so it can go tighter than the one above, never looser. */
@media (max-width: 360px) {
  .xp { padding: 5px 0; }
  .xp h3 { font-size: 13.5px; line-height: 1.25; }
  .xp p { font-size: 12.5px; line-height: 1.4; }
}

/* --------------------------------------------------------------
   Short phones: let Skills scroll inside its own screen
   --------------------------------------------------------------
   Seven cards plus the lead card genuinely do not fit a 640px-tall
   phone: measured at 360x640 the content is 628px against 569px of
   room, 59px over. The panel's 76px top padding is nav clearance, not
   slack, so the only way to reclaim that 59px by tightening is to take
   it out of card padding and grid gaps that are already at 4-6px --
   which buys a fit by making the section harder to read, exactly the
   trade this file exists to undo.

   Instead the panel keeps its one-screen height and its content scrolls
   inside it. Snapping stays clean because the panel never grows past
   the viewport, and scroll chaining is left at its default, so reaching
   the last card carries on to Contact instead of trapping the gesture.
   108px is the panel's own 76px + 32px padding at this breakpoint.
   -------------------------------------------------------------- */
@media (max-width: 640px) and (max-height: 720px) {
  #skills .panel-inner {
    max-height: calc(100svh - 108px);
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------
   Touch targets
   --------------------------------------------------------------
   Measured at 390px: fourteen of the seventeen controls on the page
   are under 44px tall, and the carousel dots paint at 14x14 -- a third
   of the guideline, on the control you press most while reading the
   projects. Nothing here changes what is painted on a desktop, or what
   anything looks like at all: the dots keep their 10px square and gain
   an invisible 44x44 press area, and the short buttons gain height only
   where the pointer is actually a finger.
   -------------------------------------------------------------- */
@media (pointer: coarse) {
  /* The dots sit 8px apart, so a 44px-wide press area per dot would simply
     overlap its neighbours and the wider box would win nothing horizontally:
     measured, a press 20px to the side lands on the NEXT dot. Widening the row
     is what actually buys reach. 16px of gap puts 26px between dot centres,
     and the press area is full height because nothing competes vertically --
     26x44, comfortably past the 24x24 minimum, without a row of fat buttons. */
  .slider-dots { gap: 16px; }
  .slider-dots button { position: relative; }
  .slider-dots button::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  /* The active dot is rotated 45deg, and the press area would rotate with
     it, shrinking the axis-aligned target to 44/root2. Undo that here. */
  .slider-dots button.on::after { transform: translate(-50%, -50%) rotate(-45deg); }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}