/* ============================================================
   Julio Canales — global styles & design tokens
   Ported from the approved HTML preview. The tokens in :root are
   mirrored in tailwind.config.mjs so you can also use Tailwind
   utilities (text-paper, bg-ink, font-display, etc.).
   ============================================================ */
:root{
    /* ——— Black & grey system (the monochrome IS the brand) ——— */
    --ink:        #000000;   /* true black base */
    --black-2:    #0a0a0a;   /* raised black (sections) */
    --black-3:    #121212;   /* cards / wells */
    --line:       #242424;   /* hairlines */
    --line-2:     #333333;
    --grey-1:     #4d4d4d;
    --grey-2:     #7a7a7a;   /* muted captions */
    --grey-3:     #a8a8a8;   /* secondary text */
    --paper:      #f2efe9;   /* warm off-white type */
    --accent:     #c7b8a3;   /* bone / faint sepia — used SPARINGLY */
    --accent-dim: #8a7e6d;

    --font-display: "Bodoni Moda", Georgia, serif;
    --font-sans: "Archivo", system-ui, sans-serif;

    --maxw: 1640px;
    --gutter: clamp(20px, 5vw, 88px);
  }

  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--font-sans);
    font-weight:400;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  ::selection{ background:var(--accent); color:#000; }

  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }

  /* ——— Type primitives ——— */
  .kicker{
    font-family:var(--font-sans);
    font-size:clamp(11px,0.78vw,13px);
    font-weight:600;
    letter-spacing:0.42em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .label{
    font-family:var(--font-sans);
    font-size:11px;
    font-weight:600;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--grey-2);
  }
  .display{
    font-family:var(--font-display);
    font-weight:800;
    line-height:0.92;
    letter-spacing:-0.01em;
  }
  .serif-italic{ font-family:var(--font-display); font-style:italic; font-weight:500; }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

  /* ——— Reveal-on-scroll (slow, filmic) ——— */
  .reveal{ opacity:0; transform:translateY(34px) scale(0.985); }
  .reveal.in{ opacity:1; transform:none; transition:opacity 1.1s cubic-bezier(.16,.7,.2,1), transform 1.2s cubic-bezier(.16,.7,.2,1); }
  .reveal.d1{ transition-delay:.08s; }
  .reveal.d2{ transition-delay:.16s; }
  .reveal.d3{ transition-delay:.24s; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* ===================================================================
     NAV — minimal, sticky, transparent over hero
  =================================================================== */
  header.nav{
    position:fixed; inset:0 0 auto 0; z-index:60;
    display:flex; align-items:center; justify-content:space-between;
    padding:clamp(16px,2vw,26px) var(--gutter);
    transition:background .5s ease, backdrop-filter .5s ease, border-color .5s ease;
    border-bottom:1px solid transparent;
  }
  header.nav.scrolled{
    background:rgba(0,0,0,0.72);
    backdrop-filter:blur(10px) saturate(110%);
    border-bottom:1px solid var(--line);
  }
  .nav-logo{ display:flex; align-items:center; gap:14px; }
  .nav-logo img{ width:38px; height:38px; border-radius:50%; }
  .nav-logo .nm{ font-family:var(--font-sans); font-weight:600; letter-spacing:0.28em; font-size:12px; text-transform:uppercase; color:var(--paper); }
  nav.links{ display:flex; gap:clamp(18px,2.4vw,40px); align-items:center; }
  nav.links a{
    font-size:12px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; color:var(--grey-3);
    position:relative; padding:6px 0; transition:color .35s ease;
  }
  nav.links a::after{
    content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent); transition:width .4s cubic-bezier(.16,.7,.2,1);
  }
  nav.links a:hover{ color:var(--paper); }
  nav.links a:hover::after{ width:100%; }
  .nav-toggle{ display:none; background:none; border:none; color:var(--paper); cursor:pointer; padding:8px; }
  .nav-toggle span{ display:block; width:24px; height:1.5px; background:var(--paper); margin:5px 0; transition:transform .3s; }
  .nav-right{ display:flex; align-items:center; gap:clamp(16px,2.4vw,36px); }
  .lang-select{ position:relative; display:flex; align-items:center; border:1px solid var(--line-2); }
  .lang-select select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background:none; border:none; color:var(--paper);
    font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:0.16em;
    padding:7px 26px 7px 12px; cursor:pointer; transition:color .3s;
  }
  .lang-select::after{
    content:"▾"; position:absolute; right:9px; top:50%; transform:translateY(-52%);
    color:var(--grey-2); font-size:9px; pointer-events:none;
  }
  .lang-select select:hover{ color:var(--paper); }
  .lang-select select:focus{ outline:1px solid var(--paper); outline-offset:2px; }
  .lang-select select option{ background:#0a0a0a; color:var(--paper); }

  @media (max-width:880px){
    nav.links{
      position:fixed; inset:0; flex-direction:column; justify-content:center; gap:34px;
      background:rgba(0,0,0,0.98);
      transform:translateY(-100%); visibility:hidden; opacity:0;
      transition:transform .5s cubic-bezier(.16,.7,.2,1), opacity .35s, visibility 0s .5s;
      pointer-events:none;
    }
    nav.links.open{
      transform:none; visibility:visible; opacity:1; pointer-events:auto;
      transition:transform .5s cubic-bezier(.16,.7,.2,1), opacity .35s, visibility 0s;
    }
    nav.links a{ font-size:18px; }
    .nav-toggle{ display:block; z-index:61; }
  }

  /* ===================================================================
     HERO — the split. Left black word-side / right moving image-side.
  =================================================================== */
  .hero{ position:relative; height:100svh; min-height:620px; display:grid; grid-template-columns:1fr 1fr; }
  /* hard edge — explicit 1px seam, no blend */
  .hero__left{
    position:relative; background:var(--ink); display:flex; flex-direction:column; justify-content:center;
    padding:var(--gutter); padding-top:14vh; border-right:1px solid var(--line-2);
  }
  .hero__name{
    font-family:var(--font-display); font-weight:800; color:var(--paper);
    line-height:0.86; letter-spacing:-0.015em;
    font-size:calc(clamp(58px, 12vw, 178px) * var(--hero-scale, 1));
    margin:0;
  }
  .hero__name span{ display:block; }
  .hero__name .cana{ font-style:italic; font-weight:500; color:var(--paper); }
  .hero__spec{
    margin-top:clamp(22px,3vh,40px);
    font-family:var(--font-sans); font-weight:600;
    letter-spacing:0.34em; text-transform:uppercase;
    font-size:clamp(11px,1vw,15px); color:var(--grey-3);
  }
  .hero__spec b{ color:var(--accent); font-weight:600; }
  .hero__foot{
    position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(22px,4vh,40px);
    display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  }
  .hero__addr{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--grey-2); max-width:42ch; }
  .scrolldown{ display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:0.32em; text-transform:uppercase; color:var(--grey-3); }
  .scrolldown .arr{ display:inline-block; animation:bob 2.4s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(6px); opacity:1; } }
  @media (prefers-reduced-motion: reduce){ .scrolldown .arr{ animation:none; } }

  .hero__right{ position:relative; overflow:hidden; background:#000; }
  .hero__right video, .hero__right .carousel{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .hero__right::after{ /* subtle vignette + filmic darken, keeps it B&W and moody */
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(120% 90% at 70% 30%, transparent 40%, rgba(0,0,0,0.55) 100%);
  }
  .hero__right video{ filter:grayscale(1) contrast(1.06) brightness(0.92); }

  /* Carousel fallback (slow crossfade + ken burns) */
  .carousel{ display:block; }
  .carousel .slide{ position:absolute; inset:0; opacity:0; background-size:cover; background-position:center; filter:grayscale(1) contrast(1.05); transition:opacity 1.6s ease; }
  .carousel .slide.active{ opacity:1; animation:kenburns 9s ease-in-out forwards; }
  @keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }
  @media (prefers-reduced-motion: reduce){ .carousel .slide.active{ animation:none; } .carousel .slide{ transition:opacity .4s; } }

  @media (max-width:780px){
    .hero{ grid-template-columns:1fr; height:100svh; }
    .hero__left{ height:42vh; border-right:none; border-bottom:1px solid var(--line-2); padding-top:11vh; justify-content:center; }
    .hero__right{ height:58vh; }
    .hero__name{ font-size:calc(clamp(52px,17vw,96px) * var(--hero-scale, 1)); }
    .hero__foot{ position:static; margin-top:auto; padding-top:18px; }
    .scrolldown{ display:none; }
  }

  /* ===================================================================
     SECTION scaffolding
  =================================================================== */
  section{ position:relative; }
  .sec{ padding-block:clamp(80px,12vh,170px); }
  .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(40px,6vh,82px); }
  .sec-title{ font-family:var(--font-display); font-weight:800; line-height:0.9; letter-spacing:-0.015em; font-size:clamp(40px,6.2vw,104px); margin:0; color:var(--paper); }
  .sec-title em{ font-style:italic; font-weight:500; }
  .sec-num{ font-family:var(--font-sans); font-size:12px; letter-spacing:0.3em; color:var(--grey-2); }

  /* ===================================================================
     ARTISTS / PROFILES
  =================================================================== */
  .profiles{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (max-width:920px){ .profiles{ grid-template-columns:1fr; } }
  .profile{ background:var(--black-2); padding:clamp(28px,3.4vw,52px); display:flex; flex-direction:column; gap:22px; }
  .profile__top{ display:flex; align-items:center; gap:18px; }
  .profile__avatar{ width:64px; height:64px; border-radius:50%; background:#000; border:1px solid var(--line-2); object-fit:cover; flex:none; }
  .profile__avatar.ph{ display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-style:italic; color:var(--grey-2); font-size:22px; }
  .profile__name{ font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.4vw,34px); line-height:1; }
  .profile__handle{ font-size:12px; letter-spacing:0.12em; color:var(--accent); margin-top:7px; }
  .profile__role{ font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:var(--grey-3); }
  .badges{ display:flex; flex-wrap:wrap; gap:8px; }
  .badge{ font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--grey-3); border:1px solid var(--line-2); padding:6px 11px; display:inline-flex; align-items:center; gap:6px; }
  .badge.verified{ color:var(--accent); border-color:var(--accent-dim); }
  .stats{ display:flex; gap:clamp(14px,2vw,30px); flex-wrap:wrap; border-block:1px solid var(--line); padding-block:18px; }
  .stat .n{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,1.8vw,26px); line-height:1; }
  .stat .l{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--grey-2); margin-top:6px; }
  .profile__bio{ color:var(--grey-3); font-size:14.5px; line-height:1.7; max-width:54ch; }
  .cta{
    align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center; gap:12px;
    font-size:12px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--paper);
    border:1px solid var(--line-2); padding:14px 22px; transition:all .4s cubic-bezier(.16,.7,.2,1);
  }
  .cta .arr{ transition:transform .4s cubic-bezier(.16,.7,.2,1); color:var(--accent); }
  .cta:hover{ background:var(--paper); color:#000; border-color:var(--paper); }
  .cta:hover .arr{ transform:translateX(6px); color:#000; }

  /* ===================================================================
     GALLERY — asymmetric magazine grid + placeholder slots
  =================================================================== */
  .gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.1vw,18px); margin-top:clamp(40px,6vh,80px); }
  .shot{ position:relative; overflow:hidden; background:var(--black-3); cursor:pointer; }
  .shot img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.03); transition:transform 1.2s cubic-bezier(.16,.7,.2,1), filter .6s; }
  .shot:hover img{ transform:scale(1.05); filter:grayscale(1) contrast(1.08) brightness(1.03); }
  /* Placeholder slot styling — looks intentional before real images arrive */
  .shot.slot{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px solid var(--line); }
  .shot.slot::before{ content:""; position:absolute; inset:0; background:
      repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.012) 22px 44px); }
  .shot.slot .slot-mark{ font-family:var(--font-display); font-style:italic; font-size:clamp(20px,2vw,30px); color:var(--grey-1); position:relative; }
  .shot.slot .slot-meta{ font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--grey-1); position:relative; }
  /* expand hint */
  .shot .zoom{ position:absolute; right:12px; bottom:12px; width:34px; height:34px; border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(6px); transition:all .4s; color:var(--paper); background:rgba(0,0,0,0.3); backdrop-filter:blur(2px); }
  .shot:hover .zoom{ opacity:1; transform:none; }
  /* spans for editorial rhythm */
  .c3{ grid-column:span 3; } .c4{ grid-column:span 4; } .c5{ grid-column:span 5; } .c6{ grid-column:span 6; } .c7{ grid-column:span 7; } .c8{ grid-column:span 8; }
  .ar45{ aspect-ratio:4/5; } .ar11{ aspect-ratio:1/1; } .ar34{ aspect-ratio:3/4; } .ar32{ aspect-ratio:3/2; } .ar169{ aspect-ratio:16/10; } .ar23{ aspect-ratio:2/3; }
  @media (max-width:920px){
    .gallery{ grid-template-columns:repeat(6,1fr); }
    .c3,.c4{ grid-column:span 3; } .c5,.c6,.c7,.c8{ grid-column:span 6; }
  }
  @media (max-width:560px){
    .gallery{ grid-template-columns:repeat(2,1fr); }
    .c3,.c4,.c5{ grid-column:span 1; } .c6,.c7,.c8{ grid-column:span 2; }
  }

  /* ===================================================================
     FULL-BLEED EDITORIAL BREAK (portrait)
  =================================================================== */
  .break{ position:relative; height:clamp(420px,78vh,840px); overflow:hidden; background:#000; }
  .break img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; filter:grayscale(1) contrast(1.04); }
  .break::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 45%, rgba(0,0,0,0.55) 100%); }
  .break__copy{ position:absolute; left:var(--gutter); bottom:clamp(40px,8vh,90px); right:var(--gutter); z-index:2; max-width:760px; }
  .break__copy .q{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(26px,3.4vw,52px); line-height:1.12; color:var(--paper); }
  .break__copy .src{ margin-top:18px; font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--accent); }

  /* ===================================================================
     ACADEMY
  =================================================================== */
  .academy{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,4vw,70px); align-items:center; }
  @media (max-width:920px){ .academy{ grid-template-columns:1fr; } }
  .academy__media{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--black-3); border:1px solid var(--line); }
  .academy__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(0.96); }
  .academy h3{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.6vw,58px); line-height:0.96; margin:18px 0 0; }
  .academy .lead{ color:var(--grey-3); font-size:15.5px; line-height:1.75; margin-top:22px; max-width:52ch; }
  .academy .sub{ color:var(--grey-2); font-size:14px; line-height:1.7; margin-top:16px; max-width:54ch; }
  .tagrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
  .tag{ font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--grey-3); border:1px solid var(--line-2); padding:7px 13px; }
  .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
  .cta.solid{ background:var(--paper); color:#000; border-color:var(--paper); }
  .cta.solid:hover{ background:transparent; color:var(--paper); }
  .cta.solid:hover .arr{ color:var(--accent); }

  /* ===================================================================
     PRESS & AWARDS
  =================================================================== */
  .press-feature{ position:relative; background:var(--black-2); border:1px solid var(--line); padding:clamp(32px,4.6vw,76px); margin-bottom:clamp(20px,3vh,40px); display:flex; flex-direction:column; }
  .press-feature .trophy{ font-size:13px; letter-spacing:0.3em; text-transform:uppercase; color:var(--accent); }
  .press-feature h3{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,5vw,78px); line-height:0.95; letter-spacing:-0.015em; margin:18px 0 0; max-width:16ch; }
  .press-feature p{ color:var(--grey-3); font-size:clamp(15px,1.25vw,17px); line-height:1.7; margin-top:24px; max-width:54ch; }
  .press-feature .meta{ font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--grey-2); margin-top:24px; }

  .awards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (max-width:780px){ .awards{ grid-template-columns:1fr; } }
  .award{ background:var(--black-2); padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; gap:14px; min-height:230px; }
  .award .ico{ font-size:22px; }
  .award .at{ font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); }
  .award p{ color:var(--grey-3); font-size:14px; line-height:1.65; margin:0; }
  .award .src{ margin-top:auto; font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--grey-2); }

  .quotes{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-top:none; }
  @media (max-width:780px){ .quotes{ grid-template-columns:1fr; } }
  .quote{ background:var(--black-2); padding:clamp(28px,3vw,46px); }
  .quote .q{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(19px,1.9vw,27px); line-height:1.34; color:var(--paper); }
  .quote .src{ margin-top:18px; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent); }

  /* ===================================================================
     CONTACTO / FOOTER
  =================================================================== */
  footer{ background:var(--black-2); border-top:1px solid var(--line); }
  .foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(30px,4vw,64px); padding-block:clamp(60px,9vh,120px); }
  @media (max-width:920px){ .foot-grid{ grid-template-columns:1fr; gap:44px; } }
  .foot-col h4{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--grey-2); margin:0 0 20px; font-weight:600; }
  .foot-studio{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3vw,44px); line-height:1; }
  .foot-addr{ color:var(--grey-3); font-size:14.5px; line-height:1.8; margin-top:18px; font-style:normal; }
  .foot-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
  .foot-list a, .foot-list li{ color:var(--grey-3); font-size:14px; transition:color .3s; }
  .foot-list a:hover{ color:var(--accent); }
  .map{ grid-column:1 / -1; margin-top:clamp(30px,4vh,56px); position:relative; height:clamp(220px,30vh,340px); border:1px solid var(--line); overflow:hidden; background:var(--black-3); }
  .map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(0.92) contrast(0.9); }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-block:26px; border-top:1px solid var(--line); }
  .foot-bottom span{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--grey-1); }

  /* ===================================================================
     LIGHTBOX
  =================================================================== */
  .lightbox{ position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.95); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .5s ease; }
  .lightbox.open{ opacity:1; pointer-events:auto; }
  .lightbox img{ max-width:90vw; max-height:86vh; object-fit:contain; filter:grayscale(1); transform:scale(0.97); transition:transform .5s cubic-bezier(.16,.7,.2,1); }
  .lightbox.open img{ transform:none; }
  .lightbox .lb-slot{ width:min(72vw,560px); aspect-ratio:4/5; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; background:var(--black-3); }
  .lightbox .lb-slot .slot-mark{ font-family:var(--font-display); font-style:italic; font-size:34px; color:var(--grey-1); }
  .lightbox .lb-slot .slot-meta{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--grey-1); }
  .lb-close{ position:absolute; top:24px; right:28px; background:none; border:none; color:var(--paper); font-size:30px; cursor:pointer; line-height:1; opacity:.7; transition:opacity .3s; }
  .lb-close:hover{ opacity:1; }
  .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:1px solid var(--line-2); color:var(--paper); width:50px; height:50px; cursor:pointer; font-size:20px; opacity:.6; transition:opacity .3s, background .3s; }
  .lb-nav:hover{ opacity:1; background:rgba(255,255,255,0.06); }
  .lb-prev{ left:24px; } .lb-next{ right:24px; }
  @media (max-width:560px){ .lb-nav{ width:42px; height:42px; } }

