/*
Theme Name: Yannis Pèlerin Portfolio
Author: Yannis Pèlerin
Description: Portfolio sur mesure, adapté depuis le site HTML original.
Version: 2.0.0
Requires at least: 6.0
Text Domain: yannis-pelerin
*/

/* =========================================================
   YANNIS PÈLERIN — main stylesheet
   Designed for a 1920 x 1080 screen (the layout uses vw / vh
   units on purpose so it scales proportionally on screens
   close to that ratio — 16:9 laptops / monitors).

   Everything you are most likely to want to tweak in
   Dreamweaver is grouped and commented below:
     1. Colours & fonts
     2. Header (logo + social icons)
     3. Intro text (left column)
     4. Flaming spire + hover menu (right side)
   ========================================================= */


/* ---------- 1. RESET & BASE ---------- */

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

/* Keyboard-navigation focus ring, in the site's own accent colour
   instead of the browser default (which is easy to lose against
   the cream/black backgrounds here). :focus-visible means this only
   shows up for keyboard/assistive-tech use, not for mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #a3271f;
    outline-offset: 3px;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #fffbe6;   /* <-- your background colour */
    font-family: 'IM Fell DW Pica', Georgia, 'Times New Roman', serif;
    color: #1a1a1a;
    overflow-x: hidden;          /* the spire is allowed to bleed off the
                                     top/bottom, never off the sides */
}

a {
    text-decoration: none;
    color: inherit;
}

.page {
    position: relative;
    width: 100%;
    min-height: 100vh;
}


/* ---------- 2. HEADER ---------- */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2.2vh 3vw 0 3vw;
    z-index: 20;
}

.logo {
    width: 15vw;        /* <-- resize the logo here */
    max-width: 300px;
    min-width: 160px;
    height: auto;
    display: block;
}

.socials {
    display: flex;
    gap: 0.9vw;
    margin-top: 0.6vh;
}

.social-icon {
    width: 2.4vw;
    height: 2.4vw;
    max-width: 40px;
    max-height: 40px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 50%;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease;
}

.social-icon:hover {
    background-color: #a3271f;   /* echoes the red of the logo/spire */
}

.social-icon svg {
    width: 55%;
    height: 55%;
    fill: #fffbe6;
}


/* ---------- 2b. HOMEPAGE ENTRANCE / EXIT ---------- */
/* Only the homepage's <body> carries the "home" class, so none of this
   touches the other pages. script.js adds "entered" to <body> shortly
   after load (triggering the fade/slide-in below), and adds "leaving"
   to <body> the moment a menu link is clicked (triggering the text
   AND the spire to exit upward together, before the new page is
   actually loaded).

   NOTE: this is done with CSS *transitions* toggled by classes, not
   @keyframes animations. Animations "hold" the properties they
   animate for as long as they're active, which would otherwise block
   the "leaving" transition from ever having any visible effect once
   the entrance animation had already run. */

/* The header (logo + socials) is deliberately NOT part of this
   entrance/exit system — it stays fixed and visible on every page,
   including through the homepage's enter/leave transitions, so nav
   never visibly changes as you move around the site. */

/* .intro is already vertically centered with translateY(-50%) (see
   section 3a below) — these rules add the same small slide-in motion
   on top of that existing offset instead of replacing it. */
.home .intro {
    opacity: 0;
    transform: translateY(calc(-50% + 12px));
    transition: transform 1s ease-out, opacity 1s ease-out;
    transition-delay: 0.2s;
}

.home.entered .intro {
    opacity: 1;
    transform: translateY(-50%);
}

/* Exit state — quicker, no delay, everything leaves upward together. */
.home.leaving .intro {
    opacity: 0;
    transform: translateY(calc(-50% - 6vh));
    transition: transform 0.6s ease, opacity 0.6s ease;
}


/* ---------- 3. MAIN LAYOUT ---------- */

.main {
    position: relative;
    width: 100%;
    min-height: 100vh;
}


/* ---------- 3a. INTRO TEXT (left column) ---------- */

.intro {
    position: absolute;
    top: 50%;
    left: 5vw;
    transform: translateY(-50%);
    width: 34vw;
    max-width: 620px;
    min-width: 300px;
    z-index: 10;
}

.intro p {
    font-variant-caps: small-caps;   /* gives the elegant small-caps look
                                         seen in the design, from normal
                                         sentence-case text in the HTML */
    font-size: 1.35vw;
    min-font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-align: center;
    margin-bottom: 3.2vh;
}

