/* ═══════════════════════════════════════════════════════════════════════════
   Atelier — header, primary navigation, mobile drawer, search.
   ═══════════════════════════════════════════════════════════════════════════ */

.at-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    background: var(--at-canvas, #faf7f2);
    border-bottom: 1px solid transparent;
    transition: background-color 0.35s var(--at-ease, ease),
                border-color 0.35s var(--at-ease, ease);
}

/* main.js adds .is-stuck past 12px of scroll. */
.at-header.is-stuck {
    background: rgba(250, 247, 242, 0.94);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom-color: var(--at-rule, #e4dbcf);
}

.at-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 76px;
}

/* ── Wordmark: the script signature over letterspaced caps ─────────────── */
.at-brand { display: inline-flex; flex-direction: column; line-height: 1; }
/* Fluid, because the wordmark is whatever the client names the business. A
   fixed 1.75rem was set against "Tiffany M."; a three-word script name at that
   size crowds the search and menu icons on a small phone. Scaling with the
   viewport keeps the lockup intact from 320px up without a second breakpoint. */
.at-brand-name {
    font-family: var(--at-script, cursive);
    font-size: clamp(1.2rem, 0.95rem + 1.1vw, 1.75rem);
    line-height: 1.05;
    white-space: nowrap;
    color: var(--at-ink, #2a2724);
    /* Parisienne sits high in its em box; this optically centres it. */
    padding-bottom: 0.12em;
}
/* Tracking is set for a subtitle of a few words, not a single one. At the
   0.42em this started with, "ARTWORK BY TIFFANY" ran wider than the script
   wordmark above it and the lockup read as two unrelated lines. The
   letter-spacing adds to the last character too, hence the matching negative
   margin-right, or the line sits visibly off-centre against the name. */
.at-brand-role {
    font-family: var(--at-sans, sans-serif);
    font-size: 0.5625rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    margin-right: -0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--at-faint, #9a8f85);
    padding-left: 0.2em;
}
.at-brand img { max-height: 44px; width: auto; }

/* ── Desktop menu ──────────────────────────────────────────────────────── */
.at-nav { display: flex; align-items: center; gap: 2rem; }

.at-nav a {
    position: relative;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--at-muted, #6b625a);
    padding-block: 0.35rem;
}

/* Underline grows from the left rather than fading in; a fade on a 1px rule
   at this size just looks like a rendering artefact. */
.at-nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--at-gilt, #b08d57);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--at-ease, ease);
}
.at-nav a:hover, .at-nav a[aria-current='page'] { color: var(--at-ink, #2a2724); }
.at-nav a:hover::after, .at-nav a[aria-current='page']::after { transform: scaleX(1); }

/* ── Right-hand icons ──────────────────────────────────────────────────── */
.at-header-tools { display: flex; align-items: center; gap: 1.1rem; }

.at-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--at-muted, #6b625a);
    cursor: pointer;
    transition: color 0.25s var(--at-ease, ease);
}
.at-icon-btn:hover { color: var(--at-gilt, #b08d57); }

.at-cart { position: relative; }
.at-cart-count {
    position: absolute;
    top: 3px; right: 2px;
    min-width: 16px; height: 16px;
    display: grid; place-items: center;
    padding: 0 4px;
    background: var(--at-gilt, #b08d57);
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0;
}

.at-burger { display: none; }

/* ── Search drawer ─────────────────────────────────────────────────────── */
.at-search {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    border-top: 1px solid transparent;
    transition: grid-template-rows 0.4s var(--at-ease, ease),
                border-color 0.4s var(--at-ease, ease);
}
.at-search.is-open {
    grid-template-rows: 1fr;
    border-top-color: var(--at-rule, #e4dbcf);
}
.at-search > div { min-height: 0; }

.at-search form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding-block: 1.25rem;
}
.at-search input[type='search'] {
    flex: 1;
    padding: 0.75rem 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--at-rule, #e4dbcf);
    color: var(--at-ink, #2a2724);
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.5rem;
}
.at-search input[type='search']:focus { outline: none; border-bottom-color: var(--at-gilt, #b08d57); }

/* ── Mobile drawer ─────────────────────────────────────────────────────── */
.at-drawer {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--at-canvas, #faf7f2);
    /* Kept in the layout but inert, so the transform can animate. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.45s var(--at-ease, ease), visibility 0.45s;
}
.at-drawer.is-open { transform: none; visibility: visible; }

.at-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding-inline: var(--at-gutter, 1.5rem);
    border-bottom: 1px solid var(--at-rule, #e4dbcf);
}

.at-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 2rem var(--at-gutter, 1.5rem);
    overflow-y: auto;
}
.at-drawer-nav a {
    padding-block: 1rem;
    border-bottom: 1px solid var(--at-rule, #e4dbcf);
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.75rem;
    color: var(--at-ink, #2a2724);
}
.at-drawer-nav a:last-child { border-bottom: 0; }

.at-drawer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem var(--at-gutter, 1.5rem) 2.5rem;
    border-top: 1px solid var(--at-rule, #e4dbcf);
}
.at-drawer-social { display: flex; gap: 1rem; color: var(--at-muted, #6b625a); }
.at-drawer-social a:hover { color: var(--at-gilt, #b08d57); }

/* Freeze the page behind an open drawer. */
body.at-locked { overflow: hidden; }

@media (max-width: 900px) {
    .at-nav { display: none; }
    .at-burger { display: inline-flex; }
    .at-header-inner { min-height: 66px; }
    .at-main { padding-top: 66px; }
}

/* ── Colour-scheme toggle ──────────────────────────────────────────────── */
/* Both glyphs live in the markup; dark.css decides which one is displayed.
   Fixed box so swapping a moon for a sun cannot nudge the icons beside it. */
.at-theme-toggle { position: relative; }
.at-theme-toggle .at-icon { width: 19px; height: 19px; }

/* No colour transition on the flip. A cross-fade over a whole page repaints
   every surface at once and reads as lag rather than polish, and it fights the
   instant swap the inline head script exists to guarantee. */

/* In the drawer the toggle sits between the social row and the enquire link,
   so it needs a hit area that matches the links either side of it. */
.at-drawer-foot .at-theme-toggle {
    width: 42px;
    height: 42px;
    border: 1px solid var(--at-rule, #e4dbcf);
}
.at-drawer-foot .at-theme-toggle:hover { border-color: var(--at-gilt, #b08d57); }

@media (max-width: 900px) {
    /* Search stays; the scheme toggle is duplicated in the drawer, and two
       live copies of the same control in one viewport is a bug waiting to
       confuse a screen-reader user. */
    .at-header-tools .at-theme-toggle { display: none; }
}