/* ============================================================================
   LEO MISSAEL — DESIGN SYSTEM STYLESHEET
   ----------------------------------------------------------------------------
   This file is the reference implementation for the whole site. It was
   consolidated from many iterative passes on the home page; every rule below
   is the FINAL, currently-live value — there are no dead/overridden layers
   left. Read top to bottom, it fully documents the system:

     1. Design tokens (colors, spacing, easing)
     2. Base reset
     3. Header + mobile nav
     4. Buttons (two sizes)
     5. Hero
     6. Showreel
     7. Section title system (title + intro pattern — reused everywhere)
     8. Projects grid ("Trabajos")
     9. Idea cards ("Mis locuras")
    10. About panel ("Sobre mí" / "HOLA!")
    11. Closing statement
    12. Footer + back-to-top
    13. Motion accessibility
    14. Mobile (single consolidated breakpoint, two clearly-labeled blocks:
         layout changes, then hover removal)

   Build new pages by reusing these class names as-is — see the prompt this
   file ships with for the full written spec (colors, type scale, spacing
   rules, the "visual on top / copy below" mobile pattern, etc).
   ============================================================================ */

@font-face{font-family:"Reddit Sans Condensed";src:url("../assets/fonts/RedditSansCondensed-Regular.woff2") format("woff2"),url("../assets/fonts/RedditSansCondensed-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Reddit Sans Condensed";src:url("../assets/fonts/RedditSansCondensed-Medium.woff2") format("woff2"),url("../assets/fonts/RedditSansCondensed-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Reddit Sans Condensed";src:url("../assets/fonts/RedditSansCondensed-Bold.woff2") format("woff2"),url("../assets/fonts/RedditSansCondensed-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Reddit Sans Condensed";src:url("../assets/fonts/RedditSansCondensed-ExtraBold.woff2") format("woff2"),url("../assets/fonts/RedditSansCondensed-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Reddit Sans Condensed";src:url("../assets/fonts/RedditSansCondensed-Black.woff2") format("woff2"),url("../assets/fonts/RedditSansCondensed-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Color */
  --lm-blue:#272e89;
  --lm-cream:#FFECDC;
  --lm-orange:#FF9D4B;
  --lm-white:#FFFAF5;

  /* Type / motion */
  --lm-pad:clamp(20px,4vw,64px);       /* outer page gutter (header/footer/closing) */
  --lm-body:20px;                       /* standard body/intro copy size, desktop */
  --lm-ease:cubic-bezier(.22,1,.36,1);
  --lm-hover:.58s;

  /* Home content rail — the shared container width for every stacked
     section (hero note excluded, showreel, projects grid, idea grid,
     about panel). Centers with a 60px total side gutter, capped at 1220px. */
  --home-rail:min(1220px,calc(100% - 60px));
  --home-section-rail:min(1220px,calc(100% - 60px)); /* alias, same value: used by the title+intro row */
  --home-section-gap:clamp(46.8px,5.4vw,77.4px); /* the ONE vertical rhythm value between major sections (reduced 10%) */
  --home-overlay-angle:-13deg; /* project-card hover title tilt */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--lm-cream);color:var(--lm-blue);font-family:"Reddit Sans Condensed",Arial,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
main{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.home-page{width:100%;background:var(--lm-cream);padding-top:0}

/* ---------- 2. HEADER ---------- */
.site-header{position:fixed;z-index:20;top:0;left:0;right:0;padding:16px var(--lm-pad);display:flex;align-items:center;justify-content:space-between;background:var(--lm-blue);color:var(--lm-white);transition:transform .45s var(--lm-ease),padding .45s var(--lm-ease),box-shadow .45s var(--lm-ease)}
.site-header.scrolled{padding-top:14px;padding-bottom:14px;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.site-header.on-blue{border-bottom:1px solid var(--lm-white)}
.brand{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:800;letter-spacing:-.025em}
.brand-logo{display:block;width:auto;height:47px;flex:0 0 auto}
.brand-logo svg{display:block;width:100%;height:100%}
.brand-logo-full{width:150px;height:47px}
.brand-logo-compact{width:52px;height:52px;display:none}

.nav{display:flex;align-items:center;gap:34px;font-size:14px}
.nav a{position:relative}
.nav a:not(.contact)::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--lm-ease)}
.nav a:not(.contact):hover::after{transform:scaleX(1);transform-origin:left}
.nav-toggle{display:none;background:none;border:0;color:inherit;width:34px;height:34px;padding:6px;cursor:pointer}
.nav-toggle span{display:block;height:2px;background:currentColor;margin:5px 0;transition:transform .3s var(--lm-ease),opacity .3s var(--lm-ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none}

/* ---------- 3. BUTTONS ----------
   Two sizes only. Same colors/border/radius(0) in both; SMALL for CTAs that
   live inside a card or a tight row (project overlay, idea card). LARGE
   (.cta-lg) for section-level, standalone CTAs (Más historias, Más sobre mí,
   Leer más ideas). Never introduce a third size — reuse one of these two. */
.page-cta,.cta-button{display:inline-flex;align-items:center;gap:8px;background:var(--lm-orange);color:var(--lm-blue);border:1px solid var(--lm-orange);padding:10px 18px;font-size:14px;font-weight:700;transition:transform .35s var(--lm-ease),background-color .28s,color .28s,border-color .28s}
.page-cta:hover,.cta-button:hover{background:var(--lm-blue);color:var(--lm-white);border-color:var(--lm-orange);transform:translateY(-2px)}
.cta-lg{display:inline-flex;align-items:center;gap:10px;background:var(--lm-orange);color:var(--lm-blue);border:1px solid var(--lm-orange);padding:14px 24px;font-size:15px;font-weight:700;transition:transform .35s var(--lm-ease),background-color .28s,color .28s,border-color .28s}
.cta-lg:hover{background:var(--lm-blue);color:var(--lm-white);border-color:var(--lm-orange);transform:translateY(-2px)}
.contact{background:var(--lm-orange);color:var(--lm-blue);padding:10px 18px;border:1px solid var(--lm-orange);border-radius:0;font-weight:700;transition:transform .35s var(--lm-ease),background .35s}
.contact:hover{transform:translateY(-2px);background:var(--lm-blue);color:var(--lm-white);border:1px solid var(--lm-orange)}

/* ---------- 4. HERO ----------
   Artwork is absolutely positioned and pre-cropped to its own visible
   content (the source file carries ~17% dead transparent margin below the
   text baseline, and it's cropped out here via a fixed height + overflow
   hidden, rather than trusting the raw image box). The note's `bottom` is
   pinned to --home-section-gap, which lands its baseline flush with the
   artwork's underline AND gives a deliberate, reusable gap before the next
   section — the same rhythm used everywhere else, not a coincidence. */
.home-hero{position:relative;height:calc(120px + min(526px,30.17vw) + var(--home-section-gap));overflow:hidden}
.home-hero__art{position:absolute;z-index:1;left:0;top:calc(120px + min(526px,30.17vw) - min(601px,34.46vw));width:min(1185px,68vw);height:min(741px,42.53vw);overflow:hidden;max-width:none;pointer-events:none;transform:translateX(-8%)}
.home-hero__art img{display:block;width:100%;height:auto;max-width:none}

/* Layered hero variant — alternating background photo underneath a fixed
   text/line layer (frase.gif). All six source files share one identical
   1920x1080 canvas, so one crop rule serves all of them; the phrase never
   moves, only the background crossfades, so there's zero risk of the type
   drifting out of place between frames. */
.home-hero__art--layered{height:min(601px,34.46vw)}
.home-hero__art--layered .home-hero__bg,
.home-hero__art--layered .home-hero__phrase{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;display:block;transform:translateY(-2.41%)}
.home-hero__art--layered .home-hero__bg{opacity:0;transition:none}
.home-hero__art--layered .home-hero__bg.is-active{opacity:1}
.home-hero__art--layered .home-hero__phrase{z-index:2}
.home-hero__statement{display:block}
.home-hero__note{position:absolute;z-index:3;right:max(30px,calc((100vw - var(--home-rail))/2));bottom:var(--home-section-gap);width:240px;margin:0;text-align:right;font-size:clamp(15px,1.3vw,20px);line-height:1.28;letter-spacing:-.01em}
.home-hero__note a{border-bottom:2px solid currentColor}
.hero-rotating-word{display:inline-block;min-width:5.2ch;transition:opacity .28s ease,transform .38s var(--lm-ease)}
.hero-rotating-word.is-changing{opacity:0;transform:translateY(.35em)}

/* ---------- 5. SHOWREEL ---------- */
.home-reel{width:var(--home-rail);margin:0 auto}

/* Subpage hero variant — reused by Trabajos, Sobre mí, Ideas, Contacto.
   These four hero images are pure typographic lockups (no illustration
   bleed like the home megaphone), all supplied on an identical canvas, so
   they share ONE crop rule instead of four bespoke ones. Unlike the home
   megaphone, they get real breathing room below the header (they're not
   meant to tuck behind it), and only a mild left shift/crop instead of
   the aggressive 15% used for the illustration. */
.home-hero--page .home-hero__art{top:120px;height:min(526px,30.17vw);transform:translateX(-8%)}
.home-hero--page .home-hero__art img{transform:translateY(-4.78%)}
.home-hero--page{height:calc(120px + min(526px,30.17vw) + var(--home-section-gap))}
@media(max-width:800px){
  .home-hero--page .home-hero__art{top:auto;aspect-ratio:4007/1778;height:auto;transform:translateX(-8%)}
  .home-hero--page .home-hero__art img{transform:translateY(-4.78%)}
}
.home-reel__box{width:100%;aspect-ratio:16/9;background:var(--lm-blue);display:grid;place-items:center}
.home-reel__play{width:66px;height:66px;border:1px solid rgba(255,255,255,.55);border-radius:50%;opacity:0;transition:transform .5s var(--lm-ease),opacity .3s}
.home-reel__play::after{content:"";display:block;margin:20px 0 0 25px;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:14px solid var(--lm-white)}
.home-reel__box[role="button"]:hover .home-reel__play,.home-reel__box[role="button"]:focus-visible .home-reel__play{opacity:1;transform:scale(1.08)}

/* ---------- 6. SECTION TITLE SYSTEM ----------
   The reusable "title + intro" header row for any .home-works-style section
   (Trabajos, Mis locuras, and any future one). Title sits left, full weight;
   intro sits in a fixed-width right column, right-aligned, ALWAYS exactly 2
   lines on desktop (box width is tuned for that — see the prompt). The
   underline bleeds from the true page edge to the title's own width. */
.home-works{padding:var(--home-section-gap) 0 clamp(42px,5vw,70px)}
.home-section-head{width:var(--home-section-rail);margin:0 auto clamp(28px,2.5vw,36px);display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:clamp(40px,6vw,84px);align-items:start}
.home-section-title{position:relative;width:max-content;margin:0;font-size:clamp(38px,4.1vw,62px);line-height:.9;letter-spacing:-.055em;font-weight:900;padding-bottom:4px}
.home-section-title::after{content:"";position:absolute;left:calc(-1 * ((100vw - var(--home-section-rail))/2));bottom:0;width:calc(100% + ((100vw - var(--home-section-rail))/2));height:3px;background:currentColor}
.home-section-intro{width:380px;margin:0;text-align:right;font-size:var(--lm-body);line-height:1.22;letter-spacing:-.01em}

/* ---------- 7. PROJECTS GRID ("Trabajos") ----------
   2-up grid on --home-rail. Each card reveals a diagonal-tilted title +
   blurb + small CTA on hover/focus (hidden the rest of the time via
   clip-path, not display, so it stays keyboard-reachable). */
.home-projects{width:var(--home-rail);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.2vw,36px)}
.project{display:block;min-width:0}
.project-media{aspect-ratio:1.45/1;overflow:hidden;background:var(--lm-white);position:relative;border:1px solid transparent}
.project-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .8s var(--lm-ease)}
.project-overlay{--overlay-w:72%;position:absolute;z-index:4;left:0;bottom:0;width:var(--overlay-w);aspect-ratio:3/2;max-width:92%;max-height:88%;pointer-events:none}
.project-overlay-shape{position:absolute;inset:0;width:100%;height:100%;display:block;clip-path:inset(0 100% 0 0);transition:clip-path var(--lm-hover) var(--lm-ease)}
.project-overlay-shape path{fill:var(--lm-blue)}
.project-overlay-content{position:absolute;pointer-events:none;left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);bottom:clamp(20px,2.8vw,36px);display:flex;flex-direction:column;align-items:flex-start;color:var(--lm-white);opacity:0;transform:translateY(10px);transition:opacity .32s var(--lm-ease) .06s,transform .42s var(--lm-ease) .06s}
.project-overlay-content strong{display:block;font-size:clamp(20px,2.4vw,34px);line-height:.95;letter-spacing:-.025em;font-weight:700;transform:rotate(var(--home-overlay-angle));transform-origin:left center;margin-bottom:2px}
.project-overlay-content span{margin-top:10px;max-width:390px;font-size:16px;line-height:1.2;color:var(--lm-white);opacity:.94}
.project-overlay-content em{margin-top:15px;align-self:flex-start;border:1px solid var(--lm-orange);background:var(--lm-orange);color:var(--lm-blue);padding:10px 18px;font-style:normal;font-size:14px;font-weight:700;pointer-events:auto;transition:transform .25s ease,background-color .28s ease,color .28s ease,border-color .28s ease}
.project:hover .project-image,.project:focus-visible .project-image{transform:scale(1.018)}
.project:hover .project-overlay-shape,.project:focus-visible .project-overlay-shape{clip-path:inset(0 0 0 0)}
.project:hover .project-overlay-content,.project:focus-visible .project-overlay-content{opacity:1;transform:translateY(0)}
.project:hover .project-overlay-content em{transform:translateY(-1px)}
.project-overlay-content em:hover,.project-overlay-content em:focus-visible{background:var(--lm-blue);color:var(--lm-white);border-color:var(--lm-orange)}
/* Beats a leftover higher-specificity rule from an older stylesheet
   (.works-list .project-overlay-content em) on the Trabajos page, which
   was keeping its hover CTA at the old, bigger size. */
.works-list .project-overlay-content em{padding:10px 18px;font-size:14px}
/* Beats a leftover !important rule (.works-list .project-image{height:auto!important})
   that was forcing each cover photo to its own natural aspect ratio instead
   of filling the card — this is why several photos (Makikuna, Pibox,
   Luzdiana...) didn't reach the bottom of their block. Restoring the same
   fill-and-crop behavior used everywhere else on the site. */
.works-list .project-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important}
/* Fix: .ideas-list (legacy container) had its own max-width/padding,
   which shrank the ambient "100%" that --home-rail measures against,
   making .idea-grid render narrower than the identical grid on the home
   page. Making it full-bleed here lets the grid center itself exactly
   the same way it does everywhere else. */
.ideas-list{max-width:none;padding:0 0 clamp(88px,10vw,144px)}
.ideas-list-head{width:var(--home-rail);margin:0 auto;padding:26px 0 24px}
.project-meta{padding-top:8px;display:flex;justify-content:space-between;gap:20px;font-size:14px}
.project-name{font-weight:800}
.project-type{opacity:.68}
.home-more{text-align:center;margin-top:25px}

/* ---------- 8. IDEA CARDS ("Mis locuras") ----------
   Same rail/gap as the projects grid, deliberately, so both 2-up grids
   align edge to edge. Unlike project cards, the info block is ALWAYS
   visible (no hover reveal): image on top, solid blue block below with
   title, rule, and a text+CTA row. Body copy matches --lm-body so it reads
   the same size as every other section's intro/subtitle text. */
.idea-grid{width:var(--home-rail);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.2vw,36px)}
.idea-card{display:block}
.idea-card__image{aspect-ratio:5/3;overflow:hidden;background:#e3ded7}
.idea-card__image img{width:100%;height:100%;display:block;object-fit:cover}
.idea-card__body{background:var(--lm-blue);color:var(--lm-white);padding:clamp(22px,2.6vw,32px)}
.idea-card__title{margin:0;font-size:clamp(19px,1.9vw,26px);line-height:1.05;letter-spacing:-.02em;font-weight:700;text-transform:uppercase}
.idea-card__rule{display:block;width:100%;height:2px;background:var(--lm-white);margin:10px 0 16px;opacity:.9}
.idea-card__row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.idea-card__text{margin:0;font-size:var(--lm-body);line-height:1.28;max-width:60%;font-weight:400}
.idea-card__cta{flex:none}

/* ---------- 9. ABOUT PANEL ("Sobre mí" / "HOLA!") ----------
   Full-bleed blue panel on --home-rail: copy left, portrait right. The
   title uses the exact same scale as .home-section-title (Trabajos/Mis
   locuras) by design — one H2 size across the whole site. The rule bleeds
   left past the copy's own edge toward the panel's inner padding. */
.home-about{width:var(--home-rail);margin:0 auto;background:var(--lm-blue);color:var(--lm-white);display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,7vw,95px);align-items:center;padding:30px clamp(56px,7vw,80px)}
.home-about__copy{max-width:510px}
.home-about__title{margin:0;font-size:clamp(38px,4.1vw,62px);line-height:.9;letter-spacing:-.055em;font-weight:900}
.home-about__rule{display:block;width:calc(clamp(56px,7vw,80px) + 205px);height:3px;background:var(--lm-white);margin:4px 0 24px;margin-left:calc(-1 * clamp(56px,7vw,80px))}
.home-about__copy p{margin:0 0 16px;font-size:var(--lm-body);line-height:1.28;letter-spacing:0}
.home-about__copy .cta-button{margin-top:2px}
.home-about__portrait{margin:0;aspect-ratio:1.16/1;overflow:hidden;background:var(--lm-white)}
.home-about__portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}

