/* Generated by build.js from css/main.css — edit the files it imports. */

/* ── base.css ── */
/* ── Design tokens ──
   Breakpoint is 768px everywhere. CSS variables can't be used in media
   queries, so that number is repeated in each file's `@media` block. */
:root {
    --color-bg: #F5F6F1;
    --color-text: #111;
    --color-on-dark: #F5F6F1;

    --font-sans: 'Onest', sans-serif;

    --nav-h: 70px;

    /* Horizontal page gutter, narrowed on mobile. */
    --page-x: 60px;
}

@media (max-width: 768px) {
    :root {
        --nav-h: 40px;
        --page-x: 20px;
    }
}

/* Everything still works without motion: the accordion opens instantly, the
   toggle underline appears rather than wiping in, anchors jump. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* ── Reset ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-h);
    background-color: var(--color-bg);
}

body {
    padding-top: var(--nav-h);
    font-family: var(--font-sans);
    color: var(--color-text);
}

/* build.js writes each image's intrinsic width and height into the markup so
   the browser can reserve its space up front. `height: auto` is what lets the
   image still scale to its container instead of being stretched to that
   height — the two belong together. Rules that set an explicit height (the
   product hero, the objects grid) are more specific and still win. */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ── Shared primitives ── */

/* Every interactive element on the site dims on hover. */
a,
.btn-reset {
    color: inherit;
}

a:hover,
.btn-reset:hover {
    opacity: 0.5;
}

/* Keyboard users get the same dimming plus a visible ring. `:focus-visible`
   keeps the ring off mouse clicks. */
a:focus-visible,
.btn-reset:focus-visible {
    opacity: 0.5;
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
}

/* Strips the browser's default button chrome so buttons can be styled as text. */
.btn-reset {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* Sections are auto-height by default; opt in to a full viewport screen. */
.section-full {
    height: calc(100vh - var(--nav-h));
}

section {
    display: flex;
}

/* Available to screen readers and crawlers, invisible on screen. Used for the
   page headings the design expresses with the logo or a graphic instead. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Small caps-style heading above a section's content ("Objects", "Projects"). */
.section-label {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Underlined inline link used for "See project" / "Read more" calls to action. */
.text-link {
    font-size: 24px;
    font-weight: 400;
    line-height: 130%;
    text-decoration: underline;
    padding-bottom: 10px;
}

@media (max-width: 768px) {
    section {
        padding: 40px var(--page-x) 0;
    }

    .section-full {
        height: auto;
    }

    .text-link {
        font-size: 15px;
    }
}

/* ── reveal.css ── */
/* Scroll reveal: sections start slightly faded and shifted down and ease into
   place as they enter the viewport. `js/components/reveal.js` puts the
   `reveal-ready` class on <html> before the first paint and adds `is-visible`
   as each section comes into view.

   Everything below is scoped to `.reveal-ready`, so without JavaScript — or if
   the module fails to load — the page renders exactly as it did before, fully
   visible. The reduced-motion block in base.css collapses the transition, so
   sections then simply appear. */

.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 1.5s ease,
        transform 1.5s ease;
}

.reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ── nav.css ── */
/* ── Desktop nav ── */
.nav-desktop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    background-color: var(--color-bg);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 70px;
}

/* Shared by the desktop list and the mobile overlay. */
.nav-links a,
.mobile-menu a {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 400;
}

/* The section currently scrolled into view. */
.nav-links a.active,
.mobile-menu a.active {
    font-weight: 800;
}

.nav-links a {
    font-size: 24px;
    letter-spacing: 0.03em;
}

/* ── Mobile nav bar ── */
.nav-mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 100;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
}

.nav-mobile-logo {
    width: 60px;
    height: auto;
}

.hamburger {
    position: absolute;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
}

/* ── Mobile menu overlay ── */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 60px;
    background-color: var(--color-bg);
}

.mobile-menu.open {
    display: flex;
}

/* Set on <body> while the overlay is open so the page behind it can't scroll. */
.menu-open {
    overflow: hidden;
}

.mobile-menu a {
    display: block;
    width: 100%;
    font-size: 20px;
    letter-spacing: 0.02em;
    padding: 25px 16px;
    border-bottom: 1px solid #000;
}

.mobile-menu a:first-of-type {
    border-top: 1px solid #000;
}

