/* =============================================================
   My Drawing Gallery — Stylesheet
   Artistic, minimal, elegant. Soft neutral palette so the
   artwork stands out. Serif headings + sans-serif body.
   ============================================================= */

/* ---------- Design tokens (easy to tweak) ---------- */
:root {
    --bg:            #f6f4ef;   /* warm off-white paper tone   */
    --bg-alt:        #efece4;   /* slightly deeper neutral      */
    --ink:           #2b2926;   /* soft near-black for text     */
    --ink-soft:      #6b665e;   /* muted grey for secondary txt */
    --line:          #d9d3c7;   /* hairline borders             */
    --accent:        #8a7b64;   /* muted taupe accent           */
    --accent-dark:   #5e5344;   /* darker accent for active tab */
    --white:         #ffffff;

    --serif: "Noto Serif HK", serif;
    --sans:  "Noto Sans HK", sans-serif;

    --maxw: 1200px;
    --radius: 4px;
    --shadow: 0 8px 30px rgba(43, 41, 38, 0.10);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;          /* smooth scrolling */
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* =============================================================
   1) HERO SECTION
   ============================================================= */
.mobile-break {
	display: none;
}   
   
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;      /* vertical centering   */
    justify-content: center;  /* horizontal centering */
    text-align: center;
    /* Desktop background is a light paper texture, so text is dark
       ink here by default; the mobile media query below (which swaps
       in a photo background) switches this back to white. */
    color: var(--ink);
    padding: 2rem;
    overflow: hidden;         /* clips the oversized, translating bg layer */
}

.link {
	color: var(--primary);
	text-decoration: none;
}
.link:hover {
  color: var(--secondary);;
}

/* -------------------------------------------------------------
   Hero background layer
   -------------------------------------------------------------
   DESKTOP (default): a CSS-generated drawing-paper texture — warm
   cream tone + faint fiber/grain flecks + a subtle vignette — so
   visitors land on an actual blank "page" they can draw on with
   their mouse (see .hero__canvas + main.js).

   MOBILE: swapped via media query below to a static feature photo,
   since there's no mouse to draw with on touch devices.

   Kept as its own absolutely-positioned element (taller than the
   viewport) so JS can translateY() it as the page scrolls, moving
   it slower than the scroll itself for the parallax effect.
   ------------------------------------------------------------- */
.hero__bg {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;             /* extra height so parallax never reveals an edge */
    will-change: transform;

    /* Paper base tone (fallback while the photo loads) */
    background-color: #efe9db;
    /* Real paper texture photo, scaled to fully cover the hero (no tiling/
       repeat) so it reads as a single continuous sheet of paper. */
    background-image: url('../images/paper-texture.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* Modest contrast/warmth boost so the grain still reads clearly even
       though the photo is naturally soft/low-contrast on its own. */
    filter: brightness(0.94) contrast(1.5) sepia(0.12);
}

/* Subtle dark overlay keeps white text readable (kept light on
   desktop so the paper texture still reads clearly; darker on the
   mobile photo fallback — see media query below) */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(60,54,44,0.06) 0%, rgba(40,36,30,0.16) 100%);
}

/* -------------------------------------------------------------
   Drawing canvas — the actual sketchable surface (desktop only).
   Positioned above the paper texture, below the text/overlay
   content so scribbles never obscure the title/subtitle.
   ------------------------------------------------------------- */
.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    cursor: crosshair;
}

.hero__content {
    position: relative;   /* sits above the overlay */
    z-index: 1;
    max-width: 950px;
}

/* Title, subtitle and arrow each fade in on their own, staggered in time */
.hero__title {
	font-family: var(--serif);
    font-size: 3.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    letter-spacing: 2px;
    opacity: 0;
    animation: fadeUp 1s ease 0.5s both;
	color: var(--ink);
}

.hero__subtitle {
	font-family: var(--serif);
    font-size: clamp(1.5rem, 2.5vw, 1.5rem);
    font-weight: 400;
    margin-bottom: 0;
    color: var(--ink);
    opacity: 0;
    animation: fadeUp 1s ease 1s both;
}

