/* ===================================================================
   THE FAT DUKE — shared site stylesheet
   Used by: index.html (main landing), dj.html, architecture.html,
   viticulture.html. Page-specific bits (hero background image, the
   category label colour) are set per page via CSS variables.
   =================================================================== */

/* ---- core (nav, hero, sections, cards, player, animations, responsive) ---- */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body { background: #060606; color: #e5e5e5; font-family: "DM Sans", sans-serif; overflow-x: hidden; }
    /* Extra bottom padding so player bar never covers content */
    body.player-active { padding-bottom: 80px; }
    ::-webkit-scrollbar { width: 3px; }
    ::-webkit-scrollbar-track { background: #060606; }
    ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 99px; }

    /* ══ NAV ══ */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      height: 60px; padding: 0 24px;
      display: flex; align-items: center; justify-content: space-between;
      transition: background .5s, border-color .5s, backdrop-filter .5s;
      border-bottom: 1px solid transparent;
    }
    nav.scrolled { background: rgba(6,6,6,.93); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: #1a1a1a; }
    .nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
    .nav-logomark { width:28px; height:28px; border-radius:7px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#111; flex-shrink:0; }
    .nav-logomark img { width:100%; height:100%; object-fit:cover; display:block; }
    .nav-wordmark { font-family:"Bebas Neue",sans-serif; font-size:17px; letter-spacing:.2em; color:#fff; }
    .nav-links { display:flex; align-items:center; gap:4px; }
    .nav-link { font-family:"DM Mono",monospace; font-size:9px; text-transform:uppercase; letter-spacing:.2em; color:#555; text-decoration:none; padding:8px 14px; border-radius:8px; transition:color .2s,background .2s; }
    .nav-link:hover { color:#e5e5e5; background:rgba(255,255,255,.04); }
    .nav-veil { display:flex; align-items:center; gap:7px; font-family:"DM Mono",monospace; font-size:9px; text-transform:uppercase; letter-spacing:.2em; color:#fff; text-decoration:none; padding:9px 16px; border-radius:10px; background:#4f46e5; border:1px solid rgba(129,140,248,.25); margin-left:8px; transition:filter .2s,transform .15s; -webkit-tap-highlight-color:transparent; }
    .nav-veil:hover { filter:brightness(1.2); }
    .nav-veil:active { transform:scale(.97); }
    .veil-dot { width:5px; height:5px; border-radius:50%; background:#a5b4fc; animation:veil-pulse 2s ease-in-out infinite; flex-shrink:0; }
    @keyframes veil-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)} }
    .nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; cursor:pointer; background:none; border:none; padding:4px; -webkit-tap-highlight-color:transparent; }
    .nav-hamburger span { display:block; width:20px; height:1.5px; background:#888; border-radius:2px; transition:all .3s ease; transform-origin:center; }
    .nav-hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px); }
    .nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
    .nav-hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px); }
    .nav-drawer { display:none; position:fixed; top:60px; left:0; right:0; z-index:190; background:rgba(6,6,6,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid #1a1a1a; padding:16px 24px 24px; flex-direction:column; gap:4px; transform:translateY(-8px); opacity:0; transition:transform .25s ease,opacity .25s ease; }
    .nav-drawer.open { transform:translateY(0); opacity:1; }
    .nav-drawer-link { font-family:"DM Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:.25em; color:#555; text-decoration:none; padding:14px 0; border-bottom:1px solid #111; transition:color .2s; -webkit-tap-highlight-color:transparent; }
    .nav-drawer-link:last-child { border-bottom:none; }
    .nav-drawer-link:active { color:#e5e5e5; }
    .nav-drawer-veil { display:flex; align-items:center; justify-content:center; gap:8px; font-family:"DM Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:#fff; text-decoration:none; padding:14px; border-radius:12px; background:#4f46e5; border:1px solid rgba(129,140,248,.25); margin-top:8px; -webkit-tap-highlight-color:transparent; }

    /* ══ HERO ══ */
    .hero { display:block; position:relative; width:100%; height:100svh; min-height:600px; overflow:hidden; text-decoration:none; }
    @media (hover:hover) and (pointer:fine) { .hero { cursor:none; } }
    .hero-cover { position:absolute; inset:0; background:url('cover.jpg') left center / cover no-repeat, linear-gradient(135deg,#0c0b1a,#060606); z-index:0; transition:transform .9s cubic-bezier(.25,.46,.45,.94),filter .9s ease; will-change:transform; }
    @media (hover:hover) and (pointer:fine) { .hero:hover .hero-cover { transform:scale(1.03); filter:brightness(1.07); } }
    .hero-blueprint { position:absolute; inset:0; z-index:1; pointer-events:none; background-image:linear-gradient(rgba(79,70,229,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,229,.04) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(ellipse at 15% 55%,rgba(0,0,0,.45) 0%,transparent 50%); mask-image:radial-gradient(ellipse at 15% 55%,rgba(0,0,0,.45) 0%,transparent 50%); }
    .hero-vignette { position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(0,0,0,.55) 100%); }
    .hero-bottom-fade { position:absolute; bottom:0; left:0; right:0; height:36%; z-index:3; pointer-events:none; background:linear-gradient(to bottom,transparent,#060606); }
    .hero-text { position:absolute; left:40px; bottom:80px; z-index:10; pointer-events:none; animation:fadeUp 1s ease .25s both; }
    .hero-eyebrow { font-family:"DM Mono",monospace; font-size:8px; text-transform:uppercase; letter-spacing:.45em; color:#f59e0b; display:flex; align-items:center; gap:10px; margin-bottom:12px; }
    .eyebrow-line { width:24px; height:1px; background:#f59e0b; flex-shrink:0; }
    .hero-title { font-family:"Bebas Neue",sans-serif; font-size:clamp(52px,9vw,120px); line-height:.88; letter-spacing:.02em; color:#fff; margin-bottom:18px; }
    .hero-title-hollow { display:block; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.2); }
    .hero-meta { display:flex; align-items:center; flex-wrap:wrap; }
    .hero-meta-item { font-family:"DM Mono",monospace; font-size:8px; text-transform:uppercase; letter-spacing:.25em; color:#333; padding:0 14px; border-right:1px solid #1e1e1e; }
    .hero-meta-item:first-child { padding-left:0; }
    .hero-meta-item:last-child { border-right:none; }
    .hero-meta-item.lit { color:#555; }
    .hero-cta { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:10; display:flex; flex-direction:column; align-items:center; gap:8px; animation:fadeUp 1s ease .5s both; pointer-events:none; }
    .hero-cta-label { font-family:"DM Mono",monospace; font-size:7px; text-transform:uppercase; letter-spacing:.5em; color:#2a2a2a; white-space:nowrap; }
    .chevron-wrap { display:flex; flex-direction:column; align-items:center; }
    .chev { width:14px; height:7px; margin-top:-2px; border-left:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); transform:rotate(-45deg); animation:chev-bounce 2s ease-in-out infinite; }
    .chev:nth-child(2) { animation-delay:.18s; opacity:.45; }
    .chev:nth-child(3) { animation-delay:.36s; opacity:.2; }
    @keyframes chev-bounce { 0%,100%{transform:rotate(-45deg) translateY(0)} 50%{transform:rotate(-45deg) translateY(5px)} }
    .hero-scroll-track { position:absolute; right:40px; top:50%; transform:translateY(-50%); z-index:10; display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; animation:fadeUp 1s ease .7s both; }
    .scroll-label { font-family:"DM Mono",monospace; font-size:7px; text-transform:uppercase; letter-spacing:.4em; color:#222; writing-mode:vertical-rl; }
    .scroll-line { width:1px; height:80px; background:#181818; position:relative; overflow:hidden; border-radius:1px; }
    .scroll-thumb { position:absolute; top:0; left:0; right:0; height:35%; background:linear-gradient(to bottom,#4f46e5,transparent); animation:scroll-run 2s ease-in-out infinite; }
    @keyframes scroll-run { 0%{top:-40%} 100%{top:140%} }
    #hero-cursor { position:fixed; pointer-events:none; z-index:9999; width:52px; height:52px; border:1px solid rgba(245,158,11,.55); border-radius:50%; transform:translate(-50%,-50%); transition:opacity .35s ease,width .15s ease,height .15s ease; opacity:0; display:flex; align-items:center; justify-content:center; }
    #hero-cursor.active { opacity:1; }
    #hero-cursor-label { font-family:"DM Mono",monospace; font-size:7px; text-transform:uppercase; letter-spacing:.2em; color:rgba(245,158,11,.75); white-space:nowrap; }

    /* ══ SECTION SHARED ══ */
    .section-inner { max-width:1280px; margin:0 auto; }
    .section-num { font-family:"DM Mono",monospace; font-size:8px; text-transform:uppercase; letter-spacing:.5em; color:#2a2a2a; margin-bottom:10px; }
    .section-num span { color:#4f46e5; }
    .section-heading { font-family:"Bebas Neue",sans-serif; font-size:clamp(44px,6.5vw,88px); letter-spacing:.03em; color:#fff; line-height:1; }

    /* ══ DJ / HEAVY ROTATION SECTION ══ */
    #dj { padding:80px 40px; background:#0a0a0a; border-top:1px solid #111; border-bottom:1px solid #111; }
    .dj-layout { display:grid; grid-template-columns:1fr 300px; gap:60px; align-items:start; }

    /* Waveform */
    .waveform { display:flex; align-items:center; gap:3px; height:40px; margin-bottom:32px; }
    .w-bar { flex:1; max-width:5px; background:linear-gradient(to top,rgba(245,158,11,.75),rgba(245,158,11,.15)); border-radius:2px; animation:wbar 1.4s ease-in-out infinite alternate; }
    .w-bar:nth-child(odd)  { animation-duration:1.2s; }
    .w-bar:nth-child(3n)   { animation-duration:1.6s; animation-delay:.3s; }
    .w-bar:nth-child(4n)   { animation-duration:1.0s; animation-delay:.1s; }
    .w-bar:nth-child(5n)   { animation-duration:1.8s; animation-delay:.5s; }
    @keyframes wbar { from{transform:scaleY(.1)} to{transform:scaleY(1)} }

    /* Mix rows */
    .mix-list { display:flex; flex-direction:column; gap:2px; }
    .mix-row {
      display:flex; align-items:center; padding:18px 20px;
      background:#111; border:1px solid #1a1a1a; border-radius:12px; gap:16px;
      cursor:pointer; -webkit-tap-highlight-color:transparent;
      transition:background .2s, border-color .2s;
      user-select:none;
    }
    .mix-row.playing { background:#141420; border-color:rgba(79,70,229,.45); }
    @media (hover:hover) {
      .mix-row:hover { background:#141414; border-color:rgba(79,70,229,.25); }
      .mix-row:hover .mix-play-btn { background:#4f46e5; border-color:#4f46e5; color:#fff; }
      .mix-row.playing:hover { background:#181828; }
    }
    .mix-row:active { background:#161616; }
    .mix-index { font-family:"DM Mono",monospace; font-size:9px; color:#f59e0b; letter-spacing:.2em; min-width:44px; }
    .mix-info { flex:1; min-width:0; }
    .mix-name { font-family:"Bebas Neue",sans-serif; font-size:20px; color:#fff; letter-spacing:.05em; margin-bottom:2px; }
    .mix-tags { font-family:"DM Mono",monospace; font-size:8px; color:#444; text-transform:uppercase; letter-spacing:.15em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mix-duration { font-family:"DM Mono",monospace; font-size:9px; color:#333; flex-shrink:0; }
    .mix-play-btn {
      width:32px; height:32px; border-radius:50%; flex-shrink:0;
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
      display:flex; align-items:center; justify-content:center; font-size:10px; color:#555;
      transition:background .2s, border-color .2s, color .2s;
    }
    /* Animated bars shown on playing row's button */
    .play-bars { display:flex; align-items:center; gap:2px; height:14px; }
    .play-bar { width:2px; background:#818cf8; border-radius:1px; animation:pbar 0.9s ease-in-out infinite alternate; }
    .play-bar:nth-child(1) { animation-delay:0s;    animation-duration:0.7s; }
    .play-bar:nth-child(2) { animation-delay:0.15s; animation-duration:1.1s; }
    .play-bar:nth-child(3) { animation-delay:0.3s;  animation-duration:0.8s; }
    @keyframes pbar { from{transform:scaleY(.2)} to{transform:scaleY(1)} }
    .play-bar.paused { animation-play-state:paused; }

    /* No-track placeholder */
    .mix-no-file { opacity:.35; cursor:default; pointer-events:none; }

    /* Events */
    .events-panel { padding:24px; background:#0d0d0d; border:1px solid #1a1a1a; border-radius:16px; }
    .events-panel-label { font-family:"DM Mono",monospace; font-size:8px; text-transform:uppercase; letter-spacing:.4em; color:#333; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid #1a1a1a; }
    .event-item { display:flex; flex-direction:column; gap:3px; padding:12px 0; border-bottom:1px solid #141414; -webkit-tap-highlight-color:transparent; }
    .event-item:last-child { border-bottom:none; }
    .event-date { font-family:"DM Mono",monospace; font-size:8px; color:#f59e0b; text-transform:uppercase; letter-spacing:.2em; }
    .event-title { font-family:"Bebas Neue",sans-serif; font-size:15px; color:#e5e5e5; letter-spacing:.05em; }
    .event-venue { font-family:"DM Mono",monospace; font-size:7px; color:#333; text-transform:uppercase; letter-spacing:.15em; }

    /* ══ STICKY AUDIO PLAYER BAR ══ */
    #player-bar {
      position:fixed; bottom:0; left:0; right:0; z-index:300;
      background:rgba(8,8,12,.97);
      border-top:1px solid rgba(79,70,229,.25);
      backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
      padding:0 24px;
      height:72px;
      display:flex; align-items:center; gap:16px;
      transform:translateY(100%);
      transition:transform .35s cubic-bezier(.25,.46,.45,.94);
    }
    #player-bar.visible { transform:translateY(0); }

    .player-track-info { flex:1; min-width:0; }
    .player-track-name { font-family:"Bebas Neue",sans-serif; font-size:16px; color:#fff; letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .player-track-artist { font-family:"DM Mono",monospace; font-size:8px; color:#555; text-transform:uppercase; letter-spacing:.15em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }

    .player-controls { display:flex; align-items:center; gap:12px; flex-shrink:0; }
    .player-btn {
      width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      background:#4f46e5; color:#fff; font-size:14px;
      transition:filter .2s, transform .15s; -webkit-tap-highlight-color:transparent;
      flex-shrink:0;
    }
    .player-btn:hover { filter:brightness(1.2); }
    .player-btn:active { transform:scale(.93); }

    .player-progress-wrap { flex:1; display:flex; align-items:center; gap:10px; min-width:0; }
    .player-time { font-family:"DM Mono",monospace; font-size:8px; color:#444; white-space:nowrap; flex-shrink:0; }
    .player-progress-track {
      flex:1; height:3px; background:#1e1e1e; border-radius:2px;
      cursor:pointer; position:relative; overflow:visible;
    }
    .player-progress-fill { height:100%; background:#4f46e5; border-radius:2px; pointer-events:none; transition:width .1s linear; }
    .player-progress-track:hover .player-progress-fill { background:#818cf8; }

    .player-close { background:none; border:none; color:#333; font-size:16px; cursor:pointer; padding:6px; border-radius:6px; transition:color .2s; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
    .player-close:hover { color:#888; }

    /* ══ ARCHITECTURE ══ */
    #architecture { padding:80px 40px; border-bottom:1px solid #111; }
    .arch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
    .arch-card { position:relative; aspect-ratio:4/3; overflow:hidden; cursor:pointer; background:#0d0d0d; -webkit-tap-highlight-color:transparent; }
    .arch-card-bg { position:absolute; inset:0; transition:transform .6s ease; }
    /* Portfolio hover: the whole tile pops out to 2x and lifts above its neighbours.
       Scoped under .arch-grid (higher specificity) so it beats .reveal.visible's transform
       and .reveal's transition; transform-origin steers edge tiles inward so a 2x tile
       never runs past the grid and forces a scrollbar. Gated on hover:hover (no touch). */
    .arch-grid .arch-card { transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .7s ease, box-shadow .5s ease; will-change:transform; }
    @media (hover:hover) {
      .arch-grid .arch-card:hover { transform:scale(2); z-index:10; box-shadow:0 22px 60px -16px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.07); }
      .arch-grid .arch-card:nth-child(3n+1):hover { transform-origin:left center; }
      .arch-grid .arch-card:nth-child(3n):hover   { transform-origin:right center; }
    }
    @media (hover:hover) and (max-width:1024px) {
      .arch-grid .arch-card:nth-child(odd):hover  { transform-origin:left center; }
      .arch-grid .arch-card:nth-child(even):hover { transform-origin:right center; }
    }
    .arch-card:nth-child(1) .arch-card-bg { background:linear-gradient(135deg,#0d0d24,#060606); }
    .arch-card:nth-child(2) .arch-card-bg { background:linear-gradient(135deg,#1a1208,#060606); }
    .arch-card:nth-child(3) .arch-card-bg { background:linear-gradient(135deg,#130d22,#060606); }
    .arch-card:nth-child(4) .arch-card-bg { background:linear-gradient(135deg,#0a140e,#060606); }
    .arch-card:nth-child(5) .arch-card-bg { background:linear-gradient(135deg,#180808,#060606); }
    .arch-card:nth-child(6) .arch-card-bg { background:linear-gradient(135deg,#080f1a,#060606); }
    .arch-card:nth-child(1) .arch-card-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 40%,rgba(79,70,229,.35),transparent 65%); }
    .arch-card:nth-child(2) .arch-card-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 60%,rgba(245,158,11,.2),transparent 60%); }
    .arch-card:nth-child(3) .arch-card-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 30%,rgba(139,92,246,.28),transparent 60%); }
    .arch-card:nth-child(4) .arch-card-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 25% 70%,rgba(16,185,129,.18),transparent 60%); }
    .arch-card:nth-child(5) .arch-card-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 75% 35%,rgba(239,68,68,.15),transparent 60%); }
    .arch-card:nth-child(6) .arch-card-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 45% 55%,rgba(59,130,246,.22),transparent 60%); }
    .arch-card::before { content:""; position:absolute; inset:0; z-index:1; background-image:linear-gradient(rgba(79,70,229,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,229,.06) 1px,transparent 1px); background-size:24px 24px; }
    .arch-card-num { position:absolute; bottom:-20px; right:8px; font-family:"Bebas Neue",sans-serif; font-size:100px; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.04); z-index:1; user-select:none; pointer-events:none; }
    .arch-card-overlay { position:absolute; bottom:0; left:0; right:0; padding:20px 18px 18px; background:linear-gradient(to top,rgba(0,0,0,.95),transparent); z-index:3; }
    .arch-proj-type { font-family:"DM Mono",monospace; font-size:7px; text-transform:uppercase; letter-spacing:.25em; color:#4f46e5; margin-bottom:4px; }
    .arch-proj-name { font-family:"Bebas Neue",sans-serif; font-size:16px; color:#fff; letter-spacing:.04em; }
    .arch-proj-loc { font-family:"DM Mono",monospace; font-size:7px; color:#333; text-transform:uppercase; letter-spacing:.15em; margin-top:2px; }
    .arch-card-hover-line { position:absolute; bottom:0; left:0; right:0; height:2px; background:#4f46e5; transform:scaleX(0); transform-origin:left; transition:transform .35s ease; z-index:4; }
    @media (hover:hover) { .arch-card:hover .arch-card-hover-line { transform:scaleX(1); } }

    /* ══ VEIL CALLOUT ══ */
    .veil-callout-section { padding:60px 40px; border-bottom:1px solid #111; }
    .veil-callout-card { max-width:1280px; margin:0 auto; padding:48px; background:linear-gradient(135deg,rgba(79,70,229,.09),rgba(79,70,229,.04) 50%,transparent); border:1px solid rgba(79,70,229,.18); border-radius:20px; display:flex; align-items:center; justify-content:space-between; gap:32px; position:relative; overflow:hidden; }
    .veil-callout-card::before { content:"VEIL"; position:absolute; right:32px; top:50%; transform:translateY(-50%); font-family:"Bebas Neue",sans-serif; font-size:160px; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(79,70,229,.07); pointer-events:none; user-select:none; }
    .veil-callout-info { position:relative; z-index:1; }
    .veil-callout-badge { display:inline-flex; align-items:center; gap:7px; font-family:"DM Mono",monospace; font-size:8px; text-transform:uppercase; letter-spacing:.3em; color:#818cf8; padding:5px 10px; background:rgba(79,70,229,.12); border:1px solid rgba(79,70,229,.2); border-radius:999px; margin-bottom:12px; }
    .veil-callout-title { font-family:"Bebas Neue",sans-serif; font-size:52px; color:#fff; letter-spacing:.05em; line-height:1; margin-bottom:10px; }
    .veil-callout-desc { font-family:"DM Mono",monospace; font-size:10px; color:#555; line-height:1.8; max-width:400px; }
    .veil-cta { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex-shrink:0; }
    .veil-launch-btn { display:flex; align-items:center; gap:10px; padding:16px 30px; background:#4f46e5; border:none; border-radius:12px; color:#fff; font-family:"Bebas Neue",sans-serif; font-size:20px; letter-spacing:.15em; cursor:pointer; text-decoration:none; white-space:nowrap; transition:filter .2s,transform .2s; -webkit-tap-highlight-color:transparent; }
    .veil-launch-btn:hover { filter:brightness(1.18); transform:translateY(-2px); }
    .veil-launch-btn:active { transform:scale(.97); }
    .veil-cta-note { font-family:"DM Mono",monospace; font-size:7px; color:#2a2a2a; text-transform:uppercase; letter-spacing:.2em; }

    /* ══ FOOTER ══ */
    footer { padding:40px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
    .footer-brand { font-family:"Bebas Neue",sans-serif; font-size:22px; letter-spacing:.2em; color:rgba(255,255,255,.12); }
    .footer-links { display:flex; gap:4px; flex-wrap:wrap; }
    .footer-link { font-family:"DM Mono",monospace; font-size:8px; text-transform:uppercase; letter-spacing:.2em; color:#2a2a2a; text-decoration:none; padding:8px 10px; border-radius:6px; transition:color .2s; -webkit-tap-highlight-color:transparent; }
    .footer-link:active { color:#555; }
    .footer-copy { font-family:"DM Mono",monospace; font-size:7px; color:#1e1e1e; text-transform:uppercase; letter-spacing:.2em; }

    /* ══ ANIMATIONS ══ */
    @keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
    .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* ══ MOBILE ══ */
    @media (max-width:768px) {
      nav { padding:0 20px; height:56px; }
      .nav-links { display:none; }
      .nav-hamburger { display:flex; }
      .nav-drawer { display:flex; }
      .hero-text { left:20px; bottom:72px; }
      .hero-title { font-size:clamp(44px,12vw,72px); }
      .hero-eyebrow { font-size:7px; letter-spacing:.3em; margin-bottom:10px; }
      .hero-meta-item { font-size:7px; padding:0 10px; letter-spacing:.18em; }
      .hero-scroll-track { display:none; }
      .hero-cta { bottom:28px; }
      #dj { padding:60px 20px; }
      .dj-layout { grid-template-columns:1fr; gap:32px; }
      .mix-row { padding:16px; }
      .mix-duration { display:none; }
      .events-panel { padding:20px; }
      #architecture { padding:60px 20px; }
      .arch-grid { grid-template-columns:repeat(2,1fr); gap:2px; }
      .arch-card-num { font-size:70px; }
      .arch-proj-name { font-size:14px; }
      .veil-callout-section { padding:40px 20px; }
      .veil-callout-card { flex-direction:column; align-items:flex-start; padding:32px 28px; gap:24px; }
      .veil-callout-card::before { font-size:100px; right:16px; }
      .veil-callout-title { font-size:44px; }
      .veil-callout-desc { font-size:9px; }
      .veil-cta { align-items:flex-start; width:100%; }
      .veil-launch-btn { width:100%; justify-content:center; }
      footer { padding:32px 20px; flex-direction:column; align-items:flex-start; gap:16px; }
      #hero-cursor { display:none; }
      #player-bar { padding:0 16px; gap:12px; }
      .player-progress-wrap { display:none; }
    }
    @media (max-width:390px) {
      .hero-title { font-size:44px; }
      .arch-grid { grid-template-columns:1fr; }
      .mix-index { display:none; }
    }
    @media (min-width:769px) and (max-width:1024px) {
      nav { padding:0 32px; }
      .hero-text { left:32px; }
      #dj { padding:80px 32px; }
      .dj-layout { grid-template-columns:1fr; gap:40px; }
      #architecture { padding:80px 32px; }
      .arch-grid { grid-template-columns:repeat(2,1fr); }
      .veil-callout-section { padding:60px 32px; }
      .veil-callout-card { padding:40px; }
      footer { padding:40px 32px; }
    }
  
    /* Portrait phone — shift image right so robot head fills the screen */
    @media (max-width: 768px) and (orientation: portrait) {
      .hero-cover { background-position: 82% center !important; }
    }
    
    /* ── Converter tool card (in DJ section) ── */
    .tools-label {
      font-family: "DM Mono", monospace; font-size: 8px;
      text-transform: uppercase; letter-spacing: 0.5em; color: #2a2a2a;
      margin: 32px 0 12px; display: flex; align-items: center; gap: 12px;
    }
    .tools-label::before { content: ''; flex: 1; height: 1px; background: #111; }
    .tools-label::after  { content: ''; flex: 1; height: 1px; background: #111; }
    .converter-card {
      display: flex; align-items: center; gap: 16px;
      padding: 18px 20px;
      background: #0d0d10;
      border: 1px solid rgba(245,158,11,0.15);
      border-radius: 12px;
      text-decoration: none; color: inherit;
      transition: background 0.2s, border-color 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .converter-card:hover { background: #131310; border-color: rgba(245,158,11,0.35); }
    .converter-card:active { background: #161610; }
    .converter-icon {
      width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
      background: rgba(245,158,11,0.1);
      border: 1px solid rgba(245,158,11,0.2);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
    }
    .converter-info { flex: 1; min-width: 0; }
    .converter-title {
      font-family: "Bebas Neue", sans-serif; font-size: 18px;
      color: #fff; letter-spacing: 0.06em; margin-bottom: 3px;
    }
    .converter-sub {
      font-family: "DM Mono", monospace; font-size: 8px;
      color: #444; text-transform: uppercase; letter-spacing: 0.15em;
    }
    .converter-arrow {
      font-size: 14px; color: rgba(245,158,11,0.4);
      transition: color 0.2s, transform 0.2s; flex-shrink: 0;
    }
    .converter-card:hover .converter-arrow { color: #f59e0b; transform: translateX(3px); }

  
    .arch-card:nth-child(7) .arch-card-bg { background: linear-gradient(135deg,#1a100a,#060606); }
    .arch-card:nth-child(8) .arch-card-bg { background: linear-gradient(135deg,#0a1218,#060606); }
    .arch-card:nth-child(9) .arch-card-bg { background: linear-gradient(135deg,#0e1508,#060606); }
    .arch-card:nth-child(7) .arch-card-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 60% 40%,rgba(245,158,11,0.22),transparent 60%); }
    .arch-card:nth-child(8) .arch-card-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 35% 65%,rgba(79,70,229,0.25),transparent 60%); }
    .arch-card:nth-child(9) .arch-card-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 55% 35%,rgba(16,185,129,0.2),transparent 60%); }

  
    .imgconv-section { padding: 0 40px 60px; }
    .imgconv-card { display:flex; align-items:center; gap:16px; padding:18px 20px; background:#0d0d10; border:1px solid rgba(79,70,229,0.15); border-radius:12px; text-decoration:none; color:inherit; transition:background .2s,border-color .2s; -webkit-tap-highlight-color:transparent; max-width:1280px; margin:0 auto; }
    .imgconv-card:hover { background:#0d0d18; border-color:rgba(79,70,229,0.35); }
    .imgconv-card:active { background:#101018; }
    .imgconv-icon { width:38px; height:38px; border-radius:10px; flex-shrink:0; background:rgba(79,70,229,0.1); border:1px solid rgba(79,70,229,0.2); display:flex; align-items:center; justify-content:center; font-size:16px; }
    .imgconv-info { flex:1; min-width:0; }
    .imgconv-title { font-family:"Bebas Neue",sans-serif; font-size:18px; color:#fff; letter-spacing:.06em; margin-bottom:3px; }
    .imgconv-sub { font-family:"DM Mono",monospace; font-size:8px; color:#444; text-transform:uppercase; letter-spacing:.15em; }
    .imgconv-arrow { font-size:14px; color:rgba(79,70,229,0.4); transition:color .2s,transform .2s; flex-shrink:0; }
    .imgconv-card:hover .imgconv-arrow { color:#818cf8; transform:translateX(3px); }
    @media (max-width:768px) { .imgconv-section { padding:0 20px 40px; } }

  

/* ---- tool password gate ---- */
  .gate-lock { font-size:10px; margin-left:5px; opacity:.6; vertical-align:middle; }
  #gate-overlay {
    position:fixed; inset:0; z-index:3000; display:none;
    align-items:center; justify-content:center; padding:24px;
    background:rgba(3,3,3,.86); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  #gate-overlay.show { display:flex; }
  .gate-card {
    width:100%; max-width:360px; background:#0d0d0f; border:1px solid rgba(255,255,255,.09);
    border-radius:18px; padding:30px 26px 26px; text-align:center;
    box-shadow:0 24px 70px rgba(0,0,0,.6);
  }
  .gate-eyebrow { font-family:"DM Mono",monospace; font-size:8px; text-transform:uppercase; letter-spacing:.32em; color:#f59e0b; margin-bottom:14px; }
  .gate-title { font-family:"Bebas Neue",sans-serif; font-size:30px; letter-spacing:.04em; color:#fff; line-height:1; margin-bottom:6px; }
  .gate-tool  { font-family:"DM Mono",monospace; font-size:9px; text-transform:uppercase; letter-spacing:.22em; color:#555; margin-bottom:22px; }
  #gate-input {
    width:100%; background:#000; border:1px solid rgba(255,255,255,.12); border-radius:12px;
    padding:14px 16px; font-size:15px; color:#e5e5e5; outline:none; text-align:center;
    font-family:"DM Mono",monospace; letter-spacing:.3em; transition:border-color .2s;
  }
  #gate-input:focus { border-color:#4f46e5; }
  #gate-input.err { border-color:#ef4444; animation:gateShake .32s; }
  @keyframes gateShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
  #gate-error { min-height:14px; margin-top:11px; font-family:"DM Mono",monospace; font-size:9px; text-transform:uppercase; letter-spacing:.15em; color:#ef4444; }
  #gate-go {
    width:100%; margin-top:14px; background:#4f46e5; color:#fff; border:none; border-radius:12px;
    padding:15px; font-family:"DM Mono",monospace; font-size:10px; text-transform:uppercase; letter-spacing:.24em;
    cursor:pointer; transition:filter .2s,transform .12s;
  }
  #gate-go:hover { filter:brightness(1.15); }
  #gate-go:active { transform:scale(.98); }
  .gate-cancel { display:inline-block; margin-top:16px; font-family:"DM Mono",monospace; font-size:8px; text-transform:uppercase; letter-spacing:.2em; color:#444; background:none; border:none; cursor:pointer; }
  .gate-cancel:hover { color:#888; }

/* ===================================================================
   MULTI-PAGE ADDITIONS (main landing category buttons, per-page hero
   background + category label). Added for the DJ / Architecture /
   Viticulture split — everything above is the original shared styling.
   =================================================================== */

/* Per-page hero background hook + category identity colour.
   Defaults below are the MAIN LANDING values; each sub-page overrides
   --hero-bg and --cat-color in a small inline <style> in its <head>,
   so swapping a background image is a one-line change. */
:root { --hero-bg: url('/cover.jpg'); --cat-color: #f59e0b; }
.hero-cover { background: var(--hero-bg) left center / cover no-repeat, linear-gradient(135deg,#0c0b1a,#060606); }

/* Bold category label shown directly ABOVE the "THE FAT DUKE" title */
.hero-category {
  font-family:"Bebas Neue",sans-serif; font-size:clamp(30px,5.5vw,58px);
  line-height:.9; letter-spacing:.16em; margin-bottom:8px; text-transform:uppercase;
  color:var(--cat-color);
}

/* Category buttons on the main landing — mirror the VEIL Studio pill
   (1px border, rounded, DM Mono uppercase, pulsing dot, hover-brightness
   + active-scale) but sized as primary CTAs and equal-width so the three
   stay balanced on desktop, tablet and mobile. */
/* pointer-events:auto is REQUIRED — the parent .hero-text is pointer-events:none
   (legacy: the hero used to be one big click-through link) and that inherits, so
   without this the category buttons receive no clicks ("nothing happens"). */
.cat-btns { display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; max-width:760px; pointer-events:auto; }
.cat-btn {
  display:flex; align-items:center; justify-content:center; gap:9px;
  flex:1 1 0; min-width:150px;
  padding:16px 22px; border-radius:12px;
  font-family:"DM Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:.2em;
  color:#fff; text-decoration:none;
  background:var(--btn-bg); border:1px solid var(--btn-border);
  transition:filter .2s, transform .15s; -webkit-tap-highlight-color:transparent;
}
.cat-btn:hover  { filter:brightness(1.2); }
.cat-btn:active { transform:scale(.97); }
.cat-btn .veil-dot { background:var(--btn-dot); }
.cat-btn--dj   { --btn-bg:#b45309; --btn-border:rgba(245,158,11,.45); --btn-dot:#fcd34d; }
.cat-btn--arch { --btn-bg:#4f46e5; --btn-border:rgba(129,140,248,.4);  --btn-dot:#a5b4fc; }
.cat-btn--vit  { --btn-bg:#9d174d; --btn-border:rgba(244,114,182,.4);  --btn-dot:#f9a8d4; }

/* Current-page highlight in the sub-page top nav */
.nav-link.active { color:#e5e5e5; background:rgba(255,255,255,.05); }

/* The sub-page scroll cue is now a real link (was decorative + click-through
   on the old single-page hero), so re-enable clicks on the anchor version. */
a.hero-cta { pointer-events:auto; }

@media (max-width:768px) {
  .cat-btns { gap:12px; margin-top:22px; }
  .cat-btn { min-width:calc(50% - 6px); font-size:10px; padding:15px 16px; letter-spacing:.16em; }
  .hero-category { letter-spacing:.1em; }
}

/* Landing hero has real buttons, so keep the native cursor there
   (the shared .hero rule hides it for the custom ring on sub-pages). */
.cat-btn { cursor:pointer; }
@media (hover:hover) and (pointer:fine) {
  .hero--landing, .hero--landing * { cursor:auto; }
  .cat-btn { cursor:pointer; }
}

/* Viticulture content heading block (mirrors #dj / #architecture spacing) */
#viticulture { padding:80px 40px 20px; border-bottom:1px solid #111; }
@media (max-width:768px) { #viticulture { padding:60px 20px 10px; } }
@media (min-width:769px) and (max-width:1024px) { #viticulture { padding:80px 32px 20px; } }

/* The sub-page hero images can be light, so the top nav needs a subtle
   scrim to keep links legible before the solid .scrolled state kicks in.
   Barely perceptible over the near-black landing. */
nav:not(.scrolled) { background: linear-gradient(to bottom, rgba(6,6,6,.80), rgba(6,6,6,.18) 65%, rgba(6,6,6,0)); }

/* Soft shadow so the hero branding stays readable over light backgrounds
   (invisible against the dark landing cover). */
.hero-text { text-shadow: 0 2px 30px rgba(0,0,0,.55); }