/* ==========================================================================
   Davis Lowe — site styles
   Sections: tokens · base · page transitions · header · buttons & forms ·
   layout · home hub · social · post view · awesomesaucemovie · portfolio ·
   scroll reveal · reduced motion
   ========================================================================== */

/* ---------- Tokens: every color, size, and motion setting lives here ------
   Fonts, accent color, background tone, and corners come from Admin -> Site
   style (set in base.html as --bg-light, --accent-light, etc.). The values
   after the commas below are only fallbacks. */
:root {
  --bg: var(--bg-light, #f7f5f1);
  --surface: var(--surface-light, #ffffff);
  --surface-2: var(--surface-2-light, #efece6);
  --text: #141414;
  --muted: #6f6a63;
  --line: rgba(20, 20, 20, 0.09);
  --accent: var(--accent-light, #ff4f1f);
  --accent-text: var(--accent-text-light, #c93a12);   /* accent, darkened if needed so small text stays readable */
  --on-accent: var(--on-accent-light, #ffffff);       /* text that sits on an accent background */
  --accent-deep: color-mix(in oklab, var(--accent), #0e1a5e 62%);  /* a deeper partner shade */
  --glass: color-mix(in srgb, var(--bg) 72%, transparent);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(0,0,0,.18);
  --error: #c4231a;
  --ok-bg: #e9f5ea; --ok-line: #bfe0c3; --ok-text: #1e5b28;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --header-h: 64px;

  --ease: cubic-bezier(.22, 1, .36, 1);       /* fast start, gentle settle */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* tiny overshoot for pops */
  --fast: .2s;
  --base: .45s;
  --slow: .8s;
}
/* Dark colors: used when the device is in dark mode (unless the site is set to
   "Always light"), or always when the site is set to "Always dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--bg-dark, #0f0f11); --surface: var(--surface-dark, #18181b); --surface-2: var(--surface-2-dark, #222226);
    --text: #f2efe9; --muted: #a19c94; --line: rgba(255, 255, 255, 0.09);
    --accent: var(--accent-dark, #ff6a3d); --accent-text: var(--accent-text-dark, #ff8a63); --on-accent: var(--on-accent-dark, #160803);
    --accent-deep: color-mix(in oklab, var(--accent), #0b1440 55%);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -16px rgba(0,0,0,.7);
    --error: #ff8a80; --ok-bg: #16281a; --ok-line: #24442b; --ok-text: #a8e0b2;
  }
}
:root[data-theme="dark"] {
  --bg: var(--bg-dark, #0f0f11); --surface: var(--surface-dark, #18181b); --surface-2: var(--surface-2-dark, #222226);
  --text: #f2efe9; --muted: #a19c94; --line: rgba(255, 255, 255, 0.09);
  --accent: var(--accent-dark, #ff6a3d); --accent-text: var(--accent-text-dark, #ff8a63); --on-accent: var(--on-accent-dark, #160803);
  --accent-deep: color-mix(in oklab, var(--accent), #0b1440 55%);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -16px rgba(0,0,0,.7);
  --error: #ff8a80; --ok-bg: #16281a; --ok-line: #24442b; --ok-text: #a8e0b2;
}
/* The awesomesaucemovie page is always dark, like a cinema. */
.theme-cinema {
  --bg: #08080a; --surface: #131316; --surface-2: #1c1c20;
  --text: #f4f1ea; --muted: #9d988f; --line: rgba(255,255,255,.08);
  --accent: var(--accent-dark, #ff6a3d); --accent-text: var(--accent-text-dark, #ff8a63); --on-accent: var(--on-accent-dark, #160803);
  color-scheme: dark;
}

/* ---------- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  font: 400 16px/1.6 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
  transition: background-color var(--base) var(--ease), color var(--base) var(--ease);
}
main { flex: 1; padding-top: 28px; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--on-accent); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: 8px; }
.muted { color: var(--muted); }
.hp { position: absolute; left: -9999px; }  /* spam trap, hidden from people */

.wrap { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: 1180px; }
.wrap-narrow { max-width: 620px; }
.display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: clamp(2.2rem, 5vw, 3.6rem); }
.eyebrow { font-size: .78rem; font-weight: var(--display-weight); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .6rem; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 38rem; }
.section-label { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: var(--display-tracking); margin: 3rem 0 1.25rem; font-weight: var(--display-weight); }
.back { margin: 1.5rem 0 1rem; }
.back a { color: var(--muted); text-decoration: none; transition: color var(--fast); }
.back a:hover { color: var(--text); }
.page-head { padding: 3.5rem 0 2.5rem; }
.empty { text-align: center; padding: 5rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); margin: 1rem 0 3rem; }
.empty-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--display-weight); margin-bottom: .25rem; }
.prose { font-size: 1.08rem; max-width: 40rem; }

/* ---------- Page transitions (View Transitions API) -----------------------
   When you click to another page, the old page eases out and the new one
   eases in. Elements with a matching view-transition-name (like a photo on
   the grid and the same photo on its post page) morph from one spot to the
   other. Browsers without support just switch pages normally. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .25s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease) both; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: var(--ease); }
::view-transition-image-pair(*) { isolation: auto; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px) scale(.995); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
/* Moving between the main pages slides sideways: forward = new page from the
   right, back = from the left (the direction is set by base.html). */
html:active-view-transition-type(forward)::view-transition-old(root) { animation: slide-out-left .4s var(--ease) both; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation: slide-in-right .55s var(--ease) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation: slide-out-right .4s var(--ease) both; }
html:active-view-transition-type(back)::view-transition-new(root) { animation: slide-in-left .55s var(--ease) both; }
@keyframes slide-out-left { to { opacity: 0; transform: translateX(-30%); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(30%); } }
@keyframes slide-out-right { to { opacity: 0; transform: translateX(30%); } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-30%); } }

/* ---------- Header and menu ----------------------------------------------- */
.site-header {
  view-transition-name: site-header;  /* stays put while pages change */
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  background: var(--glass);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; flex-shrink: 0; }
.brand .avatar { transition: transform var(--base) var(--ease-spring); }
.brand:hover .avatar { transform: rotate(-8deg) scale(1.08); }
.nav { position: relative; display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: var(--radius-pill); }
.nav a {
  position: relative; z-index: 1;
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: .94rem; font-weight: 500; text-decoration: none;
  color: var(--muted);
  transition: color var(--fast) var(--ease);
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.nav-label { position: relative; z-index: 1; }
/* The solid pill behind the current page. It has a view-transition-name, so
   when you switch pages it glides from the old link to the new one. */
.nav-pill {
  view-transition-name: nav-pill;
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--text);
}
.nav a[aria-current] { color: var(--bg); }
/* The soft highlight that follows your mouse across the links (moved by JS). */
.nav-hover {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0;
  border-radius: var(--radius-pill); background: var(--line);
  opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease), width .35s var(--ease), opacity var(--fast);
}
.nav.is-hovering .nav-hover { opacity: 1; }
.header-cta { flex-shrink: 0; }

/* Computer: the menu hides above the screen and slides down when the mouse
   reaches the top (site.js adds .is-open). A thin handle hints it's there. */
.top-handle { display: none; }
@media (hover: hover) and (pointer: fine) {
  .site-header { transform: translateY(calc(-100% - 3px)); transition: transform .5s var(--ease); }
  .site-header.is-open, .site-header:focus-within, .menu-open .site-header { transform: none; }
  .top-handle {
    display: block; position: fixed; z-index: 49; top: 7px; left: 50%; translate: -50% 0;
    width: 44px; height: 4px; border-radius: var(--radius-pill);
    background: var(--text); opacity: .28; pointer-events: none;
    transition: opacity .3s var(--ease), translate .5s var(--ease);
  }
  .site-header.is-open + .top-handle, .menu-open .top-handle { opacity: 0; translate: -50% 12px; }
}
/* Phones and tablets: no header; swipe left/right between pages. */
@media (hover: none) {
  .site-header { display: none; }
  main { padding-top: max(16px, env(safe-area-inset-top)); }
  .can-swipe body { touch-action: pan-y; }  /* sideways drags go to the swipe, not the browser */
    content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill);
    background: var(--muted); opacity: .55;
    transition: width .45s var(--ease), opacity .3s, background-color .3s;
  }
}