.mobile-close {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 22px;
    line-height: 1;
}

@media (max-width: 768px) {
    .nav-desktop {
        display: none;
    }

    .nav-mobile {
        display: flex;
    }
}

/* ── contact.css ── */
/* Contact / footer.
   One markup, two arrangements. Desktop uses the nesting as written:
   a three-column top row, a centred social row, then the bottom row.
   Mobile flattens that nesting with `display: contents` and re-places the
   leaf blocks on a two-column grid — see the media query at the bottom. */

#contact {
    flex-direction: column;
    padding: 0;
}

/* ── Shared text styles ── */
.contact-heading {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.contact-body {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    max-width: 400px;
}

.contact-detail {
    font-size: 14px;
    letter-spacing: 0.01em;
}

.contact-support,
.contact-copyright {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* ── Desktop: top row (logo + link columns + contact details) ──
   The two grouping wrappers are dropped so the four blocks sit directly on
   the grid: the logo and the intro share row 1, the link columns and the
   details list share row 2. That is what keeps the details list starting on
   the same line as the link columns, whatever height the intro text ends up
   being. Row 1's height comes from the logo's bottom margin. */
.contact-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 0;
    padding: 60px var(--page-x) 0;
}

.contact-brand,
.contact-details {
    display: contents;
}

.contact-logo {
    grid-area: 1 / 1;
    margin-bottom: 200px;
}

.contact-logo svg {
    width: 204px;
    height: auto;
}

.contact-link-columns {
    grid-area: 2 / 1;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.contact-link-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-link-column a {
    font-size: 13px;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.contact-intro {
    grid-area: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 40px;
}

.contact-detail-list {
    grid-area: 2 / 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 40px;
}

/* ── Desktop: social row ── */
.contact-social {
    display: flex;
    justify-content: center;
    gap: 48px;
    padding: 40px var(--page-x);
    margin-top: 60px;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.contact-social a {
    text-decoration: none;
}

/* ── Desktop: bottom row (copyright left, support centred) ── */
.contact-bottom {
    display: flex;
    align-items: flex-start;
    padding: 24px var(--page-x) 40px;
    position: relative;
}

.contact-bottom .contact-copyright {
    flex: 0 0 33.333%;
}

.contact-bottom .contact-support {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 33.333%;
    text-align: center;
}

@media (max-width: 768px) {
    /* The wrappers stop generating boxes, so every leaf block below becomes a
       direct child of this grid and can be placed independently of how the
       desktop layout groups it. */
    .contact-top,
    .contact-brand,
    .contact-link-columns,
    .contact-details,
    .contact-intro,
    .contact-bottom {
        display: contents;
    }

    /* The desktop row/column placements don't apply to this grid. */
    .contact-detail-list,
    .contact-social,
    .contact-nav,
    .contact-legal,
    .contact-heading,
    .contact-text {
        grid-area: auto;
    }

    #contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20vw;
        row-gap: 20px;
        padding: 40px var(--page-x) 50px;
        scroll-margin-top: var(--nav-h);
    }

    /* Reading order: heading, intro, then details beside the social links,
       then the two link lists, then the small print. */
    .contact-heading {
        order: 1;
        grid-column: 1 / -1;
    }

    .contact-text {
        order: 2;
        grid-column: 1 / -1;
    }

    .contact-detail-list {
        order: 3;
    }

    .contact-social {
        order: 4;
    }

    .contact-nav {
        order: 5;
    }

    .contact-legal {
        order: 6;
    }

    .contact-support {
        order: 7;
    }

    .contact-copyright {
        order: 8;
    }

    /* The footer logo is desktop-only. */
    .contact-logo {
        display: none;
    }

    .contact-body {
        font-size: 15px;
        max-width: 100%;
    }

    /* Reads as a separate paragraph here, as one wrapped block on desktop. */
    .contact-location {
        margin-top: 1.5em;
    }

    .contact-detail-list,
    .contact-social {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0 0 40px;
        margin: 0;
        font-size: 15px;
    }

    .contact-detail-list p,
    .contact-social a {
        font-size: 15px;
        line-height: 1.5;
    }

    .contact-nav,
    .contact-legal {
        grid-column: 1 / -1;
        gap: 15px;
    }

    .contact-legal {
        align-items: flex-end;
    }

    .contact-nav a,
    .contact-legal a {
        font-size: 15px;
    }

    /* Undo the desktop bottom row: both lines are plain full-width blocks. */
    .contact-bottom .contact-copyright,
    .contact-bottom .contact-support {
        position: static;
        transform: none;
        width: auto;
        flex: none;
        text-align: left;
        grid-column: 1 / -1;
    }
}

/* ── objects.css ── */
/* Objects grid — used for the "Objects" section on the home page and for
   "Product variants" on product pages. Each item cross-fades between a
   line drawing and a photo, toggled by the buttons in the header. */

.objects-section {
    flex-direction: column;
    padding: 0 var(--page-x) 80px;
}

.objects-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 60px;
}

/* ── Drawing / Photo toggle ── */
.view-toggle {
    display: flex;
    gap: 5ch;
}

.view-btn {
    position: relative;
    font-size: 24px;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/* Underline that wipes in when the button becomes active. */
.view-btn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.view-btn.active {
    font-weight: 600;
}

.view-btn.active::after {
    transform: scaleX(1);
}

/* ── Grid ── */
.objects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 180px;
    width: 100%;
    padding: 0 30px;
}

.object-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0 20px;
    text-decoration: none;
}

.object-caption {
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 32px;
    text-align: center;
}

/* Drawing and photo are stacked; only opacity changes between views. */
.object-image {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
}

/* `contain` fits the whole image inside the box. The images are taller than
   the 2/3 box is, so `cover` would crop their sides. */
.object-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.4s ease;
}