.intro p:last-child {
    margin-bottom: 0;
}

/* Used on the four stub pages (about/boutique/contact/illustration),
   which have no spire — just centers the placeholder text on the page.
   Remove this once those pages get real layouts of their own. */
.main--simple {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.intro--simple {
    position: static;
    transform: none;
    text-align: center;
}


/* ---------- 3b. FLAMING SPIRE + HOVER MENU (right side) ---------- */

/* This box is the hover trigger: hovering anywhere inside it
   (i.e. anywhere on the spire image, INCLUDING the gap leading to the
   menu) reveals the menu. Image + gap + menu are laid out with flexbox
   as ONE continuous box on purpose — that's what stops the menu from
   disappearing while your mouse travels from the image to the links.

   Its entrance/exit uses the same .home.entered / .home.leaving
   body-level classes as the header and intro text above, so all
   three move together — see the comment in section 2b for why
   transitions (not @keyframes animations) are used here. */
.tower-nav {
    position: absolute;
    top: -14vh;                 /* pushes the tip of the spire above the
                                    viewport, as in the reference design */
    left: 38.8vw;                /* <-- positions the spire itself dead-
                                     centre horizontally; the menu still
                                     extends further right from here on
                                     hover, unchanged. Nudge this value
                                     to shift the whole cluster left/right */
    height: 108vh;               /* <-- controls the spire's size        */
    display: flex;
    align-items: center;
    gap: 2.2vw;                 /* space between spire and menu text —
                                    this gap is still part of the
                                    hoverable box, so no dead zone */
    z-index: 5;

    /* starting state: slightly higher and invisible, before the
       page has finished loading — script.js adds .entered to <body>
       a moment after load, which transitions it down into place */
    opacity: 0;
    transform: translateY(-8vh);
    transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

.home.entered .tower-nav {
    opacity: 1;
    transform: translateY(0);
}

/* Added to <body> by script.js just before following a menu link,
   since the other pages don't have the spire — this makes it slide
   back up and fade out instead of just vanishing when the new page
   loads. A shorter, quicker transition than the entrance one. */
.home.leaving .tower-nav {
    opacity: 0;
    transform: translateY(-30vh);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.tower-img {
    height: 100%;
    width: auto;                /* keeps church.png's real proportions   */
    display: block;
    pointer-events: none;       /* image never blocks clicks; the
                                    parent .tower-nav catches the hover */
    flex-shrink: 0;
}

/* The menu: hidden by default, revealed on hover — but only once the
   spire has finished dropping into place (the .entered class is added
   to <body> by script.js after the entrance transition starts;
   requiring it here stops the menu from popping up mid-animation if
   you happen to hover over the spire's landing zone too early). It
   stays reserved in the flex layout even while invisible, so the
   hoverable area always includes the space it will appear in. */
.tower-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4vh;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.home.entered .tower-nav:hover .tower-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tower-menu a {
    font-variant-caps: small-caps;
    font-size: 2.4vw;
    letter-spacing: 0.03em;
    color: #1a1a1a;
    transition: color 0.25s ease;
}

.tower-menu a:hover {
    color: #a3271f;   /* matches the red accent of the logo/spire */
}


/* ---------- 3c. CONTACT PAGE ---------- */

.main--contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6vw;
    min-height: 100vh;
    padding: 0 6vw;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 2.2vh;
    width: 34vw;
    max-width: 620px;
}

.contact-form input,
.contact-form textarea {
    background-color: #fffbe6;
    border: 1px solid #1a1a1a;
    font-family: inherit;
    color: #1a1a1a;
    font-variant-caps: small-caps;
    font-size: 1.15vw;
    letter-spacing: 0.02em;
    padding: 1.2vh 1.2vw;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #1a1a1a;
    opacity: 1;
    font-variant-caps: small-caps;
}

.contact-form textarea {
    min-height: 26vh;
    resize: vertical;
}

/* <-- resize the message box, or change field spacing, here */

.contact-submit {
    align-self: flex-start;
    background-color: #1a1a1a;
    color: #fffbe6;
    border: none;
    padding: 1.3vh 2.4vw;
    font-family: inherit;
    font-variant-caps: small-caps;
    font-size: 1.15vw;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.contact-submit:hover {
    background-color: #a3271f;   /* matches the red accent used elsewhere */
}

/* Pinned to the bottom-right corner of the section, independent of
   the form/note layout entirely. Drops down from above on load,
   echoing the way the spire drops in on the homepage — deliberately
   NOT the generic "rise up from below" the rest of this page uses
   (see section 3d below), so the extra specificity here is
   intentional: it needs to outrank ".subpage.entered .main > *". */
body.subpage .main--contact .contact-illustration {
    position: absolute;
    right: 3vw;
    bottom: 0;
    width: 20vw;
    max-width: 380px;
    pointer-events: none;
    z-index: 1;

    opacity: 0;
    transform: translateY(-8vh);
    transition: transform 1s ease-out, opacity 1s ease-out;
    transition-delay: 0.15s;
}

body.subpage.entered .main--contact .contact-illustration {
    opacity: 1;
    transform: translateY(0);
}

.contact-illustration img {
    width: 100%;
    height: auto;
    display: block;
}

.contact-note {
    width: 32vw;
    max-width: 560px;
}

.contact-note p {
    font-variant-caps: small-caps;
    font-size: 1.5vw;
    line-height: 1.75;
    letter-spacing: 0.02em;
    text-align: center;
}

.contact-note .accent {
    color: #a3271f;
}


/* ---------- 3d. SUBPAGE ENTRANCE (about / boutique / contact / illustration) ---------- */
/* These pages carry class="subpage" on <body> instead of "home". The
   header (logo + socials) stays fixed and visible here too — see the
   comment in section 2b — so only the page's own content (whatever's
   directly inside <main>) gets a gentle "rise up from below" on load,
   mirroring the way the homepage's content exits upward when you
   click a menu link. Targeting ".main > *" means this automatically
   applies to whatever is directly inside <main> on a given page (the
   placeholder text on about/boutique/illustration, or the form + note
   on contact) without needing page-specific selectors. */

.subpage .main > * {
    opacity: 0;
    transform: translateY(5vh);
    transition: transform 0.9s ease-out, opacity 0.9s ease-out;
    transition-delay: 0.3s;
}

/* if a page has two blocks side by side (like contact.html's form
   and note), stagger the second one slightly behind the first */
.subpage .main > *:nth-child(2) {
    transition-delay: 0.45s;
}

/* the illustration pages stack three (title, text, gallery) —
   stagger that third one a little further behind still */
.subpage .main > *:nth-child(3) {
    transition-delay: 0.55s;
}

.subpage.entered .main > * {
    opacity: 1;
    transform: translateY(0);
}


/* ---------- 3e. ILLUSTRATION PAGE ---------- */
/* Every illustration is its own page (illustration.html, illustration-
   le-voyou-voyant.html, etc.), sharing this same layout: a fixed
   sidebar listing every piece, a full-bleed blurred version of THAT
   page's own artwork as the background (set per-page via an inline
   style="background-image:..." — see the HTML comment near
   .illustration-hero in illustration.html), a dark scrim over it for
   readability, then the title/text/gallery on top. */

/* Pre-blurred at export time (a heavily-blurred hero-bg.jpg sits
   alongside main.jpg in each illustration's folder) rather than blurred
   live with a CSS filter, so there's no performance cost or pop-in. */
.illustration-hero {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.illustration-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.74);
}

/* ---- sidebar : the persistent list of every illustration ---- */
/* Deliberately NOT part of the page-entrance animation system (like
   the header — see section 2b) so it never visibly changes as you
   move between illustrations, only the content does. */
.illustration-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 23vw;
    max-width: 340px;
    height: 100vh;
    padding: 24vh 0 6vh 3vw;
    z-index: 10;
    border-right: 1px solid rgba(255, 251, 230, 0.2);
    overflow-y: auto;
}

.illustration-sidebar ul {
    list-style: none;
}

.illustration-sidebar li {
    margin-bottom: 2.3vh;
}

.illustration-sidebar a,
.illustration-sidebar .coming-soon {
    font-variant-caps: small-caps;
    font-size: 1.25vw;
    letter-spacing: 0.03em;
    display: inline-block;
}

.illustration-sidebar a {
    color: #fffbe6;
    transition: color 0.25s ease;
}

.illustration-sidebar a:hover {
    color: #a3271f;
}

/* the current page's own entry — set this class by hand on each
   page's copy of the sidebar */
.illustration-sidebar a.active {
    color: #a3271f;
    border-bottom: 1px solid #a3271f;
    padding-bottom: 2px;
}

/* titles with no page yet — plain text, not a link, so the list
   looks complete without pointing anywhere broken. Swap the <span>
   for an <a href="..."> once that piece has its own page. */
.illustration-sidebar .coming-soon {
    color: rgba(255, 251, 230, 0.32);
}

/* ---- content ---- */

.main--illustration-hub {
    position: relative;
    z-index: 2;
    padding: 22vh 6vw 10vh calc(23vw + 6vw);
}

.illustration-title {
    font-family: inherit;
    font-weight: normal;
    font-variant-caps: small-caps;
    font-size: 1.8vw;
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 0.3vw;
    color: #fffbe6;
    margin-bottom: 3.5vh;
}

/* tightens the gap when a metadata line (date/medium/size) follows
   the title directly, so the two read as one caption block rather
   than floating with the same spacing body text uses */
.illustration-title:has(+ .illustration-meta) {
    margin-bottom: 0.8vh;
}

.illustration-meta {
    font-variant-caps: small-caps;
    font-size: 0.95vw;
    letter-spacing: 0.03em;
    color: rgba(255, 251, 230, 0.65);
    margin-bottom: 3vh;
}

.illustration-text p {
    font-variant-caps: small-caps;
    font-size: 1.05vw;
    line-height: 1.8;
    letter-spacing: 0.015em;
    text-align: left;
    color: #fffbe6;
    max-width: 900px;
    margin-bottom: 2.4vh;
}

.illustration-text p:last-child {
    margin-bottom: 0;
}

.illustration-gallery {
    display: flex;
    align-items: flex-start;
    gap: 3vw;
    margin-top: 5vh;
    flex-wrap: wrap;
}

/* the main image, presented like a small matted print — a <button>
   in the HTML now (not a plain div), so it opens the lightbox too,
   the same as the detail thumbnails */
.illustration-main-framed {
    background-color: #fffbe6;
    padding: 10px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.55);
    flex: 0 0 30%;
    max-width: 420px;
    min-width: 260px;
    border: none;
    margin: 0;
    display: block;
    overflow: hidden;
}