/* ===================================================================
   TRAYECTORIA — stat band + editorial timeline
=================================================================== */
.statband{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); margin:clamp(28px,4vh,56px) 0 0; }
.statcell{ padding:clamp(18px,3vh,34px) 12px; text-align:center; }
.statcell + .statcell{ border-left:1px solid var(--line-2); }
.statcell .sn{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,5.4vw,76px); line-height:1; color:var(--paper); }
.statcell .sl{ margin-top:8px; font-family:var(--font-sans); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--grey-2); }
@media (max-width:720px){
  .statband{ grid-template-columns:repeat(2,1fr); }
  .statcell:nth-child(3){ border-left:none; }
  .statcell:nth-child(n+3){ border-top:1px solid var(--line-2); }
}
.timeline{ list-style:none; margin:clamp(32px,5vh,64px) 0 0; padding:0 0 0 clamp(26px,4vw,48px); position:relative; }
.timeline::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line-2); }
.tl-item{ position:relative; padding:0 0 clamp(28px,4.5vh,52px); }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:""; position:absolute; left:calc(-1 * clamp(26px,4vw,48px) - 4px); top:10px; width:9px; height:9px; border-radius:50%; background:var(--paper); }
.tl-year{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(22px,2.6vw,34px); color:var(--paper); display:block; line-height:1; }
.tl-title{ margin:10px 0 6px; font-family:var(--font-sans); font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--paper); }
.tl-desc{ margin:0; max-width:640px; font-size:14px; line-height:1.7; color:var(--grey-2); }