.object-photo {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 400px;
    opacity: 0;
}

.objects-grid.show-photo .object-drawing {
    opacity: 0;
}

.objects-grid.show-photo .object-photo {
    opacity: 1;
}

@media (max-width: 768px) {
    .objects-section {
        padding: 40px var(--page-x) 0;
    }

    .objects-header {
        margin-bottom: 32px;
    }

    .view-btn {
        font-size: 18px;
    }

    .objects-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0;
    }

    .object-item {
        padding: 0 0 40px;
    }

    /* Images break out of the page gutter and are centred at natural size. */
    .object-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
        margin: 0 calc(-1 * var(--page-x));
        aspect-ratio: unset;
        height: auto;
        overflow: visible;
    }

    .object-image img {
        max-width: 50vw;
        width: auto;
        height: auto;
    }

    .object-photo {
        left: 50%;
        transform: translateX(-50%);
    }

    .object-caption {
        font-size: 25px;
    }
}

/* ── carousel.css ── */
/* Projects carousel on the home page: text on the left, image on the right,
   advanced one project at a time by the arrow button. */

.carousel {
    align-items: stretch;
    padding: 0;
}

.carousel-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 48px;
    position: relative;
}

.carousel-title-row {
    display: block;
}

.carousel-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-top: 8px;
}

.carousel-arrow {
    position: absolute;
    bottom: 48px;
    right: 48px;
    padding: 8px;
    line-height: 0;
}

.carousel-desc {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.01em;
    padding: 20px 0;
}

.carousel-image {
    width: 55%;
    overflow: hidden;
}

.carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    /* Image first, then the text block. */
    .carousel {
        flex-direction: column-reverse;
        padding: 10px var(--page-x) 0;
    }

    .carousel-text {
        width: 100%;
        gap: 16px;
        padding: 20px 0;
        position: static;
    }

    /* The arrow moves inline next to the title instead of floating. */
    .carousel-title-row {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .carousel-title {
        flex: 1;
    }

    .carousel-arrow {
        position: static;
        flex-shrink: 0;
    }

    .carousel-desc {
        font-size: 15px;
        padding: 0;
    }

    /* Image breaks out of the page gutter, full bleed. */
    .carousel-image {
        width: calc(100% + 2 * var(--page-x));
        margin: 0 calc(-1 * var(--page-x));
        height: 60vw;
    }
}

/* ── home.css ── */
/* Home page only: hero, taglines, and the "About ERNAK" teaser. */

/* ── Hero ── */
#home {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background-image: url('../assets/home-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.77;
    color: var(--color-on-dark);
}

.home-logo {
    display: block;
    width: 407px;
    height: auto;
    margin-bottom: 20px;
}

.home-sub {
    font-size: 38px;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 48px;
    padding-bottom: 150px;
}