.illustration-main-framed img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.illustration-main-framed:hover img {
    transform: scale(1.04);
}

/* <-- add/remove detail thumbnails here; they lay out as a grid and
   wrap automatically, however many there are (3 or 4 both look fine) */
.illustration-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vw;
    flex: 1;
    min-width: 260px;
    align-content: start;
}

.detail-thumb {
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    display: block;
}

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

.detail-thumb:hover img {
    transform: scale(1.06);
}

/* Lightbox: shared by every .detail-thumb on the page. Hidden by
   default; script.js adds/removes "active" and sets the image. */
.lightbox {
    position: fixed;
    inset: 0;
    background-color: rgba(20, 15, 10, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh 6vw;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease;
    z-index: 200;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.6);
}

.lightbox-close {
    position: absolute;
    top: 3vh;
    right: 3vw;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: #fffbe6;
    color: #1a1a1a;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.lightbox-close:hover {
    background-color: #a3271f;
    color: #fffbe6;
}


/* ---------- 3f. ILLUSTRATION PAGE — DARK THEME ---------- */
/* Full black background instead of the site's usual cream, since the
   pen-and-ink pieces read much better against dark. Text flips to
   cream (inherited via body's color, so no need to touch .illustration-
   title / .illustration-text individually). The logo swaps to a
   pre-recolored file (images/logo-light.png — same artwork, with the
   black lettering turned cream so it stays visible; the red monogram
   is untouched) directly in illustration.html's <img src>, and the
   social icons invert to cream circles with dark icons so they don't
   disappear against the new background. This is the only dark page
   on the site — permanent, hardcoded in the HTML, no toggle. */