/* ---------- Avatars ------------------------------------------------------- */
.avatar {
  display: grid; place-items: center; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: var(--display-weight);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 32px; height: 32px; font-size: .8rem; }
.avatar-sm { width: 40px; height: 40px; font-size: .9rem; }
.avatar-md { width: 72px; height: 72px; font-size: 1.5rem; }
.avatar-lg { width: 150px; height: 150px; font-size: 3rem; box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent); }

/* ---------- Buttons and forms --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--radius-pill);
  font: 500 .95rem/1 var(--font); text-decoration: none; cursor: pointer;
  color: var(--text); background: transparent;
  border: 1px solid var(--line);
  transition: transform var(--fast) var(--ease), background-color var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.btn:hover { border-color: var(--muted); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-solid { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn-solid:hover { border-color: transparent; box-shadow: 0 8px 20px -8px var(--accent); }
.btn-sm { padding: 8px 14px; font-size: .88rem; }
.btn-lg { padding: 14px 26px; font-size: 1rem; }

.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > span, .form label:not(.field) { font-size: .85rem; font-weight: 600; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form input:not([type=hidden]), .form textarea, .subscribe-box input,
.comment-form input, .comment-form textarea {
  width: 100%; padding: 12px 14px;
  font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.form input:focus, .form textarea:focus, .subscribe-box input:focus,
.comment-form input:focus, .comment-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form textarea, .comment-form textarea { resize: vertical; min-height: 90px; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--error); font-size: .88rem; }
.notice {
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-text);
  padding: 12px 14px; border-radius: var(--radius-sm); margin: 0 0 1rem;
  animation: pop-in .5s var(--ease-spring) both;
}
.notice-error { background: transparent; border-color: var(--error); color: var(--error); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* Older simple pages (subscribe, about, etc.) */
.simple-page { padding: 3rem 0; }
.simple-page h2 { font-family: var(--font-display); font-size: 2rem; letter-spacing: var(--display-tracking); font-weight: var(--display-weight); }
.comment-form p { margin: 0 0 12px; }
.comment-form button { margin-top: 4px; }
.comment-form button:not(.btn) {
  font: 500 .95rem/1 var(--font); padding: 12px 20px; border: 0; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent); cursor: pointer;
}
.page-photo { width: 100%; max-width: 280px; border-radius: var(--radius); margin: 0 0 1.5rem; }