/* ---------- 10. CLOSING STATEMENT ----------
   Left-bled artwork (line runs to the true page edge), cropped the same
   way as the hero: the source file carries ~65% dead transparent canvas
   above/below the text, trimmed via overflow+transform rather than fighting
   it with section padding. */
.home-closing{padding:clamp(28px,3.4vw,48px) var(--lm-pad) clamp(28px,3.4vw,48px) 0;overflow:hidden}
.home-closing__art{width:min(1240px,68vw);aspect-ratio:2048/577.9;overflow:hidden;position:relative;margin:0;display:block;transform:translateX(-10%)}
.home-closing__art img{display:block;width:100%;height:auto;max-width:none;position:relative;transform:translateY(-29%)}

/* ---------- 11. FOOTER + BACK-TO-TOP ---------- */
footer{background:var(--lm-blue);color:var(--lm-white);padding:70px var(--lm-pad) calc(34px + 64px)}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;align-items:start}
.footer-brand-wrap{display:flex;align-items:flex-start}
.footer-logo{width:180px;height:auto;display:block}
.footer-logo svg,.footer-logo img{display:block;width:100%;height:auto}
.footer-center{text-align:center}
.footer-talk{font-size:17px;font-weight:600;margin-bottom:22px}
.footer-socials{display:flex;justify-content:center;gap:18px}
.footer-links{display:flex;flex-direction:column;align-items:flex-end;gap:9px;font-size:15px}
.footer-links a{opacity:.92;position:relative}
.footer-links a:not(.contact)::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--lm-ease)}
.footer-links a:hover::after{transform:scaleX(1);transform-origin:left}
.footer-social-icon{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--lm-orange);background:var(--lm-orange);overflow:hidden;transition:transform .3s var(--lm-ease)}
.footer-social-icon .footer-icon-white,.footer-social-icon .footer-icon-blue{position:absolute;inset:0;display:grid;place-items:center;transition:transform .3s var(--lm-ease),opacity .3s}
.footer-social-icon .footer-icon-white{opacity:1}
.footer-social-icon .footer-icon-blue{opacity:0}
.footer-social-icon svg{width:18px;height:18px;display:block}
.footer-social-icon .footer-icon-white img,.footer-social-icon .footer-icon-blue img{display:block;width:18px;height:18px;object-fit:contain}
.footer-social-icon:hover{transform:translateY(-2px);background:var(--lm-blue)}
.footer-social-icon:hover .footer-icon-white{opacity:0}
.footer-social-icon:hover .footer-icon-blue{opacity:1}
.footer-bottom{margin-top:80px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;font-size:12px;opacity:.6}
.back-to-top{position:fixed;z-index:16;right:24px;bottom:88px;width:56px;height:56px;border:1px solid var(--lm-orange);background:var(--lm-orange);color:var(--lm-blue);display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);transition:opacity .3s var(--lm-ease),transform .3s var(--lm-ease),visibility 0s linear .3s,background-color .28s,color .28s,border-color .28s}
.back-to-top.visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .3s var(--lm-ease),transform .3s var(--lm-ease),visibility 0s linear 0s,background-color .28s,color .28s,border-color .28s}
.back-to-top:hover,.back-to-top:focus-visible{background:var(--lm-blue);color:var(--lm-white);border-color:var(--lm-orange)}
.back-to-top svg{width:24px;height:24px;display:block;pointer-events:none}

/* ---------- 12. MOTION ACCESSIBILITY ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
  .site-header,.project-image,.project-overlay-shape,.project-overlay-content,.cta-button,.page-cta,.cta-lg,.footer-social-icon,.home-reel__play{transition:none!important}
}

/* ============================================================================
   13. MOBILE (≤800px)
   ----------------------------------------------------------------------------
   Design logic — "visual on top, copy below":
   Every desktop section here pairs a visual (illustration, or a title) with
   a narrower supporting-copy column beside it: hero art + note, section
   title + intro, portrait + about copy. On mobile there's no room for two
   columns, so all of them follow ONE rule instead of separate hacks:
     1. The visual (image, or the title) stays full-width, on top.
     2. The supporting copy drops below it, in normal flow, LEFT-aligned.
     3. That copy gets a wider measure than its desktop column (~400–420px)
        so it wraps into fewer, longer lines. Desktop-only forced line
        breaks (class="rail-break") are switched off so it can reflow.
   Reuse: any future page built with .home-section-head (title+intro) or a
   portrait+copy panel (.home-about's classes) inherits this automatically —
   no new CSS needed, just the same class names.
   ============================================================================ */
@media(max-width:800px){
  :root{--home-rail:calc(100% - 60px);--home-section-rail:calc(100% - 60px)}

  /* --- Header: compact mark-only logo + hamburger --- */
  .site-header{padding:11px 20px}
  .brand-logo-full{display:none}
  .brand-logo-compact{display:block;width:52px;height:52px}
  .nav{gap:15px;font-size:12px}
  .nav a:nth-child(1),.nav a:nth-child(2),.nav a:nth-child(3),.nav .contact{display:none}
  .nav-toggle{display:block}
  .mobile-menu{position:fixed;z-index:19;top:0;left:0;right:0;display:flex;flex-direction:column;gap:0;padding:90px 24px 30px;background:var(--lm-blue);color:var(--lm-white);transform:translateY(-100%);transition:transform .45s var(--lm-ease);max-height:100vh;overflow-y:auto;box-sizing:border-box}
  .mobile-menu.open{transform:translateY(0)}
  body.menu-open{overflow:hidden}
  body.menu-open .site-header{transform:none!important}
  body.menu-open .back-to-top{display:none}
  .mobile-menu a{font-size:22px;font-weight:700;letter-spacing:-.01em;padding:17px 2px;border-bottom:1px solid rgba(255,255,255,.16)}
  .mobile-menu a:last-child{margin-top:10px;border-bottom:none;display:flex;align-items:center;justify-content:center;background:var(--lm-orange);color:var(--lm-blue);padding:14px 22px;width:fit-content;align-self:flex-end}

  /* --- Hero: artwork alone on top, note left-aligned below ---
     Same crop technique as desktop (own transparent margin removed), plus
     the 15% left shift carries over so the same slice of the artwork is
     framed at every size. */
  .home-hero{height:auto;padding:43px 0 32px;display:block}
  .home-hero__art{position:static;width:100%;height:auto;max-width:none;overflow:hidden;aspect-ratio:2048/1255.9;transform:translateX(-8%)}
  .home-hero__art img{transform:translateY(-3.5%)}
  .home-hero__art--layered{position:relative;top:0;aspect-ratio:1920/973;height:auto}
  .home-hero__art--layered .home-hero__bg,
  .home-hero__art--layered .home-hero__phrase{transform:translateY(-2.41%)}
  .home-hero__note{position:static;display:block;width:var(--home-section-rail);max-width:420px;margin:20px auto 0;padding:0;text-align:left;font-size:17px;line-height:1.32}
  .home-hero__note .rail-break{display:none}

  /* --- Showreel --- */
  .home-reel{width:var(--home-rail)}
  .home-reel__box{aspect-ratio:16/9}

  /* --- Section head: title on top, intro left-aligned below --- */
  .home-works{padding:42px 0 48px}
  .home-section-head{display:block;margin:0 auto clamp(28px,2.5vw,36px)}
  .home-section-title{font-size:42px}
  .home-section-title::after{left:0;width:100%}
  .home-section-intro{width:100%;max-width:420px;margin:14px 0 0;text-align:left;font-size:17px}
  .home-section-intro .rail-break{display:none}

  /* --- Projects grid --- */
  .home-projects{grid-template-columns:1fr;gap:25px}
  .project-meta{font-size:13px}
  .home-more{margin-top:25px}

  /* --- Idea cards: single column; text+CTA stack instead of a row --- */
  .idea-grid{grid-template-columns:1fr;gap:24px}
  .idea-card__row{display:block}
  .idea-card__text{max-width:none;margin-bottom:16px;font-size:16px;line-height:1.3}
  .cta-lg{font-size:14px;padding:12px 20px}

  /* --- About/HOLA: portrait alone on top, copy left-aligned below ---
     flex-direction:column-reverse flips the visual order without touching
     the DOM (copy stays first in source for a11y/SEO, portrait paints
     first). gap:0 is deliberate — the desktop `gap` custom value must not
     leak into the stacked mobile layout; spacing here comes only from
     .home-about__portrait's own margin-bottom. */
  .home-about{display:flex;flex-direction:column-reverse;gap:0;padding:36px 24px 40px;text-align:left}
  .home-about__portrait{margin:0 0 22px;aspect-ratio:1.35/1}
  .home-about__copy{max-width:400px;margin:0}
  .home-about__title{font-size:42px}
  .home-about__rule{width:160px;margin:8px 0 18px}
  .home-about__copy p{font-size:16px;line-height:1.3;text-align:left}
  .home-about__copy .cta-button{font-size:14px;padding:10px 18px;gap:8px}

  /* --- Closing statement --- */
  .home-closing{padding:28px 20px 38px 20px}
  .home-closing__art{width:100%;max-width:none;margin:0 auto;transform:translateX(-15%)}

  /* --- Footer --- */
  footer{padding:50px 20px calc(34px + 56px)}
  .footer-top,.footer-bottom{display:block}
  .footer-brand-wrap{justify-content:flex-start}
  .footer-logo{width:150px}
  .footer-center{margin-top:36px;text-align:left}
  .footer-socials{justify-content:flex-start}
  .footer-links{margin-top:36px;align-items:flex-start;flex-wrap:wrap}
  .footer-bottom{margin-top:50px}
  .footer-bottom span{display:block;margin-top:7px}
  .back-to-top{right:16px;bottom:80px;width:56px;height:56px}
}

/* ============================================================================
   14. MOBILE — NO HOVER STATES
   ----------------------------------------------------------------------------
   Hover is a mouse concept; on a touchscreen it either never fires or gets
   "stuck" after a tap, which reads as a glitch. Every :hover effect on the
   site is neutralized below 800px by restating its selector back to the
   resting value. The matching :focus-visible rules (keyboard navigation)
   are left untouched — those still matter on mobile with an external
   keyboard/switch device.
   ============================================================================ */
@media(max-width:800px){
  .nav a:not(.contact):hover::after{transform:scaleX(0)}
  .contact:hover{transform:none;background:var(--lm-orange);color:var(--lm-blue);border-color:var(--lm-orange)}
  .home-reel__box:hover .home-reel__play{opacity:0;transform:scale(1)}
  .project:hover .project-image{transform:none}
  .project:hover .project-overlay-shape{clip-path:inset(0 100% 0 0)}
  .project:hover .project-overlay-content{opacity:0;transform:translateY(10px)}
  .project:hover .project-overlay-content em{transform:none}
  .project-overlay-content em:hover{background:var(--lm-orange);color:var(--lm-blue);border-color:var(--lm-orange)}
  .page-cta:hover,.cta-button:hover,.cta-lg:hover{background:var(--lm-orange);color:var(--lm-blue);border-color:var(--lm-orange);transform:none}
  .footer-links a:hover::after{transform:scaleX(0)}
  .footer-social-icon:hover{transform:none;background:var(--lm-orange)}
  .footer-social-icon:hover .footer-icon-white{opacity:1}
  .footer-social-icon:hover .footer-icon-blue{opacity:0}
  .back-to-top:hover{background:var(--lm-orange);color:var(--lm-blue);border-color:var(--lm-orange)}
}