/*
  base.css — what Cargo's own code used to do for this site, written out as plain CSS.

  The look of the site (fonts, colors, sizes) is in site.css, copied from Cargo as it was.
  This file is the machinery underneath: how big one "rem" is, how pages, columns, grids,
  pinned bars and icons are laid out. Numbers here were measured on the live Cargo site
  (November 2026) so the rebuilt pages land in the same places.

  "Phone" means a screen narrower than 768 px: the page script adds the class "mobile"
  to <html>, the same class Cargo used, so site.css's ".mobile ..." rules keep working.
*/

/* ---------- Size of 1rem: everything scales with the window, as on Cargo ---------- */
html {
  font-size: min(1.44vh, 1.5686vw);          /* computer: 12.96 px on a 1440 × 900 window */
  --viewport-height: 100vh;
  --pad-scale: 1;                            /* page padding, full size on a computer */
  --mobile-gap-scale: 0.33;                  /* phones: gaps between columns shrink to a third */
  --font-size: 1rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.mobile {
  font-size: min(3.136vw, 1.7835vh);         /* phone: 11.75 px on an iPhone 15 Pro */
  font-size: min(3.136vw, 1.7835svh);
  --viewport-height: 100svh;
  --pad-scale: 0.3;                          /* Cargo's phone setting: padding at 30% */
}
body { margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
/* Each text style starts fresh, as on Cargo: headings and captions don't pick up the body text's
   letterform setting ("ss02") unless site.css gives it to them. */
:where(h1, h2, .caption) { font-feature-settings: normal; }
:where(bodycopy) button { font-size: inherit; }
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Text sizes: "--font-scale" on a span makes it that many times its text style ---------- */
@property --font-scale { syntax: "<number>"; inherits: false; initial-value: 1; }
[style*="--font-scale"] { font-size: calc(var(--font-scale) * var(--font-size)); }
a { color: inherit; text-decoration: none; }
i { font-style: italic; }

/* ---------- Pages ---------- */
.page { display: flex; position: relative; width: 100%; }
.page-layout { display: flex; flex: 1 1 auto; width: 100%; }
.page-content { display: flex; width: 100%; }
bodycopy { flex: 1 1 auto; min-width: 0; width: 100%; }
main > .page { min-height: 0; padding-top: var(--pins-height, 12.2rem); }
html.mobile main > .page { padding-top: var(--pins-height, 8.25rem); }

/* Pinned bars. "Pushing" bars (the top bar, phone menus) sit over the top of the page and the page
   starts below the tallest of them; "floating" bars (the left-hand menus on a computer) just float. */
.pins { position: fixed; top: 0; left: 0; width: 100%; }
.pins-push { display: grid; z-index: 499; }
.pins-push > .page { grid-area: 1 / 1; align-self: start; }
.pins-float { z-index: 498; pointer-events: none; }
.pins-float > .page { position: absolute; top: 0; left: 0; }
.pins-float .page-content { pointer-events: auto; }
html.mobile .desktop-only { display: none !important; }
html:not(.mobile) .mobile-only { display: none !important; }

/* The phone menu (Cargo's "menu-mobile" overlay) */
.overlay { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; display: none; }
.overlay.open { display: block; }
.overlay > .page { min-height: 100%; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* ---------- Columns: 12 per row, with a gutter ---------- */
column-set {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter, 1rem);
  text-align: initial;
}
column-unit { display: block; min-width: 0; grid-column: span var(--span, 12); }
html.mobile column-set {
  column-gap: calc(var(--mobile-gutter, var(--gutter, 1rem)) * var(--mobile-gap-scale));
  row-gap: calc(var(--mobile-gutter, var(--gutter, 1rem)) * 0.3);
}
html.mobile column-set:not([data-mobile-stack="false"]) { grid-template-columns: minmax(0, 1fr); }
html.mobile column-set:not([data-mobile-stack="false"]) > column-unit { grid-column: 1 / -1; }
html.mobile column-set:not([data-mobile-hide-empty="false"]) > column-unit.empty { display: none; }

/* ---------- Images ---------- */
media-item { display: block; position: relative; }
media-item img { display: block; width: 100%; height: auto; }

/* ---------- Image grids (the Work pages, the home picture) ---------- */
gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  gap: var(--gutter, 1rem);
  align-items: start;
}
html.mobile gallery-grid {
  grid-template-columns: repeat(var(--mobile-columns, var(--columns, 3)), minmax(0, 1fr));
  column-gap: calc(var(--mobile-gutter, var(--gutter, 1rem)) * 0.338);   /* measured on Cargo: rows sit a little tighter than columns */
  row-gap: calc(var(--mobile-gutter, var(--gutter, 1rem)) * 0.31);
}
[thumbnail-index] media-item > a { display: block; }
[thumbnail-index] media-item .caption { top: 0; left: 0; width: 100%; pointer-events: none; }

/* ---------- Icons (arrows, the phone menu's lines), as Cargo drew them ---------- */
text-icon {
  display: inline-block;
  position: relative;
  aspect-ratio: 1;
  height: 1.2em;
  width: auto;
  margin-top: -1em;
  margin-bottom: -0.25em;
  vertical-align: baseline;
}
text-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; fill: currentColor; }