/* ---------- Home hub ------------------------------------------------------ */
.hub-intro { display: flex; align-items: center; gap: 20px; padding: 40px 20px 28px; max-width: 1400px; margin: 0 auto; }
.hub-intro .display { margin: 0; font-size: clamp(2rem, 4.5vw, 3.2rem); }
.hub-intro .lede { margin: 4px 0 0; }
.hub {
  display: flex; gap: 12px;
  height: calc(100vh - 68px); min-height: 440px;
  padding: 0 20px 40px; max-width: 1400px; margin: 0 auto;
}
/* Each panel grows when hovered; its neighbours shrink to make room. */
.panel {
  --mx: 50%; --my: 50%;
  position: relative; flex: 1; min-width: 0;
  border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  text-decoration: none; color: #fff;
  background: #222;
  transition: flex-grow var(--slow) var(--ease), transform var(--base) var(--ease);
  animation: panel-in .9s var(--ease) both;
  animation-delay: calc(var(--n) * 90ms + 80ms);
}
.hub:hover .panel { flex-grow: .8; }
.hub .panel:hover, .hub .panel:focus-visible { flex-grow: 1.9; }
@keyframes panel-in { from { opacity: 0; transform: translateY(40px) scale(.97); } }
.panel-social { background: var(--accent); }
.panel-film { background: #121214; }
.panel-portfolio { background: var(--accent-deep); }
.panel-bg { position: absolute; inset: 0; z-index: -2; transition: transform 1.2s var(--ease), filter var(--slow) var(--ease); }
.panel-bg > img, .panel-bg > video { width: 100%; height: 100%; object-fit: cover; }
.panel:hover .panel-bg { transform: scale(1.06); }
.panel::after { /* darken the bottom so text stays readable, plus a cursor glow */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.18), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.05) 55%, rgba(0,0,0,.15));
}
.collage { display: grid; width: 100%; height: 100%; gap: 3px; background: #000; }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage-2 { grid-template-columns: 1fr 1fr; }
.collage-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.collage-3 img:first-child { grid-row: span 2; }
.collage-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.panel-pattern { /* a slowly drifting sheen when there's no content yet */
  position: absolute; inset: -40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 40%),
              radial-gradient(circle at 70% 70%, rgba(0,0,0,.35), transparent 45%);
  animation: drift 14s ease-in-out infinite alternate;
}
.panel-film .panel-pattern { background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 40%), radial-gradient(circle at 75% 70%, rgba(80,80,120,.35), transparent 45%); }
@keyframes drift { to { transform: translate(8%, -6%) rotate(8deg); } }
.panel-body {
  container-type: inline-size;
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 4px; padding: 28px 88px 28px 28px; /* room on the right for the arrow */
}
.panel-kicker { font-size: .8rem; font-weight: 600; opacity: .7; letter-spacing: .1em; }
.panel-title {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  /* Size to the panel's own width (cqi), so long names like
     "awesomesaucemovie" shrink to fit instead of breaking mid-word. */
  font-size: clamp(.9rem, 8.5cqi, 2.6rem); line-height: 1;
  white-space: nowrap;
}
.panel-sub {
  max-width: 22rem; opacity: 0; transform: translateY(10px);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
.panel:hover .panel-sub, .panel:focus-visible .panel-sub { opacity: .9; transform: none; transition-delay: .12s; }
.panel-go {
  position: absolute; right: 24px; bottom: 26px;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
  transition: transform var(--base) var(--ease-spring), background-color var(--fast);
}
.panel:hover .panel-go { transform: translateX(4px) rotate(-45deg) scale(1.08); background: #fff; color: #111; }
.hub:hover .panel:not(:hover) .panel-go { opacity: 0; transform: scale(.6); }

/* ---------- Social: profile header and grid ------------------------------- */
.profile-head {
  display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center;
  padding: 48px 0 40px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.profile-head .avatar-lg { margin-left: 24px; }
.profile-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.profile-row h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); margin: 0 8px 0 0; }
.profile-stats { margin-bottom: 10px; }
.profile-name { font-weight: 600; margin-bottom: 2px; }
.profile-info p:last-child { margin-bottom: 0; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.tile {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  background: var(--surface-2); text-decoration: none; color: inherit;
  border-radius: calc(var(--radius-sm) / 2);
}
.tile-media { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s var(--ease); }
.tile:hover .tile-media { transform: scale(1.06); }
.tile-text {
  display: grid; place-items: center; padding: 18px; text-align: center;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(.85rem, 1.6vw, 1.1rem); line-height: 1.3;
}
.tile-text p { margin: 0; overflow-wrap: anywhere; }
.tile:nth-child(3n+2) .tile-text { background: var(--text); color: var(--bg); }
.tile:nth-child(3n) .tile-text { background: var(--accent-deep); color: #fff; }
.tile-badge { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.tile-badge svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.tile-badge svg path[d^="M8"] { fill: currentColor; stroke: none; }
.tile-hover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(0,0,0,.38); color: #fff; font-weight: 600;
  opacity: 0; transition: opacity .3s var(--ease);
}
.tile-hover svg { width: 22px; height: 22px; fill: #fff; }
.tile:hover .tile-hover, .tile:focus-visible .tile-hover { opacity: 1; }
.tile.is-new { animation: tile-in .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes tile-in { from { opacity: 0; transform: translateY(20px) scale(.96); } }
.load-more { height: 1px; margin: 0; padding: 0; overflow: hidden; visibility: hidden; }  /* invisible marker: reaching it loads more posts */
.load-more a { color: var(--muted); }
.load-more.is-loading::after { content: ""; display: inline-block; width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.load-more.is-loading a { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Single post view ---------------------------------------------- */
.post-view {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); margin-bottom: 3rem;
}
.post-media { position: relative; background: #000; min-height: 320px; display: flex; }
.post-view-text .post-media { background: var(--accent); }
.carousel { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.carousel::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: center; position: relative; }
.slide img, .slide video { width: 100%; max-height: 82vh; object-fit: contain; }
.slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 14px; color: #fff; font-size: .9rem; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); }
.post-text-card { width: 100%; min-height: 420px; font-size: clamp(1.4rem, 3vw, 2rem); padding: 40px; }
.carousel-btn {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.88); color: #111; font-size: 1.4rem; line-height: 1;
  opacity: 0; transition: opacity var(--fast), transform var(--fast) var(--ease-spring);
}
.carousel-btn.prev { left: 12px; } .carousel-btn.next { right: 12px; }
.post-media:hover .carousel-btn { opacity: 1; }
.carousel-btn:hover { transform: scale(1.1); }
.dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.dots span { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.5); transition: width .35s var(--ease), background-color .35s; }
.dots span.on { width: 18px; background: #fff; }
.post-side { display: flex; flex-direction: column; min-width: 0; }
.post-author { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.post-author time { display: block; font-size: .82rem; color: var(--muted); }
.post-caption { padding: 18px 18px 6px; }
.post-caption h1 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: var(--display-tracking); font-weight: var(--display-weight); }
.comments { flex: 1; padding: 6px 18px 12px; overflow-y: auto; max-height: 46vh; }
.comment { padding: 10px 0; border-top: 1px solid var(--line); animation: pop-in .5s var(--ease) both; }
.comment time { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.post-side .comment-form { padding: 14px 18px 18px; border-top: 1px solid var(--line); }

/* ---------- awesomesaucemovie: a list of dates -----------------------------
   Each video is a big date. Hovering one fades the others back and shows a
   small preview that follows the cursor (site.js moves it). */
.vhs { --osd-color: #f4f1ea; }
.tape-list {
  position: relative; z-index: 1;  /* in front of the full-screen preview */
  list-style: none; margin: 0; padding: 10vh 5vw;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
.tape {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-block;
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-variant-numeric: tabular-nums; letter-spacing: var(--display-tracking);
  font-size: clamp(2.6rem, 9vw, 8.5rem); line-height: 1.02;
  color: #f4f1ea; text-shadow: 0 1px 24px rgba(0, 0, 0, .35);
  transition: opacity .35s var(--ease), translate .5s var(--ease);
}
.tape-list:hover .tape, .tape-list:focus-within .tape { opacity: .3; }
.tape-list .tape:hover, .tape-list .tape:focus-visible { opacity: 1; translate: 18px 0; }
.tape:focus-visible { outline: none; }

/* The hovered date's preview fills the screen behind the list. */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #000; opacity: 0; transition: opacity .6s var(--ease); }
.backdrop.is-on { opacity: 1; }
.backdrop-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); }
.backdrop-layer.is-on { opacity: 1; }
.backdrop-layer > img, .backdrop-layer > video { width: 100%; height: 100%; object-fit: cover; }
.backdrop-tint { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.scan { position: absolute; inset: 0; pointer-events: none; opacity: .4; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); }
@media (hover: none) { .backdrop { display: none; } }  /* phones: tapping a date plays it */

/* Viewfinder corners (used around the full-screen player). */
.finder { position: absolute; pointer-events: none; }
.finder i { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255, 255, 255, .85); }
.finder i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.finder i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.finder i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.finder i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* The player: a dialog that fades in over a dark backdrop. */
.theater {
  width: min(1100px, 94vw); max-width: none; padding: 0; border: 0;
  background: transparent; color: #fff; overflow: visible;
  opacity: 0; transform: scale(.96);
  transition: opacity .35s var(--ease), transform .5s var(--ease), overlay .5s allow-discrete, display .5s allow-discrete;
}
.theater[open] { opacity: 1; transform: none; }
@starting-style { .theater[open] { opacity: 0; transform: scale(.96); } }
.theater::backdrop { background: rgba(0,0,0,0); transition: background-color .4s var(--ease), overlay .4s allow-discrete, display .4s allow-discrete; }
.theater[open]::backdrop { background: rgba(0,0,0,.92); }
@starting-style { .theater[open]::backdrop { background: rgba(0,0,0,0); } }
.theater-screen { position: relative; }
.theater-frame { aspect-ratio: 16 / 9; background: #000; border-radius: calc(var(--radius) / 3); overflow: hidden; }
.theater-frame iframe, .theater-frame video { width: 100%; height: 100%; border: 0; display: block; }
.theater .finder { inset: -10px; }
.theater-title { margin: 22px 0 0; color: var(--muted); text-shadow: none; }
.theater-close {
  position: absolute; top: -56px; right: -10px; width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: background-color var(--fast), transform var(--base) var(--ease-spring);
}
.theater-close:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }

/* ---------- Portfolio ----------------------------------------------------- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 36px 28px; }
.project-grid-sm { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 3rem; }
.project { --mx: 50%; --my: 50%; display: grid; gap: 8px; text-decoration: none; }
.project-art {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius); background: var(--surface-2);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.project-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.project-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255,255,255,.22), transparent 60%); opacity: 0; transition: opacity var(--base); }
.project:hover .project-art { transform: translateY(-6px); box-shadow: var(--shadow); }
.project:hover .project-art img { transform: scale(1.05); }
.project:hover .project-art::after { opacity: 1; }
.project-placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 5rem; font-weight: var(--display-weight); color: var(--muted); background: var(--surface-2); }
.project-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.project-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3rem; letter-spacing: var(--display-tracking); }
.project-summary { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: .78rem; font-weight: 500; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); }
.project-page { padding-bottom: 1rem; }
.project-art-lg { aspect-ratio: 16 / 9; margin-bottom: 2rem; }
.contact {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px;
  margin: 6rem 0 4rem; padding: 48px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.contact-intro .display { font-size: clamp(2rem, 4vw, 3rem); }
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 28px 32px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); margin: 2rem 0; }
.cta-band h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0; font-weight: var(--display-weight); }

/* ---------- Scroll reveal -------------------------------------------------
   Items marked data-reveal rise and fade in as they scroll into view. The
   animation is tied to scroll position, so it moves with you. Browsers that
   don't support this just show everything normally. */
@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}
@keyframes reveal { from { opacity: 0; transform: translateY(36px) scale(.985); } }

/* ---------- Phones and tablets -------------------------------------------- */
@media (max-width: 860px) {
  .post-view { grid-template-columns: 1fr; }
  .comments { max-height: none; }
  .contact { grid-template-columns: 1fr; padding: 28px; gap: 24px; margin-top: 4rem; }
}
@media (max-width: 720px) {
  :root { --header-h: 58px; }
  .site-header { padding: 0 12px; gap: 8px; }
  .brand-name, .header-cta { display: none; }
  .nav { margin: 0 0 0 auto; overflow-x: auto; scrollbar-width: none; }
  .nav a { padding: 8px 10px; font-size: .86rem; }
  .hub { flex-direction: column; height: auto; min-height: 0; padding-bottom: 28px; }
  .panel { flex: none; height: 240px; }
  .hub:hover .panel, .hub .panel:hover { flex-grow: 0; }
  .panel-sub { opacity: .85; transform: none; }
  .hub-intro { padding-top: 28px; }
  .profile-head { grid-template-columns: auto 1fr; gap: 20px; padding: 28px 0; }
  .profile-head .avatar-lg { width: 86px; height: 86px; font-size: 1.8rem; margin-left: 0; }
  .profile-row h1 { font-size: 1.25rem; }
  .grid { gap: 2px; }
  .tile { border-radius: 0; }
  .field-row { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .theater-close { top: -52px; }
}

/* ---------- Hidden text labels ---------------------------------------------
   You chose a site with no visible titles or labels. Everything listed here is
   hidden from view but stays in the page, so screen readers and search engines
   can still read it. To bring a label back, delete its line from this list. */
.visually-hidden,
.hub-intro,
.panel-kicker, .panel-title, .panel-sub,
.brand-name,
.profile-row h1, .profile-name, .profile-stats,
.post-caption h1, .post-author strong,
.theater-title,
.page-head, .project-meta, .project-summary, .project .tags, .project-page header,
.section-label, .cta-band h2, .contact-intro,
.simple-page h1, .simple-page h2,
.empty-title,
.subscribe-box > label, .field > span, .comment-form label, .back {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Tidy the spaces those labels left behind. */
.contact { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }
.cta-band { justify-content: center; }
.profile-row { margin-bottom: 14px; }
.post-caption:has(> p:only-child:empty) { display: none; }

/* ---------- Blocky style -------------------------------------------------
   Admin -> Site style -> Corners -> "Blocky": flat, square shapes. No
   outlines or shadows; buttons are solid blocks. */
[data-corners="blocky"] .avatar,
[data-corners="blocky"] .panel-go,
[data-corners="blocky"] .dots span,
[data-corners="blocky"] .carousel-btn { border-radius: 0; }
[data-corners="blocky"] .btn { border-color: transparent; background: var(--surface-2); }
[data-corners="blocky"] .btn-solid { background: var(--accent); }
[data-corners="blocky"] .btn:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
[data-corners="blocky"] .btn:active { transform: scale(.97); }
[data-corners="blocky"] .panel-go { background: transparent; border: 0; }
[data-corners="blocky"] .tag { background: var(--surface-2); }

/* ---------- Full screen, edge to edge ------------------------------------
   Pages fill the whole window. Posts, videos, and projects sit right next to
   each other with no gaps, borders, rounded corners, or shadows. */
main { padding-top: 0; }
.bleed { width: 100%; }
.site-header { border-bottom: 0; }
.simple-page, .bleed > .wrap, .project-page { padding-top: 48px; }
.empty { border: 0; border-radius: 0; margin: 0; padding: 30vh 20px; }

/* Home: the three panels fill the window. */
.hub { gap: 0; padding: 0; max-width: none; height: 100vh; height: 100svh; min-height: 0; }
.panel { border-radius: 0; }

/* life: a full-width grid of touching squares. */
.grid { gap: 0; margin: 0; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1800px) { .grid { grid-template-columns: repeat(5, 1fr); } }
.tile { border-radius: 0; border: 0; }

/* A single post: fills the screen, photo on one side, comments on the other. */
.post-view { border: 0; border-radius: 0; box-shadow: none; margin: 0; min-height: 100vh; min-height: 100svh; }
.post-media { min-height: 100vh; min-height: 100svh; }
.slide img, .slide video { max-height: 100vh; max-height: 100svh; }
.post-author, .post-side .comment-form, .comment { border-color: transparent; }
.comments { max-height: none; }

.theater-frame { border-radius: 0; }

/* work: touching project images, then the contact form. */
.project-grid, .project-grid-sm { gap: 0; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.project { gap: 0; }
.project-art, .project-art-lg { border-radius: 0; border: 0; margin: 0; }
.project:hover .project-art { transform: none; box-shadow: none; }
.project-art-lg { display: block; aspect-ratio: auto; height: 80vh; height: 80svh; }
.contact { border: 0; border-radius: 0; box-shadow: none; background: transparent; margin: 0 auto; padding: 64px 0; }
.cta-band { border: 0; border-radius: 0; box-shadow: none; }

/* Grid items fade in place as you scroll (sliding would open gaps between them). */
@supports (animation-timeline: view()) {
  .grid > [data-reveal], .project-grid > [data-reveal] { animation-name: reveal-fade; }
}
@keyframes reveal-fade { from { opacity: 0; } }
.tile.is-new { animation-name: reveal-fade; }

/* Typing boxes keep a faint outline so you can see where to type. */
.form input:not([type=hidden]), .form textarea, .subscribe-box input,
.comment-form input, .comment-form textarea { border: 1px solid var(--line); box-shadow: none; }

@media (hover: none) {
}
@media (max-width: 860px) {
  .post-view { min-height: 0; }
  .post-media { min-height: 0; }
}
@media (max-width: 720px) {
  .hub { flex-direction: column; height: 100vh; height: 100svh; padding: 0; }
  .panel, .hub .panel:hover { flex: 1 1 0; height: auto; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Motion setting and reduced motion ----------------------------
   "Subtle" (Admin -> Site style) keeps transitions but makes them quicker and
   drops looping effects. "Off", or a visitor's "reduce motion" device setting,
   keeps everything still. */
[data-motion="subtle"] { --base: .25s; --slow: .4s; }
[data-motion="subtle"] .panel-pattern { animation: none; }
[data-motion="subtle"] .hub .panel:hover { flex-grow: 1.35; }
[data-motion="subtle"] [data-reveal] { animation: none; }
html[data-motion="subtle"]::view-transition-group(*) { animation-duration: .25s; }
html[data-motion="subtle"]::view-transition-old(root), html[data-motion="subtle"]::view-transition-new(root) { animation-duration: .2s; }

[data-motion="off"] { scroll-behavior: auto; }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
[data-motion="off"] [data-reveal] { animation: none !important; }
html[data-motion="off"]::view-transition-group(*), html[data-motion="off"]::view-transition-old(*), html[data-motion="off"]::view-transition-new(*) { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}