/* Once the visitor clicks to draw, JS adds this to the hero content
   wrapper: title and subtitle slowly, gently dissolve away and never
   return, leaving the paper uncluttered for drawing. A long, slow
   keyframe animation (not a quick transition) gives it a lingering,
   ink-fading-into-paper feel rather than an abrupt disappearance. */
.hero__content.is-drawing-started .hero__title,
.hero__content.is-drawing-started .hero__subtitle {
    pointer-events: none;   /* let clicks pass through to the canvas beneath */
}
.hero__content.is-drawing-started .hero__title {
    animation: slowFadeOut 0.5s ease-in both;
}
.hero__content.is-drawing-started .hero__subtitle {
    /* "both" (not "forwards") so during the 0.3s delay it holds the
       animation's own 0% state (opacity: 1) instead of briefly falling
       back to the base rule's "opacity: 0" — that mismatch was causing
       a disappear/reappear flicker right before the fade-out started. */
    animation: slowFadeOut 0.5s ease-in 0.3s both;
}
@keyframes slowFadeOut {
    0%   { opacity: 1;    transform: translateY(0)    scale(1); }
    100% { opacity: 0;    transform: translateY(-18px) scale(1); }
}

/* Used only when a saved drawing is restored on page load: hides the
   title/subtitle instantly (no 3.5s animation replay) since the paper
   is already known to have a drawing on it before the page even paints. */
.hero__content.is-preloaded .hero__title,
.hero__content.is-preloaded .hero__subtitle {
    animation: none;
    opacity: 0;
    pointer-events: none;
}

/* Reset button brings the title/subtitle back with a gentle fade-in
   (mirrors the fade-out, just quicker) instead of snapping back instantly. */
.hero__content.is-restoring .hero__title {
    animation: restoreFadeIn 1s ease both;
}
.hero__content.is-restoring .hero__subtitle {
    animation: restoreFadeIn 1s ease 0.15s both;
}
@keyframes restoreFadeIn {
    0%   { opacity: 0; transform: translateY(-18px) scale(1); }
    100% { opacity: 1; transform: translateY(0)      scale(1); }
}

/* -------------------------------------------------------------
   Cursor-following "click & drag to draw" hint
   -------------------------------------------------------------
   Instead of a static label, this small tag follows the mouse
   pointer around the hero (desktop only) so it reads like a
   tooltip attached to the "pencil". JS updates its position on
   every mousemove and permanently hides it the first time the
   visitor clicks (i.e. starts drawing) — it never reappears after.
   ------------------------------------------------------------- */
.hero__cursor-hint {
    position: absolute;
    top: -45px;
    left: -15px;
    z-index: 2;                 /* above the canvas, below nothing important */
    transform: translate(18px, 14px);   /* small offset from the actual cursor tip */
    pointer-events: none;       /* never intercepts clicks meant for the canvas */
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0);
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(43, 41, 38, 0);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.hero__cursor-hint.is-visible {
    opacity: 1;
}

/* -------------------------------------------------------------
   Save / Reset controls for the hero drawing
   -------------------------------------------------------------
   Bottom-right of the hero, desktop only. Hidden until the visitor
   draws something (JS adds ".is-visible"), so they don't clutter a
   blank page. Save persists the current strokes to localStorage;
   Reset clears the drawing + storage and restores the title/subtitle.
   ------------------------------------------------------------- */
.hero__draw-actions {
    position: absolute;
    right: 1.75rem;
    bottom: 1.75rem;
    z-index: 2;
    display: flex;
    gap: 0.6rem;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero__draw-actions.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero__draw-btn {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(43, 41, 38, 0.18);
    padding: 0.4rem 0.6rem;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(43, 41, 38, 0.1);
    transition: background 0.25s ease, transform 0.2s ease, color 0.25s ease;
}
.hero__draw-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}
.hero__draw-btn--save.is-saved,
.hero__draw-btn--download.is-saved {
    background: var(--accent-dark);
    color: var(--white);
    border-color: var(--accent-dark);
}

/* Little scroll indicator, pinned to the bottom of the viewport
   (independent of the centered title/subtitle above it) */
.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 3.5rem;
    transform: translateX(-50%);
    z-index: 1;
    display: inline-block;
    opacity: 0;
    animation: fadeIn 1s ease 1.6s both;
}
.hero__scroll-arrow {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    border-right: 2px solid rgba(43, 41, 38, 0.55);
    border-bottom: 2px solid rgba(43, 41, 38, 0.55);
    transform: rotate(45deg);
    animation: bounce 2s infinite 3.6s;
}