/* ---------- Previous / Next on a project ----------
   The build puts them inside the project's columns, as their last item (tools/build.mjs, withExtra).
   Phones: under the whole project; until you reach it, they wait at the bottom of the screen
   (Joseph, 2026-11-09: they had been pushed below the screen). The background is the page's grey
   (body in site.css: 19% black on white), so the project scrolls under them. Margin + padding + the
   columns' row gap add up to the old spacing (2.5rem): at the end they sit where they always did. */
.prev-next {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  grid-column: 1 / -1;
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: #cfcfcf;
  margin-top: 1.3rem;
  padding: 0.9rem 0 calc(0.9rem + env(safe-area-inset-bottom));
  color: rgba(0, 0, 0, 0.85);
}
.prev-next a { color: rgba(0, 0, 0, 0.85); white-space: nowrap; padding: 0.4em 0; }

/* Computers: directly under the cover, Previous at its left edge, Next at its right (Joseph, 2026-11-09).
   They take the cover's columns (--cover-span, from the build) in a second row; the text columns span
   both rows, so a long credit list never pushes them down. */
html:not(.mobile) column-set:has(> .prev-next) { grid-template-rows: auto 1fr; }
html:not(.mobile) column-set:has(> .prev-next) > column-unit { grid-row: 1 / span 2; }
html:not(.mobile) column-set:has(> .prev-next) > column-unit:first-of-type { grid-row: 1; }
html:not(.mobile) .prev-next {
  grid-row: 2;
  grid-column: 1 / span var(--cover-span, 12);
  align-self: start;
  position: static;
  background: none;
  margin-top: 0.6rem;
  padding: 0;
}
/* The arrows' drawing starts 12.4% inside its box (3.96 of 32): pulled out by that, the arrow tips
   meet the cover's edges exactly (box: 1.2em, so 0.1485em). */
html:not(.mobile) .prev-next .prev text-icon { margin-left: -0.1485em; }
html:not(.mobile) .prev-next .next text-icon { margin-right: -0.1485em; }

/* ---------- Fonts ---------- */
/* Captions (client lists, credits, form labels): ABC Diatype Mono, as on Cargo. Joseph's trial files from
   Dinamo, like Marfa, until the web license (2026-11-10; before, DM Mono stood in). With the license, put the
   licensed files in fonts/ under new names and point these rules to them. The name "Diatype Mono Variable"
   is the one site.css uses, from Cargo. */
@font-face {
  font-family: "Diatype Mono Variable";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/ABCDiatypeMonoTrial-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Diatype Mono Variable";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("/fonts/ABCDiatypeMonoTrial-LightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Diatype Mono Variable";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/ABCDiatypeMonoTrial-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Diatype Mono Variable";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/fonts/ABCDiatypeMonoTrial-RegularItalic.woff2") format("woff2");
}
.caption { font-family: "Diatype Mono Variable", ui-monospace, Menlo, monospace; }