/* ===================================================================
   RECONOCIMIENTOS — full awards list, jury strip, conventions
=================================================================== */
.awards-full{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:1000px){ .awards-full{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .awards-full{ grid-template-columns:1fr; } }
.award-mini{ background:var(--black-2); padding:clamp(20px,2.2vw,32px); display:flex; flex-direction:column; gap:10px; }
.award-mini .y{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(24px,2.4vw,34px); line-height:1; color:var(--paper); }
.award-mini .t{ font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); }
.award-mini .d{ font-size:13px; line-height:1.6; color:var(--grey-3); margin:0; }
.award-mini .src{ margin-top:auto; padding-top:12px; font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--grey-2); }
.jurycard{ background:var(--black-2); border:1px solid var(--line); border-top:none; padding:clamp(20px,2.2vw,32px); font-size:13px; line-height:1.9; color:var(--grey-3); }
.jury__label{ display:inline-block; margin-right:14px; font-family:var(--font-sans); font-weight:600; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--paper); }
.convlist{ background:var(--black-2); border:1px solid var(--line); border-top:none; }
.convlist summary{ cursor:pointer; list-style:none; padding:clamp(20px,2.2vw,32px); font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--paper); display:flex; justify-content:space-between; align-items:center; }
.convlist summary::-webkit-details-marker{ display:none; }
.convlist summary::after{ content:"+"; font-size:16px; color:var(--grey-2); transition:transform .3s; }
.convlist[open] summary::after{ transform:rotate(45deg); }
.convlist ul{ list-style:none; margin:0; padding:0 clamp(20px,2.2vw,32px) clamp(20px,2.2vw,32px); columns:2; column-gap:40px; }
.convlist li{ font-size:13px; color:var(--grey-3); padding:7px 0; break-inside:avoid; border-bottom:1px solid var(--line); }
.convlist li span{ font-family:var(--font-display); font-style:italic; color:var(--paper); margin-right:10px; }
@media (max-width:640px){ .convlist ul{ columns:1; } }