@keyframes bounce {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50%      { transform: rotate(45deg) translate(6px, 6px); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =============================================================
   2) INTRODUCTION SECTION
   ============================================================= */
.intro {
    max-width: 950px;          /* comfortable reading width */
    margin: 0 auto;
    padding: 6rem 1.5rem 4rem;
    text-align: center;
}
.intro__heading {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    font-family: var(--serif);
    color: var(--ink);
    margin-bottom: 2.5rem;
    line-height: 1.3;
	display: flex;
	justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
}
.intro_img{
	display: block;
  margin-left: auto;
  margin-right: auto;
	width: 200px;
	
}
/* Pencil-drawn divider — a hand-sketched little line under the heading.
   Sits at 0 width/opacity until JS adds ".is-drawn" (triggered by
   IntersectionObserver when the section scrolls into view), then it
   "draws" itself from left to right like a pencil stroke. */
.intro__divider {
    position: relative;
    display: block;
    width: 64px;
    height: 10px;
    margin: 1.2rem auto 0;
}
.intro__divider::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    width: 100%;
    height: 0px;
    background: var(--accent);
    border-radius: 2px;
    /* slight waver so it reads as hand-drawn rather than a ruled line */
    clip-path: polygon(
        0% 40%, 8% 0%, 16% 70%, 24% 20%, 32% 100%, 40% 10%, 48% 60%,
        56% 0%, 64% 80%, 72% 30%, 80% 100%, 88% 20%, 96% 70%, 100% 40%,
        100% 100%, 0% 100%
    );
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.2, 1);
}
.intro__divider.is-drawn::before {
    transform: scaleX(1);
}

.intro__text {
	font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 2;
    color: var(--dark);
    margin-bottom: 2rem;
    text-align: justify;
    color: var(--ink);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.8, 0.2, 1);
}
.intro__text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================
   3) GALLERY TABS / DIRECTORY BUTTONS
   ============================================================= */
.gallery {
    /* Full screen width, but keep a comfortable margin on both sides */
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 2rem clamp(1.5rem, 5vw, 5rem) 5rem;
}
.gallery__heading {
	font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    font-family: var(--serif);
    color: var(--ink);
    margin-bottom: 2.5rem;
    line-height: 1.3;

}

.gallery__tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.tab-btn {
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    padding: 0.7rem 1.6rem;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.35s ease;
}
.tab-btn:hover {
    color: var(--ink);
    border-color: var(--accent);
}
/* Active/current directory button — distinct style */
.tab-btn.is-active {
    color: var(--white);
    background: var(--secondary);
    border-color: var(--secondary);
    box-shadow: 0 6px 18px rgba(94, 83, 68, 0.18);
}

/* =============================================================
   4) MASONRY GALLERY GRID (JS-controlled columns - Pinterest style)
      -------------------------------------------------------------
      Rendered as N ".masonry__col" flex columns - JS decides how many
      and which item goes in which column, using a shortest-column-
      first packing so the reading order flows left-to-right, top-to-
      bottom regardless of image count or how uneven their heights
      are (plain CSS column-count can't guarantee that ordering
      once heights vary, which is what this replaces).
      Adapts 1 -> 2 -> 3 -> 4 columns responsively (see getColumnCount()
      in main.js - the breakpoints below must stay in sync with it).
      Images keep natural aspect ratio (no cropping).
   ============================================================= */
.masonry {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
    /* Smooth transition when switching galleries */
    transition: opacity 0.4s ease;
    opacity: 1;
}
.masonry.is-fading {
    opacity: 0;   /* JS toggles this briefly during a category switch */
}