/* ── Taglines ── */
.tagline {
    flex-direction: column;
    justify-content: center;
    height: 50vh;
    padding: 40px 20px;
}

.tagline-text {
    font-size: 33px;
    letter-spacing: 0.7px;
    line-height: 42px;
    text-align: center;
}

.tagline-title {
    font-size: 33px;
    font-weight: 800;
    letter-spacing: 0.7px;
    line-height: 42px;
    text-align: center;
    padding-bottom: 20px;
}

.tagline-subtext {
    font-size: 20px;
    font-weight: 200;
    letter-spacing: 0.7px;
    line-height: 42px;
    text-align: center;
}

/* ── About teaser ── */
#about {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    background-image: url('../assets/personal-woodworking.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-on-dark);
}

.about-title {
    font-size: 38px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

#about .text-link {
    color: var(--color-on-dark);
}

@media (max-width: 768px) {
    #home {
        height: 100vh;
    }

    .home-logo {
        width: 60vw;
    }

    .home-sub {
        font-size: 20px;
        width: 60vw;
        line-height: 1.35;
    }

    /* Only the "open for collaboration" tagline is shown on mobile. */
    .tagline:not(.tagline-collab) {
        display: none;
    }

    .tagline-text {
        font-size: 16px;
        line-height: 24px;
        padding: 0;
    }

    .tagline-title {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 12px;
        white-space: nowrap;
        text-align: left;
    }

    .tagline-subtext {
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }

    #about {
        padding: 0;
        /* Matches the aspect ratio of the background photo at 130% zoom. */
        height: calc(100vw * 1.3 * (1178 / 1920));
        background-size: 130% auto;
        background-position: left center;
    }

    .about-title {
        font-size: 25px;
        padding-top: 50px;
    }
}

/* ── product.css ── */
/* Product / project detail pages: hero, specification accordion, order
   information, and the generic media blocks used below them. */

/* ── Hero ── */
.product-hero {
    align-items: stretch;
    padding: 0;
}

.product-hero-image {
    width: 40%;
    flex-shrink: 0;
    overflow: hidden;
}

.product-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-hero-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 40px var(--page-x) 0;
}

.product-title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
}

.product-subtitle {
    font-size: 24px;
    margin-bottom: 20px;
}

.product-desc {
    font-size: 20px;
    line-height: 130%;
}

.product-desc + .product-desc {
    margin-top: 1em;
}

/* Fills the leftover height of the text column, aligned to its right edge. */
.product-drawing {
    flex: 1;
    min-height: 0;
    max-width: 60%;
    margin-left: auto;
    object-fit: contain;
    object-position: right;
}

/* ── Specifications & order information ── */
.specs-section {
    align-items: stretch;
}

.specs-left {
    width: 40%;
    padding: 60px 0;
}

.specs-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 60px;
}

.specs-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 32px;
}

/* The accordion column is inset further than the page gutter. */
.specs-title-left {
    padding-left: 50px;
}

.specs-list {
    display: flex;
    flex-direction: column;
}

.spec-item {
    border-top: 1px solid var(--color-text);
}

.spec-item:last-child {
    border-bottom: 1px solid var(--color-text);
}

.spec-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 18px 50px;
    font-size: 18px;
    letter-spacing: 0.01em;
    text-align: left;
}