body.illustration-page {
    background-color: #000000;
    color: #fffbe6;
}

body.illustration-page .social-icon {
    background-color: #fffbe6;
}

body.illustration-page .social-icon svg {
    fill: #1a1a1a;
}

body.illustration-page .social-icon:hover {
    background-color: #a3271f;
}

body.illustration-page .social-icon:hover svg {
    fill: #fffbe6;
}


/* ---------- 3g. PAGE CROSSFADE (light <-> dark pages) ---------- */
/* A full-screen overlay present on every page, used purely to soften
   the cut between light pages (cream) and the Illustration page
   (black) — without it, navigating between the two is an instant,
   jarring flip the moment the browser swaps pages.

   How it works: every page LOADS with this fully opaque, in that
   page's own colour (cream by default, black on the illustration
   page — see the ".illustration-page .page-veil" override below),
   then fades it away as soon as .entered is added (same trigger as
   every other entrance transition). On the way OUT, script.js sets
   this element's colour to match the DESTINATION (via a link's
   data-veil="dark" attribute — only used for the Illustration link)
   before adding .leaving, which fades it back to fully opaque. So
   the last thing visible before the browser navigates is a solid
   colour that already matches what's waiting on the other side; the
   cut itself becomes invisible. */

.page-veil {
    position: fixed;
    inset: 0;
    /* deliberately BELOW .site-header (20) and .illustration-sidebar
       (10) so both stay visible and static through every transition —
       only the page content underneath fades. Still above the
       homepage's spire (5) and everything at z-index 2 and below. */
    z-index: 8;
    pointer-events: none;
    background-color: #fffbe6;   /* default = light pages */
    opacity: 1;
    transition: opacity 0.9s ease-out;
}