.masonry__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.masonry__item {
    margin-bottom: 1.75rem;
    text-align: center;

    /* -----------------------------------------------------------
       Staggered, blur-to-sharp entrance ("charcoal smudge" reveal).
       Items start hidden/blurred; JS adds ".is-revealed" (via
       IntersectionObserver) which triggers the fade + rise here,
       while the image itself sharpens from a blur (see .masonry__img).
       "--reveal-delay" is set per-item by JS so items settle in one
       by one rather than all at once — on scroll AND on tab switch.
       ----------------------------------------------------------- */
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.85s ease var(--reveal-delay, 0ms),
                transform 0.85s cubic-bezier(0.22, 0.8, 0.2, 1) var(--reveal-delay, 0ms);
}
.masonry__item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.masonry__figure {
    margin: 0;
    overflow: hidden;            /* clips the zoom on hover */
    border-radius: var(--radius);
    background: var(--bg-alt);
    box-shadow: var(--shadow);
}

.masonry__img {
    width: 100%;
    height: auto;                /* natural aspect ratio */
    display: block;
    background: var(--bg-alt);
    /* Like graphite settling into focus: heavily blurred at first,
       clears once the item's ".is-revealed" class lands (same
       staggered delay as the item itself, so image + fade stay in sync).
       The hover-zoom transform keeps its own separate, delay-free timing. */
    filter: blur(18px);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0s,
                filter 1s ease var(--reveal-delay, 0ms);
}
.masonry__item.is-revealed .masonry__img {
    filter: blur(0);
}
/* Subtle zoom on hover — scoped to ".is-clickable" (added by JS only for
   desktop-with-mouse and touch tablets, never phones) so it never fires.
   Without this scoping, tapping on a PHONE would still trigger CSS
   :hover (mobile browsers apply :hover on tap, and it can "stick" until
   the user taps elsewhere) even though no click listener is attached —
   making the gallery visually look clickable when it isn't supposed to be. */
.masonry__item.is-clickable .masonry__figure:hover .masonry__img {
    transform: scale(1.06);
}

/* Enlarge cursor only where the lightbox is enabled (desktop/tablet) */
.masonry__item.is-clickable .masonry__figure { cursor: zoom-in; }

/* Remove the native tap-highlight flash on touch browsers (mobile Safari/
   Chrome briefly shade a tapped element by default) — the JS-driven
   .is-clickable state is the only thing that should ever visually react. */
.masonry__item { -webkit-tap-highlight-color: transparent; }

.masonry__title {
    display: inline-block;       /* so the highlight hugs the text width */
    position: relative;
    margin-top: 0.6rem;
    padding: 0 0.15em;            /* a little breathing room for the marker swipe */
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    color: var(--ink-soft);
    font-weight: 400;
    transition: color 0.3s ease;
}

/* Marker/highlighter-pen effect behind the title text: a soft, warm
   swipe of color grows in from left to right on hover, like someone
   dragging a highlighter across the caption — sits *behind* the text
   (negative z-index) so the letters stay readable on top of it. */
.masonry__title::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -2%;
    right: -2%;
    bottom: 0.05em;
    height: 0.62em;               /* highlighter-band thickness, not a full box */
    background: var(--secondary);   /* warm marker tone */
    /* Slightly irregular edges so it reads as a hand-drawn marker
       stroke rather than a perfect rectangle */
    clip-path: polygon(
        0% 20%, 6% 0%, 94% 8%, 100% 0%,
        100% 85%, 93% 100%, 5% 92%, 0% 100%
    );
    transform: scaleX(0) rotate(-0.6deg);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.2, 1);
}
/* Trigger the marker highlight when hovering anywhere on the item
   (image or title), not just the caption text itself — scoped to
   ".is-clickable" for the same reason as the image zoom above: without
   it, tapping on a phone (where CSS :hover can trigger/stick on tap)
   would still show the highlight even though the gallery isn't clickable
   there, making it look interactive when it shouldn't be. */
.masonry__item.is-clickable:hover .masonry__title::before {
    transform: scaleX(1) rotate(-0.6deg);
}
.masonry__item.is-clickable:hover .masonry__title {
    color: var(--ink);   /* text darkens slightly as the highlight lands */
}

/* Responsive column counts are handled entirely by JS (see
   getColumnCount() in main.js, which renders 1/2/3/4 ".masonry__col"
   flex columns matching these same breakpoints) — nothing to do here
   for column count itself. Just stack full-width on narrow screens
   since flex columns don't wrap automatically like CSS columns did. */
@media (max-width: 640px) {
    .masonry { flex-direction: column; }
}

