/* ═══════════════════════════════════════════════════════════════════════
   RADHE DESIGN STUDIO — mobile sheet
   The phone reads as one continuous drawing sheet, not a stack of cards.
   Sections are divided by a rule rather than boxed; photographs run to
   both screen edges; corners are square; the drafting furniture — corner
   ticks, dimension strings, crop marks, the title block — is back, and
   the accent is clay and amber rather than violet.

   Desktop is untouched: everything here lives inside media queries.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Palette ──────────────────────────────────────────────────────
     The accent is redefined at the token rather than rule by rule, so
     every violet on the page turns warm in one place. Clay and amber
     have material referents — terracotta, sandstone, brass — which is
     what the practice actually builds in. */
  :root, [data-theme='light'] {
    --sheet:        #ececec;
    --sheet-2:      #e4e1da;
    --sheet-warm:   #ececec;
    --plate:        #e0dcd4;
    --plate-2:      #d9d4cb;
    --violet:       #8a5f47;
    --violet-lift:  #6f4a37;
    --violet-tint:  rgba(138, 95, 71, .10);
    --amber:        #b5761d;
    --amber-lift:   #94600f;
    --clay:         #171717;
    --clay-strong:  #000000;
    --hair:         rgba(138, 95, 71, .34);
    --hair-soft:    rgba(138, 95, 71, .17);
    --hair-faint:   rgba(138, 95, 71, .08);
    --page-x:       20px;
  }
  [data-theme='dark'] {
    --sheet:        #111111;
    --sheet-2:      #171717;
    --sheet-warm:   #111111;
    --plate:        #1c1c1c;
    --plate-2:      #232323;
    --violet:       #d2a781;
    --violet-lift:  #e8c6a3;
    --violet-tint:  rgba(210, 167, 129, .10);
    --amber:        #d98e36;
    --amber-lift:   #ebae63;
    --clay:         #ffffff;
    --clay-strong:  #ffffff;
    --hair:         rgba(210, 167, 129, .30);
    --hair-soft:    rgba(210, 167, 129, .15);
    --hair-faint:   rgba(210, 167, 129, .07);
  }

  /* ── The sheet ────────────────────────────────────────────────────
     No panel: no margin, no radius, no fill, no gradient edge. Sections
     are separated by a rule, which is how a drawing sheet divides. */
  .folio, .statement, .facts, .svc, .proc, .cta, .map {
    margin: 0;
    padding: clamp(3rem, 11vw, 4.5rem) var(--page-x);
    border-radius: 0;
    background: none;
    overflow: visible;
    width: auto;
  }
  .folio::before, .statement::before, .facts::before,
  .svc::before, .proc::before, .cta::before, .map::before,
  .svc::after, .cta::after { display: none; }

  /* A pinned section is wrapped in a spacer div, so `section + section`
     silently stops matching it and its neighbour. Ruling the top of each
     section instead survives the wrapper. */
  .page > section:not(.hero),
  .page > .pin-spacer + section,
  .page > .pin-spacer > section { border-top: 1px solid var(--hair); }

  /* ── Drafting furniture, back on ──────────────────────────────── */
  .folio__index .dim,
  .titleblock { display: revert; }
  .blueprint, .hero__scroll { display: none; }

  .tag {
    position: relative;
    display: inline-block;
    padding: .35rem .7rem;
    color: var(--violet);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .tag::before, .tag::after,
  .tag > i::before, .tag > i::after {
    content: ''; position: absolute;
    width: 8px; height: 8px;
    border: 0 solid var(--amber);
    display: block;
  }
  .tag::before { left: 0; top: 0; border-top-width: 1px; border-left-width: 1px; }
  .tag::after  { right: 0; top: 0; border-top-width: 1px; border-right-width: 1px; }
  .tag > i::before { left: 0; bottom: 0; border-bottom-width: 1px; border-left-width: 1px; }
  .tag > i::after  { right: 0; bottom: 0; border-bottom-width: 1px; border-right-width: 1px; }

  /* ── Type ─────────────────────────────────────────────────────── */
  .folio__head, .facts__head, .svc__head, .map__head, .cta {
    text-align: left;
    justify-items: start;
  }
  .folio__head { grid-template-columns: 1fr; gap: 1rem; }
  .folio__index { justify-items: start; gap: 1.6rem; }

  .svc__title, .statement__text, .cta h2, .map__title, .proc__heading {
    max-width: 17ch;
    margin-inline: 0;
    font-size: clamp(1.5rem, 6.8vw, 2rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.028em;
  }
  .statement__text { max-width: 20ch; font-weight: 300; line-height: 1.3; }
  .svc__lead, .cta p, .map__address {
    max-width: 36ch;
    margin-inline: 0;
    font-size: .92rem;
    line-height: 1.68;
  }

  /* ── Actions: a ticked frame, not a pill ──────────────────────── */
  .btn {
    justify-content: flex-start;
    width: auto;
    margin-inline: 0;
    padding: 1rem 1.3rem;
    border: 1px solid var(--hair);
    border-radius: 0;
    background: none;
    color: var(--violet);
    font-size: .68rem;
    letter-spacing: .18em;
  }
  /* `.cta .btn` outranks a bare `.btn` whatever the file order, so the
     filled violet-to-pink action kept its gradient on the sheet. These
     are named at the same weight to take it back. */
  .cta .btn, .btn--go, .form__send {
    border: 1px solid var(--hair);
    background: none;
    color: var(--violet);
  }
  .btn .marks { display: block; }
  .btn .marks i { border-color: var(--amber); width: 12px; height: 12px; }
  .btn__arrow {
    width: 22px; height: 22px;
    border-radius: 0;
    background: none;
    border-color: var(--hair);
    color: var(--amber);
  }
  .btn:hover .btn__arrow { background: none; color: var(--amber); border-color: var(--amber); }

  /* ── Plates: full bleed, square, black and white ──────────────────
     The block keeps its structure and its parallax; only the frame
     changes. Grayscale is deliberate — the work reads as a set rather
     than as six differently-lit photographs. */
  .folio { padding-inline: 0; }
  .folio__head, .chips, .chips__empty, .folio__foot { padding-inline: var(--page-x); }
  .folio__grid { gap: 1.6rem; }
  .folio__frame { border-radius: 0; }
  .folio__frame img { filter: grayscale(1) contrast(1.04); }
  .folio__frame .marks { display: block; inset: 10px; }
  .folio__frame .marks i { border-color: rgba(255, 255, 255, .75); width: 12px; height: 12px; }
  .folio__cap {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: .7rem var(--page-x) 0;
    border-top: 1px solid var(--hair-soft);
    margin-top: .7rem;
  }
  .folio__badge {
    border-radius: 0;
    background: var(--sheet);
    color: var(--amber);
  }
  .folio__foot { border-top: 0; justify-content: flex-start; }
  .folio__foot .annot { display: block; }

  /* ── Portfolio: exactly black and white ───────────────────────────
     The collage keeps its DNA untouched — the split reveal, the rotation,
     the clipped corners, the label. Only the colour is held: hover
     restored full colour, and on a phone :hover sticks after a tap, so a
     tapped tile turned colour and stayed that way. It now stays
     monochrome through the whole interaction. */
  .portfolio-category:hover .portfolio-category__half img,
  .portfolio-category:focus-visible .portfolio-category__half img,
  .portfolio-category:active .portfolio-category__half img {
    filter: grayscale(1) contrast(1.06);
  }

  /* Category chips — square, ticked when live. */
  .chips { justify-content: flex-start; }
  .chip {
    border-radius: 0;
    padding: .58rem .9rem;
    border-color: var(--hair-soft);
  }
  .chip.is-on {
    background: none;
    border-color: var(--amber);
    color: var(--violet);
  }
  .chip.is-on span { color: var(--amber); }
  .chip.is-on::before, .chip.is-on::after { display: block; }

  /* ── Floating figures: same behaviour, no frame ───────────────────
     The float and the count are untouched; the cell loses its radius,
     its fill and its violet wash and stands on the bare sheet. */
  .facts__grid, .statement-stats { gap: 0; }
  .facts__cell, .statement-stat {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 1.3rem 1rem 1.5rem 0;
    text-align: left;
  }
  /* No frame at all: the four figures stand on the sheet on their own,
     held by the column rhythm rather than by rules. The grid's own top and
     left edges come from the base stylesheet, so they are cleared too. */
  .statement-stats { border: 0; }
  .statement-stat { border: 0; }
  .statement-stat:nth-child(odd) { padding-right: 1.2rem; }
  .statement-stat:nth-child(even) { padding-left: 1.2rem; }
  /* The corner wash belonged to the filled tile. */
  .statement-stat::after, .facts__cell::after { display: none; }
  .facts__cell[data-tone='warm'] { background: none; }
  .facts__cell[data-tone='warm']::before { display: none; }
  .facts__fig, .statement-stat__figure { font-size: clamp(2.4rem, 11vw, 3rem); }

  /* ── Services: the ruled schedule, one column ─────────────────────
     The rows carry their own rules from the base stylesheet; the panel
     skin must not put a second set on top or split them into columns. */
  .svc__card { padding-block: clamp(1.05rem, 3.4vw, 1.4rem); }
  .svc__card .marks { display: none; }
  .svc__ref { display: none; }
  .svc__arrow { border-radius: 0; border-color: var(--hair); }

  /* A pinned section must fill the screen it is pinned to. At 808px in an
     844px viewport the 36px below it showed the empty pin spacer, and on
     a narrower, taller phone that gap grows to hundreds of pixels — which
     is the blank space under the stages that kept being reported. */
  .proc { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }

  /* ── Process: note above, photograph under it, uncropped ──────────
     The rail and its pin are unchanged. The photograph keeps its own
     proportions rather than being cut to a fixed ratio, so a square
     source stays square and a 5:4 source stays 5:4. */
  .proc__card {
    border: 1px solid var(--hair-soft);
    border-radius: 0;
    background: none;
    padding: 1.3rem 1.2rem;
  }
  .proc__no { color: var(--muted); }
  .proc__chips li {
    border-radius: 0;
    border-color: var(--hair-soft);
    color: var(--violet);
  }
  .proc__chips li::before, .proc__chips li::after { display: none; }
  .proc__shot {
    margin-top: 1.1rem;
    border-radius: 0;
    background: none;
  }
  /* Every stage photograph occupies the same square, so the cards are the
     same height whichever one you are on. Two of the five sources are
     already square; the other three are 1400x1120 and give up 140px from
     each side to match, which is the smallest crop that squares them. */
  .proc__shot img {
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    object-position: center;
  }

  /* ── Location ─────────────────────────────────────────────────── */
  .map__frame { border-radius: 0; border-color: var(--hair-soft); }

  /* ── Header ───────────────────────────────────────────────────── */
  .head {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--sheet) 94%, transparent) 0%,
      color-mix(in srgb, var(--sheet) 82%, transparent) 62%,
      transparent 100%);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }
  @supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .head { background: var(--sheet); }
  }

  /* ── Footer: the title block returns ──────────────────────────── */
  .foot { padding-inline: var(--page-x); }
  .foot__rule { opacity: .8; }
  .titleblock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: stretch;
    border-top: 1px solid var(--hair);
    padding-top: 0;
  }
  .titleblock div {
    padding: .8rem .5rem;
    border-left: 0;
    border-right: 1px solid var(--hair-soft);
  }
  .titleblock div:last-child { border-right: 0; }
}