/* ===================================================================
   PARTNERS — typographic band
=================================================================== */
.partners__cheyenne{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(18px,2.4vw,28px); color:var(--paper); max-width:820px; margin:0 0 22px; line-height:1.5; }
.marquee{ overflow:hidden; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:clamp(22px,3.6vh,44px) 0; margin:10px 0 28px; }
.marquee__track{ display:flex; align-items:center; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ display:flex; align-items:center; white-space:nowrap; }
.marquee__track .mk-word{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:clamp(30px,4.2vw,64px); line-height:1; color:var(--paper); }
.marquee__track .mk-logo img{ height:clamp(34px,4vw,60px); width:auto; display:block; opacity:0.92; }
.marquee__track span em{ font-style:normal; font-weight:400; color:var(--grey-2); padding:0 clamp(16px,1.8vw,32px); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; flex-wrap:wrap; width:auto; } }
.partners__charity{ font-size:13px; color:var(--grey-2); max-width:640px; margin:0; line-height:1.8; }

#partners .kicker{ margin:0 0 14px; }
.sponsors{ margin-bottom:0; }
.convlist li em{ font-style:normal; }
.sponsors .award-mini .y{ font-size:clamp(15px,1.4vw,19px); color:var(--grey-2); }
.sponsors .award-mini .t{ font-size:clamp(17px,1.8vw,24px); letter-spacing:0.12em; color:var(--paper); }