body.illustration-page .page-veil {
    background-color: #000000;
}

body.entered .page-veil {
    opacity: 0;
}

/* Wins over .entered above when both classes are present at once
   (during the moment a link has been clicked) — order in the file
   matters here, this must stay after .entered. */
body.leaving .page-veil {
    opacity: 1;
    transition: opacity 0.6s ease;
}


/* ---------- 4. RESPONSIVE FALLBACK ---------- */
/* Below ~1100px wide, stack everything so nothing overlaps.
   (Optional — remove this block if you only ever target 1920x1080.) */

@media (max-width: 1100px) {

    .site-header {
        position: relative;
        padding: 20px;
    }

    .logo {
        width: 220px;
    }

    .socials {
        margin-top: 10px;
    }

    .social-icon {
        width: 34px;
        height: 34px;
    }

    .main {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .intro {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 90%;
        max-width: 500px;
        margin: 30px auto;
    }

    .intro p {
        font-size: 16px;
    }

    .tower-nav {
        position: relative;
        top: auto;
        right: auto;
        height: 70vh;
        margin: 0 auto 40px auto;
    }

    .tower-menu {
        position: static;
        transform: none;
        margin: 20px 0 0 0;
        align-items: center;
        text-align: center;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .tower-menu a {
        font-size: 26px;
    }

    .main--contact {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }

    .contact-form,
    .contact-note {
        width: 100%;
        max-width: 500px;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-submit {
        font-size: 16px;
    }

    body.subpage .main--contact .contact-illustration {
        position: static;
        width: 60%;
        max-width: 240px;
        margin: 0 auto;
    }

    .contact-note p {
        font-size: 18px;
    }

    .illustration-sidebar {
        position: static;
        width: 100%;
        max-width: none;
        height: auto;
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 251, 230, 0.2);
    }

    .illustration-sidebar li {
        margin-bottom: 12px;
    }

    .illustration-sidebar a,
    .illustration-sidebar .coming-soon {
        font-size: 18px;
    }

    .main--illustration-hub {
        padding: 20px;
    }

    .illustration-title {
        font-size: 22px;
    }

    .illustration-meta {
        font-size: 14px;
    }

    .illustration-text p {
        font-size: 16px;
    }

    .illustration-gallery {
        flex-direction: column;
    }

    .illustration-main-framed {
        max-width: 100%;
        width: 100%;
    }

    .illustration-details {
        width: 100%;
    }

    .lightbox-close {
        top: 16px;
        right: 16px;
    }
}

/* ===== Responsive layout refinements — v1.1 ===== */
@media (max-width: 1100px) {
  html, body { height: auto; min-height: 100%; }
  .site-header { position: relative; padding: 22px clamp(18px, 4vw, 42px) 0; align-items: center; gap: 16px; }
  .logo { width: clamp(150px, 24vw, 230px); min-width: 0; max-width: 100%; }
  .socials { flex-shrink: 0; gap: 9px; margin-top: 0; }
  .social-icon { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  .home .main { min-height: auto; display: flex; flex-direction: column; align-items: center; }
  .home .intro { position: relative; top: auto; left: auto; width: min(85%, 640px); min-width: 0; max-width: none; margin: 60px auto 30px; text-align: center; }
  .home .intro p { font-size: clamp(15px, 1.8vw, 19px); line-height: 1.7; margin-bottom: 25px; }
  .home .intro, .home.entered .intro { transform: translateY(0); }
  .home .intro { transform: translateY(12px); }
  .home.leaving .intro { transform: translateY(-25px); }
  .home .tower-nav { position: relative; top: auto; left: auto; right: auto; height: auto; width: min(90%, 850px); margin: 12px auto 45px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: clamp(12px, 3vw, 32px); }
  .home .tower-img { width: auto; height: min(75vh, 750px); max-width: 58%; object-fit: contain; }
  .home .tower-menu { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin: 0; opacity: 1; visibility: visible; pointer-events: auto; white-space: nowrap; }
  .home .tower-menu a { font-size: clamp(20px, 3.2vw, 32px); }
  .main--contact { min-height: auto; }
  .contact-form { min-width: 0; }
  .illustration-sidebar { box-sizing: border-box; }
  .illustration-sidebar ul { display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 12px; }
  .illustration-sidebar li { margin: 0; }
  .main--illustration-hub { padding: 36px clamp(18px, 4vw, 45px) 70px; }
  .illustration-gallery { align-items: stretch; }
  .illustration-main-framed { flex: 0 1 auto; min-width: 0; }
  .illustration-details { min-width: 0; }
}
@media (max-width: 600px) {
  .site-header { padding: 18px 16px 0; align-items: center; }
  .logo { width: clamp(140px, 43vw, 195px); }
  .socials { gap: 7px; }
  .social-icon { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
  .home .intro { width: min(88%, 430px); margin: 44px auto 14px; }
  .home .intro p { font-size: 15px; line-height: 1.65; margin-bottom: 22px; }
  .home .tower-nav { width: 100%; padding: 0 14px; gap: 12px; margin: 0 auto 36px; }
  .home .tower-img { height: min(64vh, 520px); max-width: 55%; }
  .home .tower-menu { gap: 18px; align-items: flex-start; text-align: left; }
  .home .tower-menu a { font-size: clamp(17px, 5vw, 24px); }
  .main--contact { padding: 45px 18px; }
  .contact-note { min-width: 0; }
  .illustration-sidebar { padding: 18px; }
  .illustration-sidebar ul { gap: 10px 17px; }
  .illustration-sidebar a, .illustration-sidebar .coming-soon { font-size: 15px; }
  .illustration-gallery { gap: 20px; }
  .illustration-details { gap: 10px; }
  .illustration-main-framed { min-width: 0; }
  .lightbox { padding: 60px 14px 20px; }
}
@media (max-width: 360px) {
  .site-header { gap: 8px; }
  .logo { width: 132px; }
  .socials { gap: 5px; }
  .social-icon { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
  .home .tower-img { max-width: 50%; }
  .home .tower-menu a { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .home .intro, .home .tower-nav, .page-veil, .subpage .main > * { transition-duration: 0.01ms !important; }
}

/* === Portfolio gallery, ivory catalogue edition (v1.2) === */
body.gallery-page { background: #fffbe6; color: #1a1a1a; min-height:100vh; }
.gallery-page .page { min-height:100vh; }
.gallery-page .site-header { position:absolute; z-index:30; }
.gallery-page .gallery-sidebar { position:fixed; top:0; left:0; width:23vw; max-width:340px; height:100vh; padding:22vh 2vw 5vh 3vw; border-right:1px solid rgba(26,26,26,.16); z-index:15; }
.gallery-sidebar-heading { font-size:clamp(15px,1.3vw,21px); letter-spacing:.08em; margin-bottom:3vh; }
.gallery-page .gallery-sidebar a { color:#1a1a1a; font-size:clamp(15px,1.2vw,21px); line-height:1.4; }
.gallery-page .gallery-sidebar a:hover, .gallery-page .gallery-sidebar a.active { color:#a3271f; }
.gallery-page .gallery-sidebar a.active { border-bottom:1px solid #a3271f; }
.gallery-main { margin-left:min(23vw,340px); min-height:100vh; padding:17vh 5vw 8vh; display:flex; align-items:flex-start; justify-content:center; }
.gallery-figure { margin:0; display:flex; flex-direction:column; align-items:center; width:100%; }
.gallery-image-button { display:block; border:0; padding:0; margin:0; background:transparent; cursor:zoom-in; max-width:100%; }
.gallery-artwork { display:block; width:auto; height:auto; max-width:100%; max-height:72vh; object-fit:contain; }
.gallery-caption { margin-top:2.4vh; font-variant-caps:small-caps; font-size:clamp(19px,1.6vw,28px); text-align:center; }
.gallery-hint { margin-top:8px; font-size:12px; opacity:.5; letter-spacing:.04em; }
.gallery-lightbox { z-index:1000; }
.gallery-lightbox img { object-fit:contain; }
@media (max-width:1100px) {
 .gallery-page .site-header { position:relative; }
 .gallery-page .gallery-sidebar { position:relative; width:100%; max-width:none; height:auto; padding:22px 5vw; border-right:0; border-bottom:1px solid rgba(26,26,26,.16); overflow:visible; }
 .gallery-page .gallery-sidebar ul { display:flex; flex-wrap:wrap; gap:12px 20px; }
 .gallery-page .gallery-sidebar li { margin:0; }
 .gallery-main { margin-left:0; padding:5vh 5vw 8vh; }
 .gallery-artwork { max-height:68vh; }
}
@media (max-width:600px) {
 .gallery-page .site-header { padding:18px 5vw 10px; align-items:center; gap:10px; }
 .gallery-page .logo { min-width:0; width:42vw; max-width:180px; }
 .gallery-page .socials { gap:8px; }
 .gallery-page .social-icon { min-width:28px; min-height:28px; width:30px; height:30px; }
 .gallery-page .gallery-sidebar { padding:16px 5vw; }
 .gallery-sidebar-heading { margin-bottom:14px; }
 .gallery-page .gallery-sidebar a { font-size:15px; }
 .gallery-main { padding:30px 5vw 60px; }
 .gallery-artwork { max-height:65vh; }
}

/* Catalogue captions: metadata only; preserve artwork dimensions from v1.2 */
.gallery-metadata { margin-top: 7px; text-align: center; font-size: clamp(12px, 1vw, 15px); letter-spacing: .035em; color: #655e51; font-variant-caps: small-caps; }

/* ---------- ABOUT: portrait + biography, ivory editorial layout ---------- */
.main--about {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: clamp(145px, 17vh, 210px) 6vw 9vh;
}
.about-layout {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(45px, 6vw, 115px);
    align-items: center;
}
.about-portrait { margin: 0; }
.about-portrait img {
    display: block;
    width: 100%;
    height: auto;
}
.about-content { min-width: 0; }
.about-content h1 {
    font-size: clamp(29px, 2.5vw, 44px);
    font-weight: normal;
    font-variant-caps: small-caps;
    margin: 0 0 2.4rem;
}
.about-content p {
    font-size: clamp(15px, 1.06vw, 18px);
    line-height: 1.75;
    letter-spacing: .012em;
    margin: 0 0 1.55rem;
    text-align: left;
}
.about-content p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .main--about { padding: 55px 7vw 75px; display: block; }
    .about-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 650px; }
    .about-portrait { max-width: 390px; margin: 0 auto; }
    .about-content h1 { margin-bottom: 22px; }
    .about-content p { font-size: 16px; }
}
@media (max-width: 560px) {
    .main--about { padding: 32px 6vw 55px; }
    .about-layout { gap: 28px; }
    .about-portrait { max-width: 300px; }
    .about-content h1 { text-align: center; }
}


/* v1.6 — Windowed desktop / half-screen layout.
   Keep the original full-width desktop composition untouched.
   At 701–1100px, preserve a balanced two-column editorial composition
   instead of placing the whole introduction above the spire. */
@media (min-width: 701px) and (max-width: 1100px) {
  body.home { overflow-x: hidden; }
  .home .site-header {
    position: relative;
    padding: 18px 3.5vw 0;
    align-items: center;
  }
  .home .logo { width: clamp(155px, 20vw, 220px); }
  .home .socials { gap: 9px; }
  .home .social-icon {
    width: 34px; height: 34px;
    min-width: 34px; min-height: 34px;
  }
  .home .main {
    min-height: calc(100vh - 85px);
    display: grid;
    grid-template-columns: minmax(0, 47%) minmax(0, 53%);
    align-items: center;
    gap: 0;
    padding: 12px 2.5vw 35px;
  }
  .home .intro {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 1.5vw;
    text-align: center;
  }
  .home .intro p {
    font-size: clamp(12px, 1.48vw, 16px);
    line-height: 1.6;
    margin-bottom: clamp(15px, 2.5vh, 26px);
  }
  .home .intro, .home.entered .intro {
    transform: translateY(0);
  }
  .home.leaving .intro { transform: translateY(-22px); }
  .home .tower-nav {
    position: relative;
    top: auto; left: auto; right: auto;
    width: 100%;
    min-width: 0;
    height: min(77vh, 760px);
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.5vw, 18px);
    padding: 0;
  }
  .home .tower-img {
    height: 100%;
    width: auto;
    max-width: 66%;
    object-fit: contain;
    flex-shrink: 1;
    min-width: 0;
  }
  .home .tower-menu {
    display: flex;
    position: static;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    gap: clamp(13px, 2vh, 22px);
    margin: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    white-space: nowrap;
  }
  .home .tower-menu a {
    font-size: clamp(16px, 2.15vw, 23px);
  }
}

/* v1.7 — HOME smartphone: spire, navigation, then introduction.
   Scoped to home only; desktop and all other pages are unchanged. */
@media (max-width: 600px) {
  body.home { overflow-x: hidden; }
  .home .site-header {
    position: relative;
    width: 100%;
    padding: 16px 4vw 0;
    align-items: center;
    z-index: 20;
  }
  .home .logo { width: clamp(150px, 43vw, 195px); min-width: 0; }
  .home .socials { gap: 7px; margin-top: 0; }
  .home .social-icon { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
  .home .main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    width: 100%;
    padding: 0 5vw 56px;
    gap: 0;
  }
  .home .tower-nav {
    order: 1;
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 0;
    margin: -4px auto 0;
    gap: 12px;
    max-width: none;
  }
  .home .tower-img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(88vw, 410px);
    max-height: none;
    object-fit: contain;
    flex: none;
    margin: 0 auto;
  }
  .home .tower-menu {
    display: flex;
    position: static;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: 0;
    gap: 7px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    white-space: normal;
  }
  .home .tower-menu a {
    display: block;
    font-size: clamp(27px, 7.4vw, 39px);
    line-height: 1.25;
    padding: 3px 8px;
    color: #1a1a1a;
  }
  .home .intro {
    order: 2;
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    display: block;
    width: 100%;
    max-width: 540px;
    min-width: 0;
    margin: 46px auto 0;
    padding: 0;
    text-align: center;
  }
  .home .intro p {
    font-size: clamp(15px, 3.85vw, 17px);
    line-height: 1.75;
    margin: 0 0 28px;
  }
  .home .intro p:last-child { margin-bottom: 0; }
  .home .intro, .home.entered .intro { transform: translateY(0); }
  .home.leaving .intro { transform: translateY(-25px); }
}
@media (max-width: 360px) {
  .home .site-header { padding-left: 3vw; padding-right: 3vw; }
  .home .logo { width: 145px; }
  .home .socials { gap: 5px; }
  .home .social-icon { width: 27px; height: 27px; min-width: 27px; min-height: 27px; }
  .home .tower-menu a { font-size: 26px; }
}

/* v1.8 — HOME smartphone visual refinements only. Desktop unaffected. */
@media (max-width: 600px) {
  html, body.home, .home .page, .home .main { background-color: #FFFBE6; color: #1A1A1A; }
  .home .tower-img {
    max-width: min(72vw, 335px);
    max-height: min(82svh, 720px);
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .home .tower-nav { gap: 16px; }
  .home .tower-menu a, .home .intro { color: #1A1A1A; }
  .home .social-icon { background-color: #1A1A1A; }
  .home .social-icon svg { fill: #FFFBE6; }
}


/* v1.9: HOME smartphone only — center spire AXIS, sticky logo/socials */
@media (max-width: 600px) {
  .home .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 100;
    background-color: #FFFBE6;
    padding: max(12px, env(safe-area-inset-top)) 4vw 12px;
  }
  .home .main {
    padding-top: calc(85px + env(safe-area-inset-top));
  }
  /* The point lies ~33% across the PNG, not at its 50% midpoint.
     Translate the image only, keeping the menu/text perfectly centered. */
  .home .tower-img { transform: translateX(17%); }
}
@media (max-width: 360px) {
  .home .site-header { padding-left: 3vw; padding-right: 3vw; }
}


/* v2.0 — HOME large desktop: independent header and content regions.
   Applied only above the existing 1100px breakpoint, so all previous
   narrow-desktop, tablet and phone layouts are preserved. */
@media (min-width: 1101px) {
  .home .page {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 100vh;
    isolation: isolate;
  }
  .home .site-header {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    min-height: 0;
    padding-bottom: 22px;
    z-index: 30;
    flex-shrink: 0;
  }
  .home .main {
    grid-row: 2;
    min-height: max(650px, calc(100vh - 190px));
    position: relative;
    z-index: 1;
  }
  /* Keep the intro inside the body section, never on top of the logo.
     At extremely wide/short ratios, grow the body instead of allowing
     the text to intrude into the header. */
  .home .intro {
    top: 50%;
    max-height: none;
  }
  .home .intro p {
    font-size: clamp(15px, 1.35vw, 25px);
  }
  /* The spire is decorative and may cross into the header area;
     its position is restored relative to the viewport as before. */
  .home .tower-nav {
    top: calc(-14vh - clamp(110px, 9vw, 190px));
  }
}