/* FK Grotesk Neue — self-hosted .woff2 under /fonts. Weight range is
   left wide so any weight the file supports resolves to this face. */
@font-face {
    font-family: 'FK Grotesk Neue';
    src: url('fonts/FKGroteskNeue.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ─────── Language toggle (中 / EN) ─────── */

.top-nav a.lang-toggle {
    width: auto !important;
    /* Flex centering ensures the glyph sits in the middle of the pill
       regardless of font-metric baseline quirks (CJK characters tend
       to float toward the top of the line box otherwise). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--red);
    font-family: 'Freckle Face', 'Noto Sans SC', cursive;
    font-size: calc(var(--nav-size) * 0.8);
    line-height: 1;
    align-self: center;
    opacity: 0.85;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.top-nav a.lang-toggle:hover {
    opacity: 1;
    background: rgba(122, 8, 8, 0.06);
}

/* Extra left margin only on desktop so the toggle doesn't visually
   crowd the last nav item whose fixed 132px box adds less padding
   than the 142px boxes. Not needed at auto-width mobile sizes. */
@media (min-width: 901px) {
    .top-nav a.lang-toggle {
        margin-left: 12px;
    }
}

/* ─────── Chinese page ─────── */
/* Two CJK fonts are in play:
     - Ma Shan Zheng  — brush-style display, only for BIG headings
     - Noto Sans SC   — clean sans, for nav + tagline + every body text
   Ma Shan Zheng becomes unreadable below ~20px, which is why small
   elements get the sans variant. The hero title (.title) is NOT
   overridden so "RED SIX NOW" stays in Freckle Face as on the EN
   site. */

:root:lang(zh-CN) {
    /* Chinese characters are shorter than English words. Slightly
       larger nav font size (30 vs 25) with ~50px gaps between
       auto-sized nav items on ZH (vs ~0 on EN). */
    --nav-x: 40px;
    --nav-gap: 50px;
    --nav-size: 30px;
    --nav-y: 31px;
}

/* ZH mobile/tablet overrides — :lang beats plain @media :root, so scale
   the ZH nav down inside each breakpoint. */
@media (max-width: 900px) {
    :root:lang(zh-CN) {
        --nav-size: 24px;
        --nav-gap: 28px;
        --nav-x: 28px;
        --nav-y: 26px;
    }
}
@media (max-width: 560px) {
    :root:lang(zh-CN) {
        --nav-size: 20px;
        --nav-gap: 16px;
        --nav-x: 18px;
        --nav-y: 22px;
    }
}
@media (max-width: 380px) {
    :root:lang(zh-CN) {
        --nav-size: 18px;
        --nav-gap: 12px;
    }
}

/* Display — Ma Shan Zheng (brush). Covers headings plus the short
   labels (nav, tagline, prices) that the user wants in the brand
   brush style. Ma Shan Zheng ships with matching Latin glyphs so
   the SGD prices also render in the brush font on ZH. */
:lang(zh-CN) .tagline,
:lang(zh-CN) .top-nav a,
:lang(zh-CN) .page-title,
:lang(zh-CN) .service-name,
:lang(zh-CN) .service-price,
:lang(zh-CN) .booking-notes h3,
:lang(zh-CN) .contact-card h3 {
    font-family: 'Ma Shan Zheng', 'Freckle Face', cursive;
}

/* Language toggle keeps Freckle Face on both pages so the "EN" label
   on ZH renders in the brand Latin font, not the Chinese brush font. */
:lang(zh-CN) .top-nav a.lang-toggle {
    font-family: 'Freckle Face', cursive;
}

/* Desktop ZH: negative left margin cancels the pill's internal left
   padding so the text-to-text gap matches the 50px word-to-word
   rhythm. Only needed where the desktop margin-left:12 is active. */
@media (min-width: 901px) {
    :lang(zh-CN) .top-nav a.lang-toggle {
        margin-left: -11px;
    }
}

/* Long / small body copy — Noto Sans SC for legibility */
:lang(zh-CN) .service-desc,
:lang(zh-CN) .service-note,
:lang(zh-CN) .booking-notes ul,
:lang(zh-CN) .contact-intro,
:lang(zh-CN) .contact-hint {
    font-family: 'Noto Sans SC', 'FK Grotesk Neue', 'Inter', system-ui, sans-serif;
    font-weight: 500;
}

/* Let nav items size to their (shorter) Chinese content instead of the
   fixed 142/132 widths used on the EN site. */
:lang(zh-CN) .top-nav a {
    width: auto !important;
}

/* ─────── Scroll-triggered reveal animation ─────── */
/* Elements tagged .animate-in start invisible and slightly below their
   final position. When the IntersectionObserver (in index.html) adds
   .is-visible, they fade up over 600ms with an easeOut curve. Wrapped
   in prefers-reduced-motion: no-preference so users who opt out of
   motion see everything immediately. */
@media (prefers-reduced-motion: no-preference) {
    .animate-in {
        opacity: 0;
        /* translate3d pushes the element onto the GPU for the duration
           of the animation without needing a permanent will-change layer. */
        transform: translate3d(0, 20px, 0);
        transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
                    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .animate-in.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ─────── Scroll sections (single-page layout) ─────── */

.scroll-section {
    /* Single-sided top padding so the visual gap between adjacent
       sections stays consistent (otherwise two adjacent sections stack
       their top+bottom padding and double the gap). Last section gets
       matching bottom padding so the page doesn't end abruptly. */
    padding: clamp(100px, 10vw, 160px) clamp(24px, 4vw, 80px) 0;
    /* Anchor clicks account for the fixed logo/nav chrome so the
       section title doesn't hide beneath it on jump. */
    scroll-margin-top: clamp(90px, 8vw, 150px);
    position: relative;
    z-index: 1;
}

.scroll-section:last-child {
    padding-bottom: clamp(100px, 10vw, 160px);
}

.page-title {
    font-family: 'Freckle Face', cursive;
    font-weight: 400;
    font-size: clamp(56px, 6vw, 110px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--red);
    text-align: center;
    margin: 0 0 clamp(32px, 4vw, 60px);
}

/* ─────── Portfolio ─────── */

.portfolio-grid {
    display: grid;
    /* 5 fixed columns at desktop (up to 20 photos -> 4 rows of 5).
       Step down at tablet/mobile breakpoints. */
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(12px, 1.5vw, 24px);
    max-width: 1600px;
    margin: 0 auto;
}

@media (max-width: 1280px) {
    .portfolio-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 980px) {
    .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
    /* 2 columns on mobile so tiles are ~half-width and users see
       multiple photos at once instead of one giant tile per viewport. */
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Cap the portfolio at 10 photos on mobile (<=560px) so the page
   stays manageable. The extra 10 tiles (11-20) only show on larger
   viewports. */
@media (max-width: 560px) {
    .portfolio-tile:nth-child(n + 11) {
        display: none;
    }
}

.portfolio-tile {
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: rgba(122, 8, 8, 0.06);
    position: relative;
    /* Contain layout + paint so each tile's repaints don't invalidate
       the surrounding grid. Big scroll-performance win on mobile. */
    contain: layout paint;
}

.portfolio-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.portfolio-tile:hover img {
    transform: scale(1.04);
}

/* ─────── Services ─────── */

.services-list {
    max-width: 860px;
    margin: 0 auto;
}

.service-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(122, 8, 8, 0.25);
}

.service-info {
    flex: 1;
    min-width: 0;
}

.service-name {
    font-family: 'Freckle Face', cursive;
    font-weight: 400;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--red);
    margin: 0 0 8px;
}

.service-desc {
    margin: 0;
    font-family: 'FK Grotesk Neue', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.5;
    color: var(--red);
    opacity: 0.85;
}

.service-note {
    margin: 6px 0 0;
    font-family: 'FK Grotesk Neue', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 0.95vw, 14px);
    font-style: italic;
    color: var(--red);
    opacity: 0.6;
}

.service-price {
    font-family: 'Freckle Face', cursive;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--red);
    white-space: nowrap;
    flex-shrink: 0;
}

.booking-notes {
    max-width: 860px;
    margin: clamp(40px, 5vw, 72px) auto 0;
    font-family: 'FK Grotesk Neue', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
}

.booking-notes h3 {
    font-family: 'Freckle Face', cursive;
    font-weight: 400;
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -0.02em;
    color: var(--red);
    margin: 0 0 16px;
}

.booking-notes ul {
    padding-left: 20px;
    margin: 0;
    line-height: 1.65;
    font-size: clamp(14px, 1.1vw, 16px);
    color: var(--red);
}

.booking-notes li {
    margin-bottom: 8px;
}

.booking-notes li:last-child {
    margin-bottom: 0;
}

/* ─────── Contact ─────── */

.contact-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contact-intro {
    font-family: 'Freckle Face', cursive;
    font-size: clamp(20px, 1.8vw, 28px);
    color: var(--red);
    margin: 0 0 clamp(32px, 4vw, 60px);
    opacity: 0.85;
    letter-spacing: -0.01em;
}

.contact-cards {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 36px);
    width: 100%;
    max-width: 460px;
}

.contact-card {
    border: 2px solid var(--red);
    /* Figma card height is 150 fixed. Drop vertical padding to 24 and
       give the card a fixed min-height so it lines up. */
    padding: 24px clamp(24px, 3vw, 36px);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(122, 8, 8, 0.02);
    transition: background 0.2s ease;
}

.contact-card:hover {
    background: rgba(122, 8, 8, 0.06);
}

.contact-card h3 {
    font-family: 'Freckle Face', cursive;
    font-weight: 400;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.02em;
    color: var(--red);
    margin: 0 0 14px;
}

.contact-value {
    font-family: 'FK Grotesk Neue', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 1.4vw, 20px);
    color: var(--red);
    margin: 0 0 6px;
    user-select: all;
    word-break: break-word;
}

.contact-value a {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.contact-hint {
    font-family: 'FK Grotesk Neue', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1vw, 14px);
    color: var(--red);
    opacity: 0.6;
    margin: 0;
}

/* ─────── Small-screen tweaks ─────── */

@media (max-width: 560px) {
    .service-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .service-price {
        align-self: flex-end;
    }
}