/* ===================================================================
   FOCUS RAIL — 3D portfolio carousel
=================================================================== */
.gallery-rail{ margin-top:6px; }
.frail{ position:relative; width:100%; overflow:hidden; outline:none; user-select:none; border:1px solid var(--line); background:var(--black-2); padding:clamp(28px,4vh,52px) 0 clamp(22px,3vh,38px); }
.frail__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.frail__bg-img{ position:absolute; inset:0; }
.frail__bg-img img{ width:100%; height:100%; object-fit:cover; filter:blur(60px) saturate(0.4); }
.frail__bg-fade{ position:absolute; inset:0; background:linear-gradient(to top, var(--black-2), rgba(10,10,10,0.55), transparent); }
.frail__stage{ position:relative; z-index:1; margin:0 auto; height:clamp(320px,44vh,420px); max-width:1100px; display:flex; align-items:center; justify-content:center; perspective:1200px; cursor:grab; }
.frail__stage:active{ cursor:grabbing; }
.frail__card{ position:absolute; aspect-ratio:3/4; width:clamp(220px,26vw,300px); background:#0d0d0d; border-top:1px solid rgba(242,239,233,0.22); box-shadow:0 30px 60px rgba(0,0,0,0.55); overflow:hidden; }
.frail__card img, .frail__card video{ width:100%; height:100%; object-fit:cover; pointer-events:none; display:block; }
.frail__card.is-center{ z-index:20; }
.frail__card:not(.is-center){ z-index:10; cursor:pointer; }
.frail__sheen{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(242,239,233,0.08), transparent 40%); pointer-events:none; }
.frail__foot{ position:relative; z-index:2; margin:clamp(20px,3vh,34px) auto 0; max-width:1100px; padding:0 clamp(18px,3vw,40px); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.frail__info{ min-height:64px; display:flex; flex-direction:column; justify-content:center; }
.frail__meta{ font-family:var(--font-sans); font-size:10.5px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px; }
.frail__title{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(22px,2.6vw,34px); line-height:1.1; color:var(--paper); margin:0; }
.frail__nav{ display:flex; align-items:center; gap:2px; border:1px solid var(--line-2); }
.frail__nav button{ background:none; border:none; color:var(--grey-2); padding:11px 13px; cursor:pointer; display:flex; align-items:center; transition:color .3s, background .3s; }
.frail__nav button:hover{ color:var(--paper); background:rgba(242,239,233,0.06); }
.frail__nav button:active{ transform:scale(0.95); }
.frail__count{ min-width:52px; text-align:center; font-family:var(--font-sans); font-size:11px; letter-spacing:0.16em; color:var(--grey-2); }
@media (max-width:640px){
  .frail__stage{ height:clamp(300px,52vw,380px); }
  .frail__card{ width:min(62vw,240px); }
  .frail__foot{ flex-direction:column; align-items:flex-start; }
}