/* wall.css: home page. A statement headline that holds still while a staggered wall of
   framed tiles scrolls up over it. wall.js deals the tiles into columns, sets each column's
   --side, --stagger and --gap, and drives --fan, --p and --dim. Each tile is just its media in a hairline frame; hover or focus draws the accent
   ring and opens a nameplate under it, pushing the rest of that column down. */

/* ---------- Statement ---------- */
.statement {
  position: sticky;
  top: var(--header-h);
  z-index: 0;
  min-height: calc(72svh - var(--header-h)); /* the first tiles peek in at the bottom */
  padding-top: clamp(2rem, 9vh, 6.5rem);
  opacity: var(--dim, 1);
}

.statement h1 {
  font-size: clamp(2.25rem, 1rem + 4.4vw, 5.25rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

/* The three businesses are the links: weight and an accent underline mark them out.
   (On the landing page they are <strong>, same look, no link.) */
.statement :is(a, strong) {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
  transition: color 0.2s;
}
.statement a:hover { color: var(--accent); }

.statement em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.14em;
  letter-spacing: -0.01em;
  line-height: 0.9;
}

/* The wordmark stands in for the words "Fancy Wolf": cap height, sitting on the baseline. */
.statement-logo svg { display: inline-block; height: 0.7em; width: auto; vertical-align: baseline; }

/* ---------- Coming-soon landing page ----------
   The statement at the top, in normal flow (nothing scrolls over it), and the ring label, line and
   social pills at the foot of the first screen, where the contact line sits on a portfolio. */
.landing { display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h)); }
.landing .statement { position: static; min-height: 0; padding-top: clamp(2rem, 9vh, 6.5rem); }
.soon { margin-top: auto; padding-block: clamp(3rem, 8vh, 5rem) 2rem; }
.soon h2 { display: inline-flex; margin: 0; }
.soon-line { max-width: 34ch; margin: 0.75rem 0 1.5rem; font-size: var(--step-1); line-height: 1.4; text-wrap: pretty; }
.soon-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.soon-links .pill { gap: 0.6rem; }
.soon-links svg { width: 22px; height: 22px; flex: none; }

/* Under a palette, the wordmark's WOLF letters take that palette's accents instead of the
   pastels baked into text-logo.svg (matched by their fill, the only hook the file has). */
[data-palette] .statement-logo path[fill="#97d2d8"] { fill: var(--color-teal); }
[data-palette] .statement-logo path[fill="#92d3ba"] { fill: var(--color-mint); }
[data-palette] .statement-logo path[fill="#d68c8c"] { fill: var(--color-coral); }
[data-palette] .statement-logo path[fill="#ebda7f"] { fill: var(--color-yellow); }

/* ---------- Wall ---------- */
.wall {
  --wall-gap: clamp(10px, 1.4vw, 20px);
  position: relative;
  z-index: 1; /* over the statement, which shows dimmed through the gaps */
  display: flex;
  align-items: flex-start;
  gap: var(--wall-gap);
  margin-inline: calc(var(--gutter) * -1); /* full-bleed past the body gutter */
  padding-inline: var(--wall-gap);
  overflow-x: clip; /* the columns fan in from past the screen edges */
}

/* Without JS: one list flowed into CSS columns. */
.wall-list { flex: 1; margin: 0; padding: 0; list-style: none; columns: 2 18rem; column-gap: var(--wall-gap); }
.wall-list .tile { break-inside: avoid; margin-bottom: var(--wall-gap); }

.wall-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--wall-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Sideways: fanned out from the centre by --side steps, closing in as --fan falls to 0.
     Down: each column starts --stagger lower and slides to --gap lower as --p runs from 0 to 1,
     so the tops begin slightly uneven and the bottoms end level. */
  translate:
    calc(var(--side, 0) * 4vw * var(--fan, 0))
    calc(var(--stagger, 0px) * (1 - var(--p, 0)) + var(--gap, 0px) * var(--p, 0));
}

/* ---------- Tile ----------
   A framed picture and a nameplate. The plate is a grid row that grows from 0fr to 1fr, so
   opening it takes room in the column and the tiles beneath slide down. On touch there is
   no hover, so the plates stay open. */
.tile-link {
  --ring: 0 0 0 var(--ring-gap) var(--color-bg), 0 0 0 calc(var(--ring-gap) + var(--ring-width)) var(--accent); /* declared here, where --accent is the tile's own */
  display: flex;
  flex-direction: column;
  gap: 0;
  color: inherit;
  text-decoration: none;
}

.tile-art {
  position: relative;
  container-type: inline-size; /* art inside is sized in cqi, so it scales with the tile; its own padding must be %, not cqi */
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 1);
  overflow: hidden;
  border-radius: var(--frame-radius);
  outline: 1px solid var(--frame-line);
  outline-offset: -1px;
  background: var(--color-ink);
  transition: box-shadow 0.35s ease;
}

.tile-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The ring is the only focus mark on a tile: the link itself shows no outline. */
.tile-link:focus-visible { outline: none; }
.tile-link:is(:hover, :focus-visible) .tile-art { box-shadow: var(--ring); }

.tile-note { position: absolute; top: 0.55rem; right: 0.65rem; }

.tile-plate { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.tile-plate-inner {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
}
/* The spacing is margin on the children, not padding on the inner: padding would hold the closed plate open at 15px. */
.tile-plate-inner > :first-child { margin-top: 0.55rem; }
.tile-plate-inner > :last-child { margin-bottom: 0.4rem; }
.tile-link:is(:hover, :focus-visible) .tile-plate { grid-template-rows: 1fr; }
.tile-link:is(:hover, :focus-visible) .tile-plate-inner { opacity: 1; }

.tile-name { color: var(--color-cream); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.tile-link:is(:hover, :focus-visible) .tile-name { color: var(--accent); }
.tile-line { font-family: var(--font-serif); font-style: italic; font-size: 1rem; line-height: 1.15; color: rgb(244 240 236 / 0.85); }
.tile-spec { margin-top: 0.1rem; }

@media (hover: none) {
  .tile-plate { grid-template-rows: 1fr; }
  .tile-plate-inner { opacity: 1; }
}

/* ---------- Tile art ---------- */

/* Photo slot: moody light in the section accent until real footage arrives. */
.tile-art--photo {
  background:
    radial-gradient(55% 45% at var(--glow, 30% 30%), color-mix(in srgb, var(--accent) 55%, transparent), transparent 72%),
    radial-gradient(35% 30% at 85% 90%, rgb(244 240 236 / 0.12), transparent 70%),
    linear-gradient(170deg, #222, #060606 80%);
}
.tile-art--photo::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(30% 30% at 40% 60%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%);
  filter: blur(30px);
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(18%, -14%) scale(1.2); } }

/* Pedal: the Scoop & Scream knob layout, enclosure in the effects accent. */
.tile-art--knobs { background: radial-gradient(70% 60% at 50% 35%, color-mix(in srgb, var(--accent) 28%, #141414), #070707 80%); }
.pedal {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9cqi 7cqi;
  width: 58%;
  padding: 9cqi 7cqi 30cqi;
  border-radius: 5cqi;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent), white 12%), color-mix(in srgb, var(--accent), black 28%));
  box-shadow: 0 6cqi 12cqi rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.knob { display: flex; flex-direction: column; align-items: center; gap: 1.4cqi; }
.knob i {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3c3c3c, #101010 70%);
  box-shadow: 0 1cqi 2cqi rgb(0 0 0 / 0.5);
  rotate: var(--turn);
  transition: rotate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.knob i::after {
  content: "";
  position: absolute;
  top: 9%;
  left: 50%;
  width: 7%;
  height: 34%;
  border-radius: 1cqi;
  background: var(--color-cream);
  translate: -50% 0;
}
.tile-link:hover .knob i { rotate: calc(var(--turn) + 35deg); }
.knob b { color: #2b1414; font-size: 2.6cqi; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.led {
  position: absolute;
  bottom: 21cqi;
  left: 50%;
  width: 2.6cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff4a3a;
  box-shadow: 0 0 3cqi 1cqi rgb(255 74 58 / 0.7);
  translate: -50% 0;
}
.footswitch {
  position: absolute;
  bottom: 5cqi;
  left: 50%;
  width: 13cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f4f4f4, #8a8a8a 70%);
  box-shadow: 0 1cqi 2cqi rgb(0 0 0 / 0.5);
  translate: -50% 0;
}

/* Three-way switch between the knobs and the footswitch; the middle position shows as set. */
.pswitch {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  padding: 0.8cqi;
  border-radius: 99px;
  background: rgb(0 0 0 / 0.22);
  color: #2b1414;
  font-size: 2.3cqi;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pswitch span { padding: 0.7cqi 1.8cqi; border-radius: 99px; }
.pswitch span:nth-child(2) { background: #151515; color: var(--color-cream); }

/* Lit by controls.js when its row or the knob itself is pointed at. */
.knob[data-on] i { rotate: calc(var(--turn) + 50deg); box-shadow: 0 0 0 0.7cqi var(--color-cream), 0 1cqi 3cqi rgb(0 0 0 / 0.5); }
.knob[data-on] b,
.pswitch[data-on] { color: #000; }
.pswitch[data-on] { box-shadow: 0 0 0 0.6cqi var(--color-cream); }

/* 18 years: the number is the picture. */
.tile-art--number {
  place-items: end start;
  align-content: end;
  padding: 7%;
  background: radial-gradient(80% 60% at 25% 15%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), #0a0a0a;
}
.num { font-family: var(--font-serif); font-style: italic; font-size: 78cqi; font-weight: 400; line-height: 0.78; letter-spacing: -0.03em; }
.num-unit { margin-top: 2cqi; color: var(--accent); font-family: var(--font); font-style: normal; font-size: 6cqi; font-weight: 600; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; }

/* Waveform with a playhead. */
.tile-art--wave { background: radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), #0a0a0a; }
.wave { position: relative; display: flex; align-items: center; gap: 2.2cqi; width: 78%; height: 48%; }
.wave i {
  flex: 1;
  height: var(--h);
  border-radius: 99px;
  background: rgb(244 240 236 / 0.85);
  animation: bar 1.6s ease-in-out calc(var(--i) * -0.13s) infinite alternate;
}
@keyframes bar { from { scale: 1 0.35; } }
.playhead {
  position: absolute;
  inset-block: -12%;
  left: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: play 6s linear infinite;
}
@keyframes play { to { left: 100%; } }

.tile-art--logo { background: radial-gradient(60% 45% at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), #0a0a0a; }
.tile-art--logo .logo { width: 55%; height: auto; }

/* Three-way switch: the words are the control. */
.tile-art--switch { place-items: center start; padding: 10%; background: #0a0a0a; }
.switch { display: flex; flex-direction: column; font-size: 19cqi; font-weight: 700; line-height: 1; letter-spacing: -0.045em; }
.switch span { color: rgb(244 240 236 / 0.16); }
.switch .on { display: flex; align-items: center; gap: 0.2em; color: var(--color-cream); }
.switch .on::after { content: ""; width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.3em var(--accent); }

/* Contact: the one cream tile. */
.tile-art--cta { place-items: end start; padding: 9%; background: var(--color-cream); color: var(--color-bg); }
.cta-text { font-size: 11cqi; font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; }
.cta-text em { font-family: var(--font-serif); font-weight: 400; font-size: 1.12em; }

/* ---------- Phones: stories ----------
   wall.js swaps the columns for one strip: a near-full-height card at a time, the next one
   peeking in, swiped sideways, with a segmented progress bar above. The work comes first;
   the statement follows it, where the contact line sits on a portfolio. */
@media (max-width: 34.99em) {
  .home { display: flex; flex-direction: column; }
  .statement { position: static; order: 2; min-height: 0; padding-block: 3.5rem 1rem; }
  .statement h1 { font-size: 2rem; }
  /* The landing page has no wall to lead with: the statement stays first. */
  .landing .statement { order: 0; padding-block: 1.5rem 1rem; }
  /* With nothing else on the first screen, the opener can fill it: sized off the phone's width. */
  .landing .statement h1 { font-size: clamp(2.25rem, 10.5vw, 3rem); }

  .wall { flex-direction: column; align-items: stretch; gap: 0.75rem; padding-inline: 0; padding-top: 0.75rem; }

  .wall-progress { display: flex; gap: 4px; margin: 0; padding: 0 var(--pad); list-style: none; }
  .wall-progress li { flex: 1; height: 2px; border-radius: 2px; background: rgb(244 240 236 / 0.22); transition: background-color 0.3s; }
  .wall-progress li[data-seen] { background: var(--color-cream); }

  .wall-strip {
    display: flex;
    gap: 10px;
    /* The strip scrolls, so it clips: pad the top and bottom by the ring's reach (gap + line) and pull the
       margin back by the same amount, so the monocle ring is not cut off and nothing shifts. */
    margin: calc(-1 * (var(--ring-gap) + var(--ring-width))) 0;
    padding: calc(var(--ring-gap) + var(--ring-width)) var(--pad);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .wall-strip::-webkit-scrollbar { display: none; }
  .wall-strip .tile { flex: 0 0 86%; scroll-snap-align: start; scroll-snap-stop: always; }
  /* Fill the screen under the header, leaving room for the nameplate. */
  .wall-strip .tile-art { aspect-ratio: auto; height: max(22rem, calc(100svh - var(--header-h) - 9rem)); }
  .wall-strip .tile-plate { grid-template-rows: 1fr; }
  .wall-strip .tile-plate-inner { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wall-progress li,
  .tile-art,
  .tile-plate,
  .tile-plate-inner,
  .knob i,
  .statement a { transition: none; }
  .tile-art--photo::before,
  .wave i,
  .playhead { animation: none; }
}