/* Chris Magee — responsive + hosting layer.
   The page markup is inline-styled at a fixed 1280 grid; these rules
   override those inline values at narrow widths via !important.
   Desktop rendering is untouched above 1000px. */

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
::selection { background: #C8A25A; color: #0B1512; }
:focus-visible { outline: 2px solid #C8A25A; outline-offset: 3px; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  [style*="padding-inline: 80px"] { padding-inline: 44px !important; }
}

/* ---------- phone / small tablet ---------- */
@media (max-width: 1000px) {

  .page { max-width: 100% !important; }

  /* gutters */
  [style*="padding-inline: 80px"] { padding-inline: 22px !important; }

  /* the vertical marginalia rails have nowhere to live */
  [style*="writing-mode: vertical-rl"] { display: none !important; }

  /* every 12-col grid becomes a single stacked column.
     the header is also a repeat(12) grid but must stay a row — excluded. */
  :not(header)[style*="repeat(12, minmax(0, 1fr))"] {
    display: flex !important;
    flex-direction: column !important;
    row-gap: 20px !important;
    column-gap: 0 !important;
  }
  :not(header) > [style*="grid-column:"] { grid-column: auto !important; width: 100% !important; }

  /* sections: let content set the height, and stop absolute layout */
  section {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: static !important;
  }
  section > div[style*="position: absolute"] {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 22px 22px 22px !important;
    order: 1;
  }
  /* the vertical marginalia rails: hide the wrapper, not just the span */
  section > div:has(> [style*="writing-mode: vertical-rl"]) { display: none !important; }
  /* portrait follows the copy instead of leading the hero */
  section > img[style*="position: absolute"] {
    position: static !important;
    order: 2;
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 28px 22px 0 22px !important;
  }

  /* about-section portrait: keep the crop box so object-fit:cover has something
     to crop against — height:auto would upscale the 440px-wide source to the column */
  div[style*="height: 520px"] { height: 420px !important; max-width: 360px !important; }
  img[style*="height: 520px"] { height: 420px !important; }

  /* header: logo + CTA on one line, nav wrapping under it */
  header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px 16px !important;
    padding-block: 15px !important;
    min-height: 0 !important;
  }
  header > a { width: auto !important; }
  header > a:first-child { flex: 0 1 auto !important; margin-right: auto !important; }
  header > a:last-child { flex: 0 0 auto !important; }
  header nav {
    order: 3 !important;
    flex: 1 0 100% !important;
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
    padding-top: 4px !important;
    border-top: 1px solid #22302A !important;
  }
  header nav a { padding-top: 10px !important; }

  /* the hero's gutter came from its absolute children's left:80px — replace it
     on those children only, since every other section is padded by its inner grid */
  section > div[style*="position: absolute"],
  section > img[style*="position: absolute"] { margin-inline: 22px !important; }

  /* tap targets. these anchors are flex items, so they get blockified and
     stretch — pin them to their content width and keep padding inside the box */
  a[style*="padding: 13px 18px"],
  a[style*="padding: 17px 26px"],
  a[style*="padding: 17px 22px"] {
    padding: 15px 22px !important;
    box-sizing: border-box !important;
    width: max-content !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    text-align: center !important;
  }

  /* portrait block in the about section */

  /* display type down to something readable on a 390px screen */
  [style*="font-size: 128px"] { font-size: clamp(50px, 13.5vw, 96px) !important; line-height: 0.95 !important; }
  [style*="font-size: 104px"] { font-size: clamp(44px, 11.5vw, 84px) !important; line-height: 0.95 !important; }
  [style*="font-size: 58px"]  { font-size: clamp(32px, 8vw, 52px) !important; }

  /* the giant ghost numerals are decorative; once the section stops being a
     positioning context they land over the copy, so drop them on phones */
  section > span[style*="font-size: 420px"] { display: none !important; }
  [style*="font-size: 68px"]  { font-size: clamp(36px, 9vw, 60px) !important; }
  [style*="font-size: 64px"]  { font-size: clamp(34px, 8.6vw, 58px) !important; }
  [style*="font-size: 60px"]  { font-size: clamp(33px, 8.2vw, 54px) !important; }
  [style*="font-size: 56px"]  { font-size: clamp(32px, 7.8vw, 50px) !important; }
  [style*="font-size: 54px"]  { font-size: clamp(31px, 7.4vw, 48px) !important; }
  [style*="font-size: 44px"]  { font-size: clamp(28px, 6.4vw, 40px) !important; }
  [style*="font-size: 40px"]  { font-size: clamp(27px, 6vw, 38px) !important; }
  [style*="font-size: 38px"]  { font-size: clamp(26px, 5.8vw, 36px) !important; }
  [style*="font-size: 30px"]  { font-size: clamp(22px, 5vw, 28px) !important; }

  /* the one-line about headline has to wrap on a phone */
  [style*="white-space: nowrap"][style*="Cormorant"] { white-space: normal !important; }

  /* the contact rows are baseline-spread pairs; stack them */
  a[style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
  }

  footer { padding-top: 44px !important; padding-bottom: 36px !important; }
  footer div[style*="align-items: flex-end"] {
    align-items: flex-start !important;
    text-align: left !important;
  }
  footer nav { flex-wrap: wrap !important; gap: 12px 16px !important; }
}

@media (max-width: 560px) {
  [style*="padding-inline: 80px"] { padding-inline: 18px !important; }
  section > div[style*="position: absolute"] { margin-inline: 18px !important; }
  section > img[style*="position: absolute"] { margin-inline: 18px !important; }
  section { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* ---------- print ---------- */
@media print {
  html, body { background: #FFFFFF !important; }
  header a[href="#contact"], [style*="writing-mode: vertical-rl"] { display: none !important; }
  section { page-break-inside: avoid; }
}

/* ---------- sticky phone action bar ---------- */
.tapbar { display: none; }

@media (max-width: 1000px) {
  .tapbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: #0B1512;
    border-top: 1px solid #22302A;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tapbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 12px;
    font-family: 'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
  }
  .tapbar-call { color: #EEE8DA; border-right: 1px solid #22302A; }
  .tapbar-book { color: #0B1512; background: #C8A25A; font-weight: 500; }
  /* keep the footer clear of the bar */
  body { padding-bottom: 54px; }
}

@media print { .tapbar { display: none !important; } }

/* ---------- wide desktop: kill the letterbox ----------
   The layout is a fixed 1280px column. On anything wider that left dark
   bands down both sides. Each band now carries its own section's colour
   across the full viewport, while the content stays on the 1280 grid. */
@media (min-width: 1281px) {
  /* use more of a large monitor; the 12-col grids and the hero's
     absolutely-placed pieces all reflow cleanly at this width */
  .page { max-width: 1680px !important; }

  .page > header,
  .page > section,
  .page > footer { clip-path: inset(0 -100vw); }

  .page > [style*="background: #0B1512"] { box-shadow: 0 0 0 100vw #0B1512; }
  .page > [style*="background: #0F1B17"] { box-shadow: 0 0 0 100vw #0F1B17; }
  .page > [style*="background: #F3EFE6"] { box-shadow: 0 0 0 100vw #F3EFE6; }
  .page > [style*="background: #E9E3D6"] { box-shadow: 0 0 0 100vw #E9E3D6; }
  .page > [style*="background: #060D0B"] { box-shadow: 0 0 0 100vw #060D0B; }
}