.spec-arrow {
    width: 14px;
    height: auto;
    flex-shrink: 0;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.spec-trigger[aria-expanded="true"] .spec-arrow {
    transform: rotate(270deg);
}

/* Animating grid rows from 0fr to 1fr gives a height transition without
   needing to measure the content. */
.spec-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

/* `visibility` also takes the collapsed content out of the tab order and the
   accessibility tree — without it the links inside a closed row can still be
   focused. It is delayed so it only applies once the row has finished
   closing. */
.spec-body > div {
    overflow: hidden;
    visibility: hidden;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    padding: 0 50px;
    transition: padding-bottom 0.3s ease, visibility 0s linear 0.3s;
}

.spec-item.open .spec-body {
    grid-template-rows: 1fr;
}

.spec-item.open .spec-body > div {
    visibility: visible;
    padding-top: 4px;
    padding-bottom: 18px;
    transition-delay: 0s;
}

.spec-table {
    border-collapse: collapse;
    width: 100%;
}

.spec-table td {
    padding: 4px 16px 4px 0;
    vertical-align: top;
}

.spec-table td:first-child {
    white-space: nowrap;
}

.spec-figure {
    width: 240px;
    margin-top: 1rem;
}

.specs-order-text {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.specs-order-link {
    font-size: 18px;
    font-weight: 600;
    text-decoration: underline;
    letter-spacing: 0.01em;
}

/* ── Media blocks ── */

/* Two images side by side, full page width. */
.media-pair {
    display: flex;
    width: 100%;
}

.media-pair img {
    width: 50%;
    height: auto;
}

.media-full {
    width: 100%;
}

.media-text {
    flex-direction: column;
    width: calc(4 / 6 * 100%);
    margin: 60px;
    padding: 0 90px 0 0;
    font-size: 30px;
    line-height: 130%;
}

.media-text p + p {
    margin-top: 1em;
}

@media (max-width: 768px) {
    .product-hero {
        flex-direction: column;
        padding: 0;
    }

    .product-hero-image,
    .product-hero-image img {
        width: 100%;
        height: auto;
    }

    .product-hero-image img {
        object-fit: unset;
    }

    .product-hero-text {
        padding: 32px var(--page-x);
    }

    .product-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .product-subtitle {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .product-desc {
        font-size: 16px;
    }

    .product-drawing {
        max-width: 100%;
        width: 100%;
        object-position: center;
    }

    .specs-section {
        flex-direction: column;
        padding: 0;
    }

    .specs-left {
        width: 100%;
        padding: 0;
    }

    .specs-right {
        width: 100%;
        padding: 32px var(--page-x);
    }

    .specs-title {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .specs-title-left {
        padding-left: var(--page-x);
    }

    .spec-trigger {
        font-size: 16px;
        padding: 16px 5px 16px var(--page-x);
    }

    .spec-arrow {
        margin-right: var(--page-x);
    }

    .spec-body > div {
        padding: 0 var(--page-x);
    }

    .spec-item.open .spec-body > div {
        padding-bottom: 16px;
    }

    .specs-order-text,
    .specs-order-link {
        font-size: 16px;
    }

    .media-pair {
        flex-direction: column;
    }

    .media-pair img {
        width: 100%;
        height: auto;
    }

    .media-text {
        width: 100%;
        margin: 40px 0;
        padding: 0 var(--page-x);
        font-size: 23px;
    }
}

/* ── about.css ── */
/* About page: studio intro, designer bio, exhibitions list. */

.about-intro {
    padding: var(--page-x);
}

.about-intro-text {
    width: calc(4 / 6 * 100% - 20px);
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.about-intro-text p + p {
    margin-top: 1.5em;
}

/* ── Designer ── */
.about-designer {
    align-items: flex-start;
    gap: 250px;
    padding: var(--page-x);
}

.about-designer-img {
    width: 38%;
    max-width: 700px;
    flex-shrink: 0;
    object-fit: cover;
}

.about-designer-text {
    flex: 1;
}

.about-designer-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 40px;
}

.about-designer-name {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
}

.about-designer-role {
    font-size: 20px;
    font-weight: 500;
}

.about-designer-text p {
    font-size: 20px;
    line-height: 30px;
}

.about-designer-text p + p {
    margin-top: 1em;
}

/* ── Exhibitions ── */
.about-exhibitions {
    padding: var(--page-x);
}

.about-exhibitions-inner {
    display: flex;
    width: 38%;
    max-width: 700px;
}

.about-exhibitions-label {
    width: 50%;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

.about-exhibitions-list {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 20px;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .about-intro,
    .about-designer,
    .about-exhibitions {
        padding: 40px var(--page-x);
    }

    .about-intro-text {
        width: 100%;
        font-size: 23px;
    }

    .about-designer {
        flex-direction: column;
        gap: 32px;
    }

    .about-designer-img {
        width: 100%;
        max-width: 100%;
    }

    .about-designer-header {
        flex-direction: column;
        gap: 4px;
    }

    .about-designer-name {
        font-size: 28px;
    }

    .about-exhibitions-inner {
        width: 100%;
        flex-direction: column;
        gap: 24px;
    }

    .about-exhibitions-label,
    .about-exhibitions-list {
        width: 100%;
    }

    .about-exhibitions-label {
        font-size: 28px;
    }
}