/* ---------- Click-to-enlarge (Cargo's zoom; its background color is in site.css, .quick-view-background) ---------- */
media-item.zoomable img { cursor: zoom-in; }
.zoom-view { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 3rem; cursor: zoom-out; }
html.mobile .zoom-view { padding: 10px; }
.zoom-view img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- Slideshow (the Mobile Recording page) ----------
   One picture at a time in a fixed frame (--ratio: the About photo's 16:9), each filling it (cropped by hand
   with object-position in the page), fading every 7 seconds (scripts/site.js). The caption sits on the picture
   at its lower right on a soft dark band, as on the 2024 Squarespace slideshow; "3 / 10" and arrows sit under it,
   on the right. Without the script, the first picture stays. */
.slideshow { position: relative; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; }
.slideshow .slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.slideshow .slide:first-child, .slideshow .slide.shown { opacity: 1; }
.slideshow.running .slide:first-child:not(.shown) { opacity: 0; }
.slideshow .slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slideshow .on-photo { position: absolute; right: 0; bottom: 0; margin: 0; padding: 0.55rem 0.9rem; color: rgba(255, 255, 255, 0.95); text-align: right; background: rgba(0, 0, 0, 0.5); }
html.mobile .slideshow .on-photo { padding: 0.35rem 0.5rem; font-size: 0.6em; }
.slideshow-line { display: flex; justify-content: flex-end; margin-top: 0.7em; color: rgba(0, 0, 0, 0.6); }
.slideshow-line .slide-nav { white-space: nowrap; }
.slideshow-line .slide-nav a { color: rgba(0, 0, 0, 0.6); cursor: pointer; }

/* Side text beside the main content (Booking, Mobile Recording): three columns wide, stopping short of the
   content so the two never touch (Joseph, 2026-11-09: "slightly less right padding" than two columns and a gap).
   Phones: full width, as before. */
html:not(.mobile) column-unit.side-text { padding-right: 18%; }

/* The top menu (computer bar and phone menu): the section you are in, in the same red as the side menus. */
html[data-section="about"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/"]:not(.home-link),
html[data-section="about"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/"]:not(.home-link) span,
html[data-section="work"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/work"]:not(.home-link),
html[data-section="work"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/work"]:not(.home-link) span,
html[data-section="studio"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/studio"]:not(.home-link),
html[data-section="studio"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/studio"]:not(.home-link) span,
html[data-section="mobile"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/mobile-recording"]:not(.home-link),
html[data-section="mobile"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/mobile-recording"]:not(.home-link) span,
html[data-section="clients"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/clients-artists-1"]:not(.home-link),
html[data-section="clients"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/clients-artists-1"]:not(.home-link) span,
html[data-section="booking"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/booking"]:not(.home-link),
html[data-section="booking"] :is([id="S2099705274"], [id="Z0135435289"]) a[href="/booking"]:not(.home-link) span {
  color: rgba(190, 62, 62, 0.85) !important;
}

/* Phones (Joseph, 2026-11-09). The page titles sit a touch lower, without moving anything else (`top`
   shifts the title alone). And page content starts where the top bar's words do ("Greyfade Studio" is
   indented by two spaces Cargo put in front of it: 5.07% of the screen's width at every phone size),
   on the pages and the pinned Work, Clients and Info menus; the right edge already lines up with the menu icon. */
html.mobile h2.page-title { position: relative; top: 0.35em; }
html.mobile main .page-content,
html.mobile .pins-push > .page:not([id="L2922638427"]) .page-content { padding-left: 5.07vw; }

/* Previous / Next can't be dragged or selected (Joseph, 2026-11-10: clicking Next fast "locks me out"). A small
   movement while the button is down can start dragging the link instead of clicking it, and a fast second
   click can select the word; both swallow clicks. Nothing visible changes. */
.prev-next a { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }