/*
Theme Name: Molay One Pager
Theme URI: https://molay.studio
Author: Molay Studio
Description: Brutalist poster-ledger one pager for Molay, image making studio. Autoplaying video work grid (uploads, YouTube, Vimeo, Instagram), editable texts via the Customizer, brief form, fluid responsive layout.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: molay
*/

:root {
  --ink: #111;
  --paper: #f2f0ea;
  --bg: #dcd9d0;
  --accent: #ff4b1f;
  --muted: #555;
  --muted-dark: #cfcbc0;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --black: 'Archivo Black', 'Archivo', Helvetica, Arial, sans-serif;
  --sans: 'Archivo', Helvetica, Arial, sans-serif;
  --pad-x: clamp(16px, 2vw, 28px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation; /* no double-tap zoom; pinch-zoom still works */
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

img, video, iframe { max-width: 100%; display: block; }

.acc { color: var(--accent); }

.molay-sheet {
  background: var(--paper);
  border: 4px solid var(--ink);
  margin: clamp(8px, 1.5vw, 24px);
}

/* ---------- top bar ---------- */

.molay-topbar {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  border-bottom: 4px solid var(--ink);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
}
.molay-topbar > div { display: flex; align-items: center; }
.molay-topbar .cell { padding: 16px var(--pad-x); border-right: 3px solid var(--ink); }
.molay-topbar .cell-loc { flex: 1; gap: 10px; border-right: 0; }
.molay-topbar .cell-nav { gap: 36px; padding: 0 var(--pad-x); }
.molay-topbar .cell-cta {
  background: var(--accent);
  padding: 16px var(--pad-x);
  border-left: 3px solid var(--ink);
}
.molay-topbar .cell-cta a:hover { color: var(--paper); }

.molay-mobilebar { display: none; }
.molay-mobilemenu { display: none; }

/* ---------- hero ---------- */

.molay-hero {
  padding: clamp(24px, 2.8vw, 40px) var(--pad-x) clamp(26px, 2.5vw, 36px);
  border-bottom: 4px solid var(--ink);
  position: relative;
  overflow: hidden;
}
/* with a background set, give it room to be seen */
.molay-hero.has-bg {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.molay-hero.has-bg .molay-hero-inner { width: 100%; }
/* background media + grading overlay (only when a bg is set) */
.molay-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.molay-hero-bg img,
.molay-hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06); /* hides blurred edges */
}
.molay-hero-grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.molay-hero-inner { position: relative; z-index: 2; }
.molay-hero.has-text-color .molay-hero-title,
.molay-hero.has-text-color .molay-hero-tagline,
.molay-hero.has-text-color .molay-hero-arrow,
.molay-hero.has-text-color .molay-hero-tagline .vp-char { color: var(--hero-text); }
.molay-hero-title {
  font-family: var(--black);
  font-weight: 400;
  font-size: clamp(80px, 18.5vw, 270px);
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.molay-hero-title .reg {
  font-family: var(--sans);
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 1.2px;
  vertical-align: super;
}
.molay-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: clamp(24px, 2.8vw, 40px);
  gap: 40px;
}
.molay-hero-tagline {
  font-size: clamp(19px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  max-width: 780px;
  text-wrap: pretty;
}
.molay-hero-arrow {
  font-family: fangsong, "STFangsong", "FangSong", var(--black);
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.15s ease;
}
.molay-hero-arrow:hover { color: var(--accent); transform: translateY(4px); }
.molay-hero-cta { display: none; }

/* variable-proximity: per-letter weight follows the cursor */
.molay-hero-tagline.molay-vp { font-variation-settings: "wght" 500; }
.molay-hero-tagline .vp-word { display: inline-block; white-space: nowrap; }
.molay-hero-tagline .vp-char {
  display: inline-block;
  font-variation-settings: "wght" 500;
  will-change: font-variation-settings;
}

/* ---------- section headers ---------- */

.molay-secthead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--pad-x);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-bottom: 2px solid var(--ink);
}
.molay-secthead .note { color: var(--accent); text-align: right; }

/* ---------- services: brutalist scroll-stack ----------
   Cards sticky-stack under the top bar. --stack-peek is the title-band height,
   so each card that stacks over the last leaves exactly its title showing while
   the description is covered. The last description is covered by the Work
   section, which sits at a higher z-index and scrolls up over the stack. */

.molay-stack {
  --stack-peek: 108px;
  background: var(--stack-bg, #0a0a09);
  color: var(--paper);
  border-bottom: 4px solid var(--ink);
  position: relative;
  z-index: 1;
}
.molay-stack-head {
  border-bottom: 2px solid rgba(242, 240, 234, 0.25);
  color: var(--paper);
}
.molay-stack-head .note { color: var(--accent); }
/* padding-bottom is the dwell zone: all cards stay pinned through it while the
   Work section (pulled up by the matching negative margin) rides over them. */
.molay-stack-cards { position: relative; padding-bottom: 40vh; }

.molay-stack.is-stack .molay-stack-card { position: sticky; }
.molay-stack-card {
  position: relative;
  background: var(--stack-bg, #0a0a09);
  border-top: 3px solid rgba(242, 240, 234, 0.22);
  min-height: 20vh; /* compact, grows with the text */
  padding: 0 var(--pad-x) clamp(20px, 2.5vw, 36px);
  transform-origin: center top;
  box-shadow: 0 -22px 44px rgba(0, 0, 0, 0.55);
}
.molay-stack-card:first-child { border-top: 0; }
.molay-stack-card:last-child { min-height: 0; } /* last one hugs its text */
.molay-stack-title {
  height: var(--stack-peek);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  background: var(--stack-bg, #0a0a09);
}
.molay-stack-no {
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 800;
  color: var(--accent);
  flex: 0 0 auto;
  letter-spacing: 0.08em;
}
.molay-stack-name {
  font-family: var(--black);
  font-weight: 400;
  font-size: clamp(34px, 6.4vw, 104px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.molay-stack-desc {
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  max-width: 760px;
  color: var(--muted-dark);
  padding-top: clamp(12px, 1.6vw, 22px);
}

/* ---------- work ---------- */

.molay-work {
  border-bottom: 4px solid var(--ink);
  position: relative;
  z-index: 2;
  background: var(--paper);
  border-top: 4px solid var(--ink);
  margin-top: -40vh; /* rides up over the stack dwell zone */
}
/* the Selected work bar is the final stack layer: it rides up over the service
   cards and pins under the top bar, with the slider docking beneath it */
.molay-work .molay-secthead {
  position: sticky;
  top: var(--topbar-h, 56px);
  z-index: 42;
  background: var(--paper);
}
.molay-colsrow {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px var(--pad-x);
  border-bottom: 2px solid var(--ink);
  position: sticky;
  top: calc(var(--topbar-h, 56px) + var(--secthead-h, 44px));
  background: var(--paper);
  z-index: 40;
}
.molay-cols-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.molay-cols-icon:hover { background: var(--accent); }
.molay-cols-icon svg { display: block; }
input[type=range].molay-range {
  -webkit-appearance: none;
  appearance: none;
  height: 34px;
  background: transparent;
  cursor: grab;
  flex: 1;
}
input[type=range].molay-range:active { cursor: grabbing; }
input[type=range].molay-range::-webkit-slider-runnable-track {
  height: 24px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 6px, #2a2621 6px 12px);
  border: 3px solid var(--ink);
}
input[type=range].molay-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 34px;
  background: var(--accent);
  border: 3px solid var(--ink);
  margin-top: -8px;
  box-shadow: 4px 4px 0 var(--ink);
}
input[type=range].molay-range::-moz-range-track {
  height: 24px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 6px, #2a2621 6px 12px);
  border: 3px solid var(--ink);
}
input[type=range].molay-range::-moz-range-thumb {
  width: 34px;
  height: 34px;
  background: var(--accent);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
}

.molay-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}
.molay-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border: 3px solid var(--ink);
  background: var(--ink);
  transition: width 0.4s cubic-bezier(0.2, 0.85, 0.25, 1);
  min-width: 0;
}
.molay-media {
  position: relative;
  width: 100%;
  background: var(--ink);
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.molay-media video,
.molay-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  transition: opacity 0.5s ease;
}
/* loading state: black placeholder, triangle pulses inside a spinning ring,
   media fades in when playing */
.molay-media.is-loading video,
.molay-media.is-loading iframe { opacity: 0; }
.molay-media.is-loading .molay-placeholder .tri {
  animation: molay-pulse 1s ease-in-out infinite;
}
.molay-media.is-loading .molay-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(242, 240, 234, 0.18);
  border-top-color: var(--accent);
  animation: molay-spin 0.8s linear infinite;
}
@keyframes molay-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.82); }
}
@keyframes molay-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .molay-media.is-loading .molay-placeholder .tri { animation: none; }
  .molay-media.is-loading .molay-loader::before { animation: none; }
}
.molay-media .molay-placeholder {
  position: absolute;
  inset: 0;
  background: #0a0a09;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.molay-loader {
  position: relative;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.molay-placeholder .tri {
  width: 0;
  height: 0;
  border-left: 20px solid var(--accent);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  margin-left: 5px;
}
.molay-placeholder .file {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #b5b0a4;
  text-transform: uppercase;
  text-align: center;
  padding: 0 10px;
}
.molay-tag {
  position: absolute;
  top: 10px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 3px 7px;
}
.molay-tag-idx {
  left: 10px;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-weight: 800;
}
.molay-tag-ar {
  right: 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  letter-spacing: 0.08em;
  border: 1px solid var(--paper);
}
.molay-card-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-top: 3px solid var(--ink);
  background: var(--paper);
}
.molay-card-names { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.molay-card-names .client {
  font-family: var(--black);
  font-size: 15px;
  text-transform: uppercase;
  white-space: nowrap;
}
.molay-card-names .kind {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.molay-sound {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 5px 9px;
  cursor: pointer;
  white-space: nowrap;
  min-width: 104px;     /* fixed so on/off labels never resize the bar */
  text-align: center;
}
.molay-sound.is-on { background: var(--accent); }

/* focus mode: hover one video, the rest of the page dims and blurs. The overlay
   is injected inside .molay-work so the focused card (higher z within that same
   stacking context) stays crisp above it. Dim/blur come from the Customizer. */
.molay-focus-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 45;
}
.molay-focus-overlay.on { opacity: 1; }
.molay-card.is-focus { position: relative; z-index: 60; }

/* film grain over the whole page */
.molay-noise {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 90;
}

/* fullscreen: the media box goes fullscreen, letterbox instead of crop */
.molay-fs {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 4px 7px;
  cursor: pointer;
  line-height: 0;
}
.molay-fs svg { display: block; }
.molay-card-actions { display: flex; gap: 6px; align-items: center; }
.molay-media:fullscreen { background: #000; }
.molay-media:fullscreen video,
.molay-media:fullscreen iframe { object-fit: contain; }
.molay-media:-webkit-full-screen { background: #000; }
.molay-media:-webkit-full-screen video,
.molay-media:-webkit-full-screen iframe { object-fit: contain; }

/* CSS fullscreen fallback: iOS refuses native fullscreen for iframes (Vimeo,
   YouTube), so fill the viewport instead. Needs !important to beat the inline
   aspect-ratio/height the gallery layout sets. */
.molay-media.is-faux-fs {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important; /* dvh where supported; vh is the fallback */
  aspect-ratio: auto !important;
  z-index: 9999;
  background: #000;
}
.molay-media.is-faux-fs video,
.molay-media.is-faux-fs iframe { object-fit: contain; }
.molay-media.is-faux-fs .molay-fs-close { display: flex; }
.molay-media.is-faux-fs .molay-tag { display: none; }
body.molay-fs-lock { overflow: hidden; }
/* lift the work section above the top bar while faux-fullscreen is open */
body.molay-fs-lock .molay-work { z-index: 999; }

/* close (X) button: only visible while that media is fullscreen */
.molay-fs-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-family: var(--sans);
  font-size: 34px;
  line-height: 1;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--paper);
  cursor: pointer;
}
.molay-media:fullscreen .molay-fs-close { display: flex; }
.molay-media:-webkit-full-screen .molay-fs-close { display: flex; }

/* ---------- brief ---------- */

.molay-brief {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(28px, 4.4vw, 64px) clamp(16px, 4.4vw, 64px) clamp(32px, 5.8vw, 84px);
}
.molay-brief-head {
  display: flex;
  align-items: baseline;
  gap: 36px;
  border-bottom: 3px solid var(--paper);
  padding-bottom: 32px;
  margin-bottom: 52px;
}
.molay-brief-title {
  font-family: var(--black);
  font-weight: 400;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
}
.molay-brief-sub {
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted-dark);
  flex: 1 1 0%;
  min-width: 0;
}
.molay-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
}
.molay-form .full { grid-column: 1 / -1; }
.molay-form-step {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.molay-form-step + .molay-form-step,
.molay-form-step.later { margin-top: 14px; }
.molay-form input,
.molay-form select {
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--paper);
  border-radius: 0;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  padding: 12px 0;
  outline: none;
  width: 100%;
}
.molay-form select option { color: var(--ink); background: var(--paper); }
.molay-form textarea {
  grid-column: 1 / -1;
  background: transparent;
  border: 3px solid var(--paper);
  border-radius: 0;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  padding: 16px;
  outline: none;
  resize: vertical;
  width: 100%;
}
.molay-form ::placeholder { color: #8a877e; opacity: 1; }
.molay-form input:focus,
.molay-form select:focus { border-bottom-color: var(--accent); }
.molay-form textarea:focus { border-color: var(--accent); }
.molay-submit {
  grid-column: 1 / -1;
  background: var(--accent);
  color: var(--ink);
  border: 0;
  font-family: var(--black);
  font-size: clamp(22px, 2.5vw, 36px);
  text-transform: uppercase;
  padding: 22px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s ease;
}
.molay-submit:hover { background: var(--paper); }
.molay-success {
  border: 3px solid var(--accent);
  padding: clamp(24px, 2.8vw, 40px);
  font-family: var(--black);
  font-size: clamp(24px, 3vw, 44px);
  text-transform: uppercase;
  color: var(--accent);
}
.molay-form-error {
  grid-column: 1 / -1;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  display: none;
}
.molay-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */

.molay-footer { border-top: 4px solid var(--ink); overflow: hidden; }
.molay-footer-big {
  font-family: var(--black);
  font-weight: 400;
  font-size: clamp(44px, 8.3vw, 120px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  white-space: nowrap;
  padding: 16px var(--pad-x) 0;
}
.molay-footer-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px var(--pad-x);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.molay-footer-links { display: flex; gap: 28px; flex-wrap: wrap; }

/* ---------- mobile, mirrors the 4A screen ---------- */

@media (max-width: 860px) {

  .molay-sheet { margin: 0; border-left: 0; border-right: 0; border-top: 0; }

  .molay-topbar { display: none; }

  /* two blocks: logo | separator | menu toggle */
  .molay-mobilebar {
    display: flex;
    align-items: stretch;
    padding: 0;
    border-bottom: 5px solid var(--ink);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
  }
  .molay-mobilebar .mb-logo {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 16px;
    border-right: 4px solid var(--ink);
  }
  .molay-mobilebar .mb-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .molay-burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .molay-burger span {
    width: 26px;
    height: 3px;
    background: var(--ink);
    display: block;
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
  }
  .molay-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .molay-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .molay-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* smooth open/close */
  .molay-mobilemenu {
    display: block;
    overflow: hidden;
    max-height: 0;
    background: var(--paper);
    position: sticky;
    top: var(--topbar-h, 58px);
    z-index: 49;
    transition: max-height 0.35s ease, border-bottom-width 0.35s ease;
    border-bottom: 0 solid var(--ink);
  }
  .molay-mobilemenu.open {
    max-height: 60vh;
    border-bottom: 5px solid var(--ink);
  }
  .molay-mobilemenu a {
    display: block;
    padding: 15px 16px;
    border-bottom: 3px solid var(--ink);
    font-family: var(--black);
    font-size: 22px;
    text-transform: uppercase;
  }
  .molay-mobilemenu a:last-child { border-bottom: 0; background: var(--accent); }

  .molay-hero { padding: 30px 16px 30px; }
  .molay-hero-title { font-size: clamp(64px, 24vw, 110px); }
  .molay-hero-title .reg { display: none; }
  .molay-hero-row {
    margin-top: 20px;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px 16px;
  }
  .molay-hero-tagline { font-size: 19px; line-height: 1.2; flex: 1 1 100%; }
  .molay-hero-arrow { font-size: 40px; }
  .molay-hero-cta {
    display: inline-block;
    background: var(--accent);
    border: 3px solid var(--ink);
    padding: 11px 16px;
    font-family: var(--black);
    font-size: 14px;
    text-transform: uppercase;
    margin-right: auto;
  }

  .molay-secthead { padding: 12px 16px; font-size: 12px; letter-spacing: 0.14em; }

  .molay-stack { --stack-peek: 78px; }
  .molay-stack-cards { padding-bottom: 30vh; }
  .molay-stack-card {
    min-height: 22vh;
    padding: 0 16px 20px;
  }
  .molay-stack-title { gap: 12px; }
  .molay-stack-name { font-size: clamp(30px, 11vw, 52px); }
  .molay-stack-desc { font-size: 15px; padding-top: 12px; }
  .molay-work { margin-top: -30vh; }

  .molay-colsrow { display: none; }
  .molay-gallery { flex-direction: column; padding: 16px; gap: 18px; }
  /* stroke blocks a touch heavier on mobile */
  .molay-card { width: 100% !important; border-width: 4px; }
  .molay-card-bar { padding: 9px 11px; border-top-width: 4px; }
  .molay-media { height: auto !important; }
  .molay-card-names .client { font-size: 14px; }
  .molay-card-names .kind { font-size: 10px; }

  .molay-brief { padding: 28px 16px 32px; }
  .molay-brief-head {
    flex-direction: column;
    gap: 14px;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 24px;
  }
  .molay-brief-title { font-size: 44px; white-space: normal; }
  .molay-brief-sub { font-size: 15px; }
  .molay-form { grid-template-columns: 1fr; gap: 16px; }
  .molay-form input, .molay-form select { font-size: 16px; padding: 10px 0; }
  .molay-form textarea { font-size: 15px; padding: 12px; }
  .molay-submit { font-size: 24px; padding: 16px; }
  .molay-success { font-size: 26px; padding: 24px; }

  .molay-footer-big { display: none; }
  .molay-footer-bar {
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .molay-footer-links { gap: 16px; }
}

/* very wide screens: keep the sheet from stretching type absurdly */
@media (min-width: 1920px) {
  .molay-sheet { max-width: 1872px; margin-left: auto; margin-right: auto; }
}