/* =============================================================
   5) LIGHTBOX / ENLARGE MODAL
   ============================================================= */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(18, 16, 14, 0.92);   /* dark backdrop */
    opacity: 0;
    animation: lbFade 0.3s ease forwards;
}
.lightbox[hidden] { display: none; }

@keyframes lbFade { to { opacity: 1; } }

.lightbox__figure {
    max-width: 90vw;
    max-height: 95vh;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    object-fit: contain;
}

/* Directional slide + fade animation when navigating next / previous. */
.lightbox__img.is-anim-next {
    animation: slideInNext 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.lightbox__img.is-anim-prev {
    animation: slideInPrev 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes slideInNext {
    from { opacity: 0; filter: blur(16px); transform: translateX(40px) scale(0.98); }
    to   { opacity: 1; filter: blur(0);    transform: translateX(0) scale(1); }
}
@keyframes slideInPrev {
    from { opacity: 0; filter: blur(16px); transform: translateX(-40px) scale(0.98); }
    to   { opacity: 1; filter: blur(0);    transform: translateX(0) scale(1); }
}

/* Blur-to-sharp fade IN when the lightbox first opens (like the
   drawing coming into focus), and a soft blurred fade OUT when
   closing. JS toggles ".is-anim-open" / ".is-anim-closing". */
.lightbox__img.is-anim-open {
    animation: lbImgFadeIn 0.5s ease both;
}
.lightbox__img.is-anim-closing {
    animation: lbImgFadeOut 0.32s ease both;
}
@keyframes lbImgFadeIn {
    from { opacity: 0; filter: blur(20px); transform: scale(0.97); }
    to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}
@keyframes lbImgFadeOut {
    from { opacity: 1; filter: blur(0);    transform: scale(1); }
    to   { opacity: 0; filter: blur(20px); transform: scale(0.97); }
}

.lightbox__caption {
    margin-top: .5rem;
    color: #eae6dd;
    font-family: var(--sans);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: opacity 0.3s ease;
}

/* -------------------------------------------------------------
   Progress dots — minimal position indicator (● ○ ○ ○) under the
   image/caption, showing where the current drawing sits within
   its category and animating smoothly as you navigate.
   ------------------------------------------------------------- */
.lightbox__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 1.1rem;
}

.lightbox__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.8, 0.2, 1);
}
.lightbox__dot:hover {
    background: rgba(255, 255, 255, 0.6) ;
	transform: scale(2);
}
/* Active dot: filled, slightly larger — the "●" among "○ ○ ○" */
.lightbox__dot.is-active {
    background: #eae6dd;
    transform: scale(2);
}

/* Controls */
.lightbox__close,
.lightbox__nav {
    position: absolute;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
    line-height: 1;
    user-select: none;
}
.lightbox__close:hover,
.lightbox__nav:hover {
    transform: scale(1.08);
}

.lightbox__close {
    top: 1.25rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.8rem;
}
.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.08); }
.lightbox__prev { left: 1.5rem; }
.lightbox__next { right: 1.5rem; }



/* =============================================================
   RESPONSIVE / MOBILE TWEAKS
   ============================================================= */
@media (max-width: 768px) {
    .intro { padding: 4rem 1.25rem 2.5rem; }
    .lightbox__close { top: 0.75rem; right: 0.75rem; }
    .lightbox__nav { width: 44px; height: 44px; font-size: 1.5rem; }
	.intro_img{ width: 150px; }
	.mobile-break {
		display: block; /* or display: inline; */
	}
}

/* -------------------------------------------------------------
   Mobile hero fallback
   -------------------------------------------------------------
   No mouse on touch devices, so there's nothing to "draw" with —
   swap the blank paper texture for a static feature photo instead,
   and hide the canvas + the "draw here" hint entirely. Matches the
   same touch/width detection used by the lightbox JS logic.
   ------------------------------------------------------------- */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .hero__bg {
        background-color: transparent;
        background-image: url('../images/mobile.jpg');
        background-size: cover;
        background-position: center;
    }
    .hero__overlay {
        background: linear-gradient(180deg, rgba(235,234,230,0.55) 0%, rgba(235,234,230,0.55) 100%); 
    }
    .hero__canvas,
    .hero__cursor-hint {
        display: none;   /* nothing to draw with on touch devices */
    }
    .hero {
        color: var(--white);
    }
    
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}