/* ---- Design tokens: a single committed visual world (warm dark, cinema/darkroom) ---- */
  :root{
    --bg: #131313;
    --bg-raise: #1a1a1a;
    --surface: #1c1c1c;
    --line: #2a2a2a;
    --text: #f2f2f2;
    --text-dim: #a8a8a8;
    --text-faint: #787878;
    --accent: #00E8FF;      /* modern orange */
    --accent-soft: #00E8FF26;
    --accent-2: #00b8cc;    /* muted sage — secondary accent for tags */
    --accent-2-soft: #00b8cc26;
    --white: #ffffff;
    --serif: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  }

  *{box-sizing:border-box; font-weight:700 !important;}
  html,body{background:var(--bg);}
  body{
    margin:0;
    padding-inline:0;
    font-family:var(--sans);
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; text-wrap:balance; letter-spacing:.01em;}
  a{color:inherit;}
  ::selection{background:var(--accent); color:#131313;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

  .wrap{max-width:1120px; margin-inline:auto; padding-inline:24px;}
  @media (max-width:640px){ .wrap{padding-inline:18px;} }

  .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent); display:flex; align-items:center; gap:10px; font-style:italic;
  }
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--accent);}

  /* ---- Home-page "About Me" teaser (half orange / half white) ---- */
  .hero-about{margin-top:52px; max-width:560px;}
  .hero-about-tag{
    font-family:var(--serif); font-weight:400; font-style:italic;
    font-size:clamp(19px,2.2vw,23px); letter-spacing:.02em; display:flex; gap:8px;
  }
  .hero-about-tag .o{color:var(--accent);}
  .hero-about-tag .w{color:var(--white);}
  .hero-about-copy{color:var(--text-dim); font-size:15.5px; line-height:1.65; margin-top:10px; max-width:480px;}
  .hero-about-link{
    display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--mono);
    font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); text-decoration:none;
    border-bottom:1px solid transparent; transition:border-color .2s;
  }
  .hero-about-link:hover{border-bottom-color:var(--accent);}

  /* ---- Nav ---- */
  nav{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding-block:16px;}
  .nav-name{font-family:var(--serif); font-weight:400; font-size:18px; letter-spacing:.02em;}
  .nav-name span{color:var(--accent);}
  .nav-links{display:flex; gap:28px; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; list-style:none; margin:0; padding:0;}
  .nav-links a{text-decoration:none; color:var(--text-dim); transition:color .2s;}
  .nav-links a:hover{color:var(--accent);}
  .nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--text); width:38px; height:38px; border-radius:8px; font-size:16px;}
  @media (max-width:720px){
    .nav-links{display:none;}
    .nav-toggle{display:inline-flex; align-items:center; justify-content:center;}
    .nav-links.open{
      display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
      background:var(--bg-raise); border-bottom:1px solid var(--line); padding:18px 24px; gap:16px;
    }
  }

  /* ---- Hero ---- */
  .hero{padding-block:96px 84px; position:relative; overflow:hidden; perspective:1400px;}
  /* .hero-inner's height comes only from .hero-text (hero-model and
     scroll-cue are position:absolute, out of flow) -- so if the admin
     clears/shortens the hero text, this box would shrink right along
     with it, and since .hero clips overflow, the camera-model graphic
     (vertically centered against THIS box) would get visibly cut off.
     A floor height keeps the whole hero section -- text, model, video
     background alike -- the same size no matter how much text is
     actually in it. */
  .hero-inner{position:relative; z-index:1; min-height:600px;}
  @media (max-width:480px){ .hero-inner{min-height:420px;} }
  .hero-photo{
    /* Empty on purpose -- no video/image here, just the plain site
       background color (plus the gradient overlay below) behind the
       hero text and the camera-model graphic. */
    position:absolute; inset:-15%; z-index:0; background:var(--bg);
    transform-origin:50% 50%; will-change:transform; transform-style:preserve-3d;
    overflow:hidden;
  }
  .hero-photo::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, #131313a6 0%, #13131340 40%, #131313d9 100%);
  }
  @media (prefers-reduced-motion:reduce){ .hero-photo{ transform:none !important; } }
  /* leaves clear room for .hero-model on the right so the two never overlap, at any width:
     the text column's width is the container width MINUS the model's own width and a gap,
     so it's an exact complement rather than an approximate vw split */
  .hero-text{ max-width:min(560px, calc(100% - min(42vw, 380px) - 40px)); }
  @media (max-width:480px){ .hero-text{ max-width:none; } }
  .hero-kicker{margin-bottom:22px;}
  .hero h1{font-size:clamp(30px, 4.6vw, 48px); line-height:1.18; letter-spacing:.01em;}
  .hero h1 em{font-style:italic; color:var(--accent); font-weight:500;}
  .hero p.lede{
    font-size:clamp(16px,2vw,19px); color:var(--text-dim); max-width:560px; margin-top:22px; line-height:1.6;
  }
  .scroll-cue{
    position:absolute; right:24px; bottom:-10px; display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--text-faint); text-transform:uppercase;
  }
  .scroll-cue .line{width:1px; height:46px; background:linear-gradient(var(--accent), transparent); animation:pulse 2.2s ease-in-out infinite;}
  @media (prefers-reduced-motion:reduce){ .scroll-cue .line{animation:none;} }
  @keyframes pulse{0%,100%{opacity:.3} 50%{opacity:1}}
  @media (max-width:640px){ .scroll-cue{display:none;} }

  /* ---- Hero model: three video-editing timelines, laid out flat and
     horizontal, stacked one above the other, unevenly spaced and each a
     different size, like a real editing project. They fly in ONCE, staggered
     and alternating (track 1 led by its right piece, track 2 by its left,
     track 3 by its right again) -- then they never leave the screen again.
     After that a single full-height cutline sweeps in from above and does
     the cutting forever, on a fast loop: cuts track 1 (near its right end),
     slides over to track 2 (dead-center) and cuts it, slides to track 3
     (near its left end) and cuts it, then all three pull apart together at
     their own cut points, hold, slide back together, and it cuts again --
     the timeline itself is always there, only the cut repeats. ---- */
  .hero-model{
    position:absolute; right:0; top:50%; transform:translateY(-50%);
    width:min(42vw, 380px); aspect-ratio:380/260; z-index:2; pointer-events:none;
  }
  @media (max-width:480px){ .hero-model{ display:none; } }
  .ht-scene{ position:relative; width:100%; height:100%; }
  .ht-track{ position:absolute; left:1%; right:1%; display:flex; }
  /* unevenly spaced -- 8% gap between track 1 and 2, 12% gap between
     track 2 and 3 -- and three different heights, so they read as three
     genuinely different clips, not copies of the same bar */
  .ht-track-1{ top:4%; height:18%; }
  .ht-track-2{ top:30%; height:24%; }
  .ht-track-3{ top:66%; height:30%; }
  /* .ht-piece is the flex slot + the ONE-TIME fly-in (it plays once, then
     holds forever). .ht-clip inside it is the visible bar + the INFINITE
     separate/reassemble motion -- splitting the "arrive" from the "cut
     repeatedly" means the timeline can loop the cut forever without ever
     flying back out. */
  .ht-piece{ flex:0.5; }
  /* the gradient only varies top-to-bottom (never left-to-right), so the
     two halves -- rendered as two separate boxes -- line up into what
     reads as ONE continuous bar at rest, with no seam down the middle.
     The cutline marks where it'll cut; only once it actually separates
     does a gap appear there. */
  .ht-clip{
    width:100%; height:100%; background:linear-gradient(180deg, var(--bg-raise), #0a0a0a); border:1px solid var(--line);
    border-radius:7px; box-shadow:0 10px 18px -10px #000000c0, inset 0 1px 0 #ffffff0f;
  }
  .ht-split-a{ border-right-width:0; border-top-right-radius:0; border-bottom-right-radius:0; }
  .ht-split-b{ border-left-width:0; border-top-left-radius:0; border-bottom-left-radius:0; }
  /* real timeline: each track cuts at a DIFFERENT point along its length --
     track 1 cuts near its right end, track 2 dead-center, track 3 near its
     left end -- so the single cutline has to travel to a genuinely
     different spot each time, not just drop straight down */
  .ht-track-1 .ht-piece-a{ flex:0.7; }
  .ht-track-1 .ht-piece-b{ flex:0.3; }
  .ht-track-3 .ht-piece-a{ flex:0.3; }
  .ht-track-3 .ht-piece-b{ flex:0.7; }
  .ht-track-2 .ht-clip{ background:linear-gradient(180deg, var(--surface), #0a0a0a); }
  .ht-track-3 .ht-clip{
    background:linear-gradient(180deg, var(--accent-2-soft), #0a0a0a); border-color:var(--accent-2);
  }
  /* the one cut-line: a real playhead spanning the WHOLE timeline top to
     bottom (all three tracks at once, like a real NLE playhead crossing
     every track lane) -- it never moves up or down, it stays one single
     full-height line the entire time. It drops in from above the screen
     (grows straight down from the top), holds at track 1's cut point (near
     the right end) and cuts, then SLIDES sideways -- still full height,
     still one line -- to track 2's cut point (dead-center) and cuts, then
     slides again to track 3's cut point (near the left end) and cuts, then
     retracts back up as all three tracks pull apart. */
  .ht-cutline{
    position:absolute; left:69.6%; top:-8%; height:116%; width:5px; margin-left:-2.5px;
    transform-origin:top; transform:scaleY(0);
    background:linear-gradient(180deg, #b3f5ff, var(--accent) 10%, var(--accent) 100%);
    box-shadow:0 0 14px 2px var(--accent-soft), 0 0 5px 1px #b3f5ff; opacity:0; z-index:3; border-radius:2.5px;
  }
  @media (prefers-reduced-motion:reduce){
    .ht-piece, .ht-split-a, .ht-split-b, .ht-cutline{ animation:none !important; opacity:0; }
  }
  /* one-time fly-in, staggered per track/side, then holds in place forever
     (fill-mode both) */
  .hero-model:not(.is-reduced) .ht-track-1 .ht-piece-b{ animation:htEnterB .4s ease-out 0s 1 both; }
  .hero-model:not(.is-reduced) .ht-track-1 .ht-piece-a{ animation:htEnterA .4s ease-out .08s 1 both; }
  .hero-model:not(.is-reduced) .ht-track-2 .ht-piece-a{ animation:htEnterA .4s ease-out .32s 1 both; }
  .hero-model:not(.is-reduced) .ht-track-2 .ht-piece-b{ animation:htEnterB .4s ease-out .4s 1 both; }
  .hero-model:not(.is-reduced) .ht-track-3 .ht-piece-b{ animation:htEnterB .4s ease-out .64s 1 both; }
  .hero-model:not(.is-reduced) .ht-track-3 .ht-piece-a{ animation:htEnterA .4s ease-out .72s 1 both; }
  @keyframes htEnterA{
    0%{ transform:translateX(-140px); opacity:0; }
    100%{ transform:translateX(0); opacity:1; }
  }
  @keyframes htEnterB{
    0%{ transform:translateX(140px); opacity:0; }
    100%{ transform:translateX(0); opacity:1; }
  }
  /* the infinite loop: identical for every track (the timeline never
     leaves, it just gets cut, pulls apart, and comes back together, over
     and over), timed to match the cutline below */
  /* the pieces pulling apart (and back together) get their own gentler,
     fully symmetric ease -- slow to start, slow to land -- and more time
     to do it in, so distancing themselves from each other reads as one
     smooth glide, never a snap */
  .hero-model:not(.is-reduced) .ht-split-a{ animation:htSepA 4s cubic-bezier(.65,0,.35,1) infinite; }
  .hero-model:not(.is-reduced) .ht-split-b{ animation:htSepB 4s cubic-bezier(.65,0,.35,1) infinite; }
  .hero-model:not(.is-reduced) .ht-cutline{ animation:htCutLine 4s cubic-bezier(.4,0,.2,1) infinite; }
  @keyframes htSepA{
    0%{ transform:translateX(0); }
    52%{ transform:translateX(0); }
    65%{ transform:translateX(-26px); }
    80%{ transform:translateX(-26px); }
    92%{ transform:translateX(0); }
    100%{ transform:translateX(0); }
  }
  @keyframes htSepB{
    0%{ transform:translateX(0); }
    52%{ transform:translateX(0); }
    65%{ transform:translateX(26px); }
    80%{ transform:translateX(26px); }
    92%{ transform:translateX(0); }
    100%{ transform:translateX(0); }
  }
  @keyframes htCutLine{
    0%{ left:69.6%; opacity:0; transform:scaleY(0); }
    2.7%{ left:69.6%; opacity:0; transform:scaleY(0); }
    10.8%{ left:69.6%; opacity:1; transform:scaleY(1); }
    18%{ left:69.6%; opacity:1; transform:scaleY(1); }
    25%{ left:50%;   opacity:1; transform:scaleY(1); }
    32%{ left:50%;   opacity:1; transform:scaleY(1); }
    40%{ left:30.4%; opacity:1; transform:scaleY(1); }
    47%{ left:30.4%; opacity:1; transform:scaleY(1); }
    54%{ left:30.4%; opacity:0; transform:scaleY(0); }
    100%{ left:69.6%; opacity:0; transform:scaleY(0); }
  }

  /* ---- Section shell ---- */
  section{padding-block:88px;}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap;}
  .section-head h2{font-size:clamp(20px,2.6vw,26px);}
  .section-head .note{font-family:var(--mono); font-size:12.5px; color:var(--text-faint); max-width:280px; text-align:right; line-height:1.5;}
  @media (max-width:640px){ .section-head .note{text-align:left;} }

  /* ---- Video section ---- */
  .video-section{background:var(--bg-raise); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .video-frame{
    position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line);
    aspect-ratio:16/9; background:
      radial-gradient(140% 100% at 15% 0%, #1a1a1a 0%, transparent 55%),
      linear-gradient(135deg, #1c1c1c 0%, #0d0d0d 70%);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:border-color .2s;
  }
  .video-frame:hover{ border-color:var(--accent); }
  .video-frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1;}
  .grain{position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay; pointer-events:none;}
  .video-caption-row{display:flex; justify-content:space-between; margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--text-faint); flex-wrap:wrap; gap:8px;}
  .video-caption-row b{color:var(--text-dim); font-family:var(--sans);}

  /* ---- About ---- */
  .about-section{background:var(--bg-raise); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .about-grid{display:grid; grid-template-columns:280px 1fr; gap:56px; align-items:start;}
  @media (max-width:760px){ .about-grid{grid-template-columns:1fr;} }
  .about-portrait{
    aspect-ratio:4/5; border-radius:10px; border:1px solid var(--line);
    background:linear-gradient(150deg,#2a2a2a,#131313 70%); position:relative; overflow:hidden;
  }
  .about-portrait video, .about-portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;}
  .about-copy p{color:var(--text-dim); line-height:1.75; font-size:16px; max-width:620px;}
  .about-copy p + p{margin-top:16px;}
  .about-quote{
    font-family:var(--serif); font-style:italic; font-weight:400; color:var(--text);
    font-size:clamp(16px,1.9vw,19px); line-height:1.5; max-width:520px; margin-top:18px !important; letter-spacing:.01em;
  }
  .about-quote + p{margin-top:20px !important;}

  /* ---- Expertise ---- */
  .exp-carousel-wrap{ position:relative; margin-top:8px; }
  .exp-carousel{
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; perspective:1500px; padding:52px 0 8px;
    scrollbar-width:none; cursor:grab;
  }
  .exp-carousel.is-panning{ cursor:grabbing; scroll-snap-type:none; }
  .exp-carousel::-webkit-scrollbar{ display:none; }
  .exp-track{ display:flex; gap:20px; padding:0 calc(50% - 120px); width:max-content; }
  .exp-item{
    flex:0 0 240px; scroll-snap-align:center;
    transform-style:preserve-3d; will-change:transform, opacity;
    transition:transform .12s linear, opacity .12s linear;
  }
  .exp-item h3{font-size:14.5px; margin:10px 0 4px;}
  .exp-item p{font-size:12.5px; color:var(--text-faint); line-height:1.5; margin:0;}
  .exp-item.is-active h3{ color:var(--accent); }
  .exp-item.is-active .exp-tag{ color:var(--accent); background:var(--accent-soft); border-color:#00E8FF55; }
  .exp-video{
    position:relative; aspect-ratio:9/16; overflow:hidden; border-radius:10px;
    background:linear-gradient(135deg,#1c1c1c,#0d0d0d 75%);
  }
  .exp-video video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .exp-video{ transition:transform .15s ease-out; }
  .exp-progress{ position:absolute; left:0; right:0; bottom:0; height:4px; background:#00000055; z-index:3; pointer-events:none; }
  .exp-progress-fill{ height:100%; width:0%; background:var(--accent); }
  .exp-tag{
    display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--accent-2); background:var(--accent-2-soft); border:1px solid #00b8cc55; padding:3px 9px; border-radius:20px; margin-bottom:12px;
  }
  /* when a reel has a label, it's shown as a small pill overlaid on the
     clip itself (not above it) since these items no longer have their
     own title/caption text under them */
  .exp-video .exp-tag{
    position:absolute; left:10px; bottom:10px; z-index:2; margin-bottom:0;
    text-shadow:0 1px 6px #000;
  }
  .exp-arrow{
    position:absolute; top:calc(50% - 4px); transform:translateY(-50%); z-index:5;
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--bg-raise);
    color:var(--text); font-size:19px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:opacity .2s, border-color .2s, color .2s;
  }
  .exp-arrow:hover{ border-color:var(--accent); color:var(--accent); }
  .exp-arrow[disabled]{ opacity:.3; cursor:default; }
  .exp-arrow-prev{ left:-6px; }
  .exp-arrow-next{ right:-6px; }
  @media (max-width:900px){ .exp-arrow{ display:none; } }
  .exp-dots{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:18px; }
  .exp-dot{ width:7px; height:7px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0; transition:all .2s; }
  .exp-dot.is-active{ width:22px; border-radius:5px; background:var(--accent); }
  @media (max-width:760px){
    .exp-track{ padding:0 calc(50% - 100px); gap:14px; }
    .exp-item{ flex:0 0 200px; }
  }
  @media (prefers-reduced-motion: reduce){
    .exp-item{ transform:none !important; opacity:1 !important; transition:none; }
    .exp-video{ transform:none !important; transition:none; }
  }

  /* ---- Contact / social ---- */
  .contact-section{text-align:left;}
  .contact-top h2{font-size:clamp(20px,3vw,28px); max-width:640px;}
  .contact-top p{color:var(--text-dim); max-width:480px; margin-top:16px; line-height:1.6;}
  .social-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:460px;}
  .social-card{
    display:flex; flex-direction:column; gap:14px; padding:22px; border:1px solid var(--line); border-radius:12px;
    text-decoration:none; background:var(--surface); transition:border-color .2s, transform .2s;
  }
  .social-card:hover{border-color:var(--accent); transform:translateY(-3px);}
  .social-card svg{width:22px; height:22px; color:var(--accent);}
  .social-card b{font-size:14.5px; font-weight:600;}
  .social-card span{font-family:var(--mono); font-size:11.5px; color:var(--text-faint);}

  .contact-inner{display:flex; flex-direction:column; gap:36px;}
  .contact-text{ max-width:none; }

  /* Social cards + the camera clip sit side by side as one row — spread
     apart (space-between) so the clip leans right, but padding-right
     keeps it off the true edge instead of flush against it. */
  .social-row{
    display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
    gap:40px; margin-top:44px; padding-right:8%;
  }

  /* ---- Disassembly clip, playing on loop — a compact panel, not a
     full-viewport takeover. Scrolling past it eases in a CSS zoom via
     camera-video-scrub.js (plain transform:scale, no currentTime/canvas
     tricks — the video just plays normally). No decorative frame/border
     around it — just the video, clipped invisibly so the zoom doesn't
     spill onto the page. */
  .cam-video-panel{ display:flex; flex-direction:column; gap:10px; flex:0 0 auto; }
  .cam-video-frame{
    /* var(--bg), not hardcoded #000 -- the video's own backdrop is now
       color-graded to match the site's background color (#131313 by
       default), so this frame follows the same color for the sliver of
       edge the object-fit:cover video doesn't cover.
       mask-image fades the rectangle's edges to transparent -- so instead
       of a hard-edged box, the camera just floats on the page with no
       visible frame/border, even though the <video> element underneath
       is still a plain rectangle. */
    position:relative; width:min(70vw, 320px); aspect-ratio:9/16; overflow:hidden; background:var(--bg);
    mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, #000 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, #000 60%, transparent 100%);
  }
  .cam-video-frame video, .cam-video-frame img{
    width:100%; height:100%; object-fit:cover; display:block;
    transform-origin:center center; will-change:transform;
  }
  @media (max-width:640px){
    .social-row{ flex-direction:column; align-items:flex-start; padding-right:0; }
    .cam-video-frame{ width:220px; }
  }

  footer{border-top:1px solid var(--line); padding-block:32px; margin-top:20px;}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
  .foot-row p{font-family:var(--mono); font-size:11.5px; color:var(--text-faint); margin:0;}
/* ---- Added for the admin/login pages and the "Latest" posts feed —
   not part of the original design file, kept in the same visual
   language (same tokens, same mono/mixed-case rhythm). ---- */

.flash-wrap{margin-top:0;}
.flash{padding:10px 14px; border-radius:8px; font-size:14px; margin:16px auto 0; max-width:1120px; font-family:var(--mono);}
.flash-error{background:#c9382a26; border:1px solid #c9382a; color:#ff9a86;}
.flash-ok{background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent);}

.latest-section{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-raise);}
.feed{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px; margin-top:8px;}
.feed .card{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column;}
.feed .card img, .feed .card video{width:100%; display:block; aspect-ratio:1/1; object-fit:cover; background:#000;}
.feed .card .caption{padding:12px 14px 4px; font-size:14.5px; line-height:1.5; margin:0;}
.feed .card .meta{padding:0 14px 12px; font-family:var(--mono); font-size:11px; color:var(--text-faint); margin:0;}
.empty{color:var(--text-faint); padding-block:12px 40px; font-family:var(--mono); font-size:14px;}

.login-box{max-width:360px; margin:80px auto; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px;}
.login-box h2{margin:0 0 18px; font-family:var(--serif); font-weight:400;}
.login-box form{display:flex; flex-direction:column; gap:14px;}
.login-box label{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em;}

.admin-main{padding-block:40px 0;}
input, textarea{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:8px; color:var(--text);
  padding:10px 12px; font-family:var(--sans); font-size:14.5px;
}
input:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
button{
  background:var(--accent); color:var(--bg); border:none; border-radius:8px; padding:10px 18px;
  font-family:var(--mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
  cursor:pointer;
}
button.danger{background:#c9382a; color:#fff;}
button:hover{opacity:.9;}

.admin-h2{font-size:18px; margin:32px 0 14px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim);}
.post-form{display:flex; flex-direction:column; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; max-width:480px;}
.post-form label{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em;}

/* ---- Admin: "Website text" -- one form covering every editable string
   on the public pages, grouped into per-section blocks so a long list
   of fields still reads as organized rather than one giant wall. ---- */
.content-form{display:flex; flex-direction:column; gap:28px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; max-width:640px;}
.content-group{display:flex; flex-direction:column; gap:14px;}
.content-group-h3{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent); margin:0; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.content-form label{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em;}
.content-form input, .content-form textarea{font-family:var(--sans); text-transform:none; letter-spacing:normal;}
.content-form textarea{resize:vertical; min-height:64px;}
.content-form > button{align-self:flex-start;}
.radio-row{flex-direction:row !important; align-items:center; gap:8px !important; flex-wrap:wrap;}
.radio-row input[type=radio]{width:auto;}

.admin-list{display:flex; flex-direction:column; gap:10px; padding-bottom:60px;}
.admin-item{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 14px;}
.admin-item img{width:56px; height:56px; object-fit:cover; border-radius:8px; background:#000;}
/* wider than a plain thumbnail so the browser's own play/sound/seek bar
   (set via the controls attribute) actually fits and is usable, not
   squeezed into a 56px square */
.admin-item video.admin-preview{width:160px; height:96px; object-fit:cover; border-radius:8px; background:#000; flex-shrink:0;}
@media (max-width:520px){ .admin-item video.admin-preview{width:120px; height:76px;} }
.admin-text-thumb{width:56px; height:56px; border-radius:8px; background:var(--bg-raise); display:flex; align-items:center; justify-content:center; font-family:var(--mono); color:var(--text-faint);}
.admin-item-body{flex:1; min-width:0;}
.admin-item-body .caption{margin:0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.admin-item-body .meta{margin:2px 0 0; font-family:var(--mono); font-size:11px; color:var(--text-faint);}

/* ---- Admin: contextual hint text under a section heading ---- */
.admin-hint{color:var(--text-faint); font-size:13px; margin:-4px 0 18px; max-width:520px; line-height:1.5;}

/* ---- Admin: website color pickers (accent + background) ---- */
.color-row{max-width:480px; margin-bottom:22px;}
.color-row-label{
  display:block; font-family:var(--mono); font-size:12px; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;
}
.color-form{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  margin-bottom:10px;
}
.color-form input[type=color]{
  width:44px; height:36px; padding:2px; background:var(--bg-raise); border:1px solid var(--line);
  border-radius:8px; cursor:pointer;
}
.color-form-value{font-family:var(--mono); font-size:12.5px; color:var(--text-dim); flex:1;}
.color-presets{display:flex; gap:10px; flex-wrap:wrap;}
.color-swatch{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--line); padding:0; cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
}
.color-swatch:hover{ transform:scale(1.12); border-color:var(--text-dim); }
.color-save{margin-top:6px;}

/* ---- Admin: video settings (autoplay / tap-for-sound / volume) ---- */
.video-settings-form{
  display:flex; flex-direction:column; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:18px 20px; max-width:480px; margin-bottom:28px;
}
.toggle-row{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); cursor:pointer;}
.toggle-row input[type=checkbox]{width:auto; accent-color:var(--accent); cursor:pointer;}
.volume-row{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--text);}
.volume-row input[type=range]{flex:1; accent-color:var(--accent);}
.volume-value{font-family:var(--mono); font-size:12.5px; color:var(--text-dim); min-width:40px; text-align:right;}
.video-settings-form button{align-self:flex-start;}

/* ---- Admin: per-item delete button inside the .admin-item row keeps its
   own small form; no extra layout rules needed beyond what .admin-item /
   .admin-list already define above. ---- */