/* ==========================================================================
   Twéva — Atelier
   Commissioned storefront for a Cairo eveningwear house.

   THESIS: a dress you cannot touch, sold by showing how it was made. Refuses
   the cream-ground serif boutique page this category always ships.
   OWN-WORLD: the cutting table. Dark self-healing mat with its printed
   measurement grid; tailor's chalk white; red marking pen for what is gone;
   brass reserved for the wordmark, the price and the primary action alone.
   Condensed stamped caps, tabular measurements, docket rules.
   FIRST VIEWPORT: the garment full-bleed on the mat, its name and Arabic name
   chalked low, cloth and remaining sizes stamped beside it, action in brass.

   Dark is chosen from the use scene, not from taste: she shops on a phone,
   late, a fortnight before an event.
   Class names beginning atl- belong to the platform's store blade contract and
   must keep working; the visual language over them is entirely this file's.
   ========================================================================== */

:root {
    /* The light cutting mat. Self-healing mats come in pale sage as readily as
       black; this is the same table under daylight rather than a different world,
       and it keeps the house's own photography as the brightest thing on screen.
       Deliberately sage-stone, not the cream every fashion storefront defaults to. */
    --mat: #e7e9e1;
    --mat-2: #dee2d6;
    --mat-3: #d2d8c9;
    --grid: rgba(58, 92, 78, .05);

    /* Graphite marks on the mat. "chalk" keeps its name across the file; on the
       light mat the marking tool is a pencil, so the value is dark. */
    --chalk: #1a211d;
    --chalk-dim: #4c574f;
    --chalk-faint: #556059;

    --brass: #7a5f20;
    --brass-lift: #5c4818;
    --brass-dim: #8c7534;

    --mark: #a8321b;

    /* Hairlines are drawn in the mark colour; the ground tints scrims and bars. */
    --rule-rgb: 26, 33, 29;
    --ground-rgb: 231, 233, 225;

    --disp: 'Archivo Narrow', 'Arial Narrow', system-ui, sans-serif;
    --ui: 'Archivo', system-ui, -apple-system, sans-serif;
    --ar: 'Alexandria', 'Tajawal', system-ui, sans-serif;

    --shell: 1360px;
    --pad: clamp(16px, 5vw, 56px);
    --ease: cubic-bezier(.2, .75, .3, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.atl-page,
.atl-page {
    margin: 0;
    background-color: var(--mat);
    color: var(--chalk);
    font: 400 16px/1.6 var(--ui);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    /* the mat's own printed grid; the only ornament on the page */
    background-image:
        repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 48px);
}

body[dir="rtl"] .atl-page,
body[dir="rtl"].atl-page { font-family: var(--ar); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.atl-shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--pad);
}

.atl-main { display: block; }

/* Latin numerals stay LTR inside Arabic text. */
.atl-price, .atl-price-old, .atl-cart-total-num,
.atl-cart-item-price, .tw-sz, .tw-count, .atl-count {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- bar */
.atl-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(var(--ground-rgb), .86);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid rgba(var(--rule-rgb), .09);
}

.atl-topbar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
}

.atl-brand { display: inline-flex; align-items: center; }

/* The wordmark IS the logo. Its intrinsic ratio is 758x264 (2.871); the markup
   declares 63x22 to match exactly, so nothing stretches and nothing shifts. */
.atl-brand-logo {
    display: block;
    height: 22px;
    width: auto;
    transition: opacity .3s var(--ease);
}

.atl-brand:hover .atl-brand-logo { opacity: .74; }
.atl-brand-name { display: none; }

.atl-topbar-actions { display: flex; align-items: center; gap: 8px; }

.atl-cart-trigger {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 34px;
    border: 1px solid rgba(var(--rule-rgb), .18);
    border-radius: 2px;
    color: var(--chalk-dim);
    background: transparent;
    transition: border-color .3s var(--ease), color .3s var(--ease);
}

.atl-cart-trigger:hover { border-color: var(--brass); color: var(--brass); }
.atl-cart-trigger svg { width: 18px; height: 18px; }

.atl-cart-badge {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    background: var(--brass);
    color: var(--mat);
    border-radius: 99px;
    font: 600 10px/1 var(--ui);
    font-variant-numeric: tabular-nums;
}

/* Language switcher inherits the chip look so the bar reads as one row. */
.atl-topbar .lang select,
.atl-topbar select.form-select {
    height: 34px;
    padding: 0 24px 0 9px;
    background: transparent;
    border: 1px solid rgba(var(--rule-rgb), .18);
    border-radius: 2px;
    color: var(--chalk-dim);
    font: 500 11px/1 var(--ui);
    letter-spacing: .1em;
    min-height: 0;
}

.atl-topbar .lang select option { background: var(--mat); color: var(--chalk); }

/* ------------------------------------------------------------------ hero */
.atl-hero {
    position: relative;
    min-height: clamp(460px, 80svh, 840px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--mat-2);
}

.atl-hero-rail { position: absolute; inset: 0; display: block; }
.atl-hero-slide { position: absolute; inset: 0; }

.atl-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 16%;
}

.atl-hero-scrim {
    position: absolute;
    inset: 0;
    /* The caption sits on the photograph, so the ground is washed up through it far
       enough that graphite type clears 4.5:1 over any frame in the catalogue,
       bright studio white and dark interior alike. */
    background:
        linear-gradient(to top, var(--mat) 10%, rgba(var(--ground-rgb), .95) 30%, rgba(var(--ground-rgb), .42) 52%, rgba(var(--ground-rgb), .06) 76%),
        linear-gradient(to right, rgba(var(--ground-rgb), .5), rgba(var(--ground-rgb), .08) 46%, transparent 66%);
}

body[dir="rtl"] .atl-hero-scrim {
    background:
        linear-gradient(to top, var(--mat) 10%, rgba(var(--ground-rgb), .95) 30%, rgba(var(--ground-rgb), .42) 52%, rgba(var(--ground-rgb), .06) 76%),
        linear-gradient(to left, rgba(var(--ground-rgb), .5), rgba(var(--ground-rgb), .08) 46%, transparent 66%);
}

.atl-hero-cap {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: 0 clamp(24px, 5vw, 58px);
}

.atl-hero-title {
    text-shadow: 0 1px 26px rgba(var(--ground-rgb), .95), 0 1px 6px rgba(var(--ground-rgb), .9);
    font: 500 clamp(36px, 10vw, 84px)/.94 var(--disp);
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 0;
    max-width: 13ch;
    text-wrap: balance;
    color: var(--chalk);
}

body[dir="rtl"] .atl-hero-title {
    font-family: var(--ar);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
}

/* The docket: what it is, what is left, what it costs, what to do next. */
.tw-docket { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(16px, 3vw, 44px); }

.tw-spec {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: min(100%, 240px);
    padding-inline-start: clamp(0px, 2vw, 24px);
    border-inline-start: 1px solid rgba(var(--rule-rgb), .16);
}

.tw-spec-l {
    text-shadow: 0 1px 12px rgba(var(--ground-rgb), .9);
    font: 500 10px/1 var(--ui);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--chalk-faint);
}

.tw-spec-v { font: 400 14px/1.45 var(--ui); color: var(--chalk); text-shadow: 0 1px 12px rgba(var(--ground-rgb), .9); }
.tw-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ----------------------------------------------------------------- rules */
/* A section header is a stamped rule, never a kicker sitting above a heading. */
.atl-sechead { margin: 0; }

.atl-sechead-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-block: clamp(26px, 5vw, 50px) 15px;
}

.atl-sechead-row h2,
.atl-display {
    font: 500 clamp(18px, 3.2vw, 29px)/1 var(--disp);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
    color: var(--chalk);
}

body[dir="rtl"] .atl-display,
body[dir="rtl"] .atl-sechead-row h2 { font-family: var(--ar); letter-spacing: 0; text-transform: none; }

.atl-sechead-row::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(var(--rule-rgb), .16);
    order: 1;
}

.atl-sechead-link { order: 2; }

.atl-sechead-link,
.atl-count {
    font: 400 11.5px/1 var(--ui);
    letter-spacing: .06em;
    color: var(--chalk-faint);
    white-space: nowrap;
}

.atl-sechead-link:hover { color: var(--brass); }

/* Any leftover kicker markup is suppressed: the heading carries its own weight. */
.atl-eyebrow { display: none; }

.atl-section { padding-block: 0 clamp(18px, 3vw, 36px); }

/* -------------------------------------------------------------- trust bar */
.atl-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 24px;
    padding-block: 15px;
    border-bottom: 1px solid rgba(var(--rule-rgb), .1);
}

.atl-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 400 10.5px/1 var(--ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--chalk-faint);
}

.atl-trust-item i { color: var(--brass-dim); font-size: 15px; }

/* -------------------------------------------------------- the piece grid */
/* One hairline gutter so the grid reads as a contact sheet, not as cards. */
.atl-grid,
.atl-prodrail,
.atl-tilerail,
.atl-tilegrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(var(--rule-rgb), .1);
    border: 1px solid rgba(var(--rule-rgb), .1);
}

.atl-card { position: relative; display: flex; flex-direction: column; background: var(--mat); min-width: 0; }

.atl-card-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--mat-3);
}

.atl-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
    transition: transform 1.05s var(--ease), opacity .5s ease;
}

.atl-card-img-alt { position: absolute; inset: 0; opacity: 0; }
.atl-card-media:hover .atl-card-img-alt { opacity: 1; }
.atl-card-media:hover .atl-card-img { transform: scale(1.04); }

/* A stamped ticket, not a rounded pill. */
.atl-flag {
    position: absolute;
    top: 9px;
    inset-inline-start: 9px;
    z-index: 2;
    padding: 4px 8px;
    background: rgba(var(--ground-rgb), .84);
    border: 1px solid var(--brass-dim);
    color: var(--brass);
    font: 600 9px/1 var(--ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

.atl-flag-out { border-color: var(--mark); color: var(--mark); }

.atl-card-body { display: flex; flex-direction: column; gap: 3px; padding: 11px 11px 13px; flex: 1; }
.atl-card-link { min-width: 0; color: inherit; }

.tw-no { font: 500 9.5px/1 var(--ui); letter-spacing: .2em; color: var(--chalk-faint); }

.atl-card-name {
    font: 500 clamp(15px, 3.2vw, 19px)/1.15 var(--disp);
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 0;
    color: var(--chalk);
}

body[dir="rtl"] .atl-card-name { font-family: var(--ar); letter-spacing: 0; text-transform: none; }

.atl-card-meta {
    margin: 0;
    font: 300 12px/1.35 var(--ui);
    color: var(--chalk-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

body[dir="rtl"] .atl-card-meta { font-family: var(--ar); }

.atl-card-foot { margin-top: auto; padding-top: 9px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.atl-price-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.atl-price { font: 600 13.5px/1 var(--ui); color: var(--brass); letter-spacing: .01em; }
.atl-price-old { font: 400 11px/1 var(--ui); color: var(--chalk-faint); text-decoration-line: line-through; text-decoration-color: var(--mark); }

/* The stock ledger. A gone size is shown and struck, never quietly hidden. */
.tw-sizes { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }

.tw-sz {
    font: 500 10px/1 var(--ui);
    padding: 4px 5px;
    border: 1px solid rgba(var(--rule-rgb), .22);
    color: var(--chalk-dim);
    letter-spacing: .04em;
    white-space: nowrap;
}

.tw-sz.is-gone {
    color: var(--chalk-faint);
    border-color: rgba(var(--rule-rgb), .1);
    text-decoration: line-through;
    text-decoration-color: var(--mark);
}

.atl-add {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(var(--rule-rgb), .22);
    border-radius: 2px;
    color: var(--chalk-dim);
    cursor: pointer;
    transition: all .3s var(--ease);
}

.atl-add:hover { border-color: var(--brass); color: var(--brass); }

/* Collection tiles reuse the piece frame. */
.atl-tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--mat-2); }

.atl-tile-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transition: transform 1.05s var(--ease); }
.atl-tile:hover .atl-tile-img { transform: scale(1.05); }

.atl-tile-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--mat) 2%, rgba(var(--ground-rgb), .9) 26%, rgba(var(--ground-rgb), .34) 58%, transparent 84%); }
.atl-tile-cap { position: absolute; inset-inline: 0; bottom: 0; padding: 13px; display: flex; flex-direction: column; gap: 3px; }
.atl-tile-kicker { display: none; }

.atl-tile-name {
    font: 500 clamp(14px, 3vw, 19px)/1.1 var(--disp);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--chalk);
}

body[dir="rtl"] .atl-tile-name { font-family: var(--ar); letter-spacing: 0; text-transform: none; }

.atl-tile-cta {
    font: 500 10px/1 var(--ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.atl-tile:hover .atl-tile-cta { opacity: 1; transform: none; }
body[dir="rtl"] .atl-tile-cta i, body[dir="rtl"] .atl-sechead-link i { transform: scaleX(-1); }

/* --------------------------------------------------------------- controls */
.atl-btn, .atl-place-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 2px;
    font: 600 12px/1 var(--ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .12s;
}

.atl-btn:active, .atl-place-order:active { transform: translateY(1px); }

.atl-btn-ink, .atl-place-order { background: var(--brass); color: var(--mat) !important; border-color: var(--brass); }
.atl-btn-ink:hover, .atl-place-order:hover { background: var(--brass-lift); border-color: var(--brass-lift); }

.atl-btn-paper, .atl-btn-ghost { background: transparent; color: var(--chalk); border-color: rgba(var(--rule-rgb), .3); }
.atl-btn-paper:hover, .atl-btn-ghost:hover { background: rgba(var(--rule-rgb), .07); border-color: var(--chalk); }
.atl-btn-block { width: 100%; }

.atl-input, .atl-select, select.atl-input {
    appearance: none;
    -webkit-appearance: none;
    height: 42px;
    padding: 0 12px;
    background: var(--mat-2);
    border: 1px solid rgba(var(--rule-rgb), .18);
    border-radius: 2px;
    color: var(--chalk);
    font: 400 13px/1 var(--ui);
}

.atl-input::placeholder { color: var(--chalk-faint); }
.atl-input:focus, .atl-select:focus { outline: 0; border-color: var(--brass); }

select.atl-input, .atl-select {
    padding-inline-end: 30px;
    background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%);
    background-position: calc(100% - 16px) 19px, calc(100% - 11px) 19px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

body[dir="rtl"] select.atl-input { background-position: 16px 19px, 11px 19px; }

.atl-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 14px; }
.atl-chips, .atl-cat-links, .atl-cat-rail { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 6px 16px; }

.atl-chip, .atl-cat-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid rgba(var(--rule-rgb), .2);
    border-radius: 2px;
    font: 500 10.5px/1 var(--ui);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chalk-dim);
    transition: all .3s var(--ease);
}

.atl-chip:hover, .atl-cat-link:hover,
.atl-chip.is-active, .atl-cat-link.is-active { border-color: var(--brass); color: var(--brass); }

.atl-chip img, .atl-cat-link img { width: 20px; height: 20px; object-fit: cover; border-radius: 2px; }
.atl-chip-accent { border-color: var(--brass-dim); color: var(--brass); }

/* --------------------------------------------------------- single product */
.atl-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-block: 16px 0;
    font: 400 10.5px/1 var(--ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--chalk-faint);
}

.atl-crumb a:hover { color: var(--brass); }
.atl-crumb-sep { color: rgba(var(--rule-rgb), .25); }
.atl-crumb-cur { color: var(--chalk-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }

.atl-product { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3.5vw, 52px); padding-block: clamp(14px, 3vw, 30px) 0; align-items: start; }

.atl-gallery-main {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--mat-2);
    border: 1px solid rgba(var(--rule-rgb), .1);
}

.atl-gallery-main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }

.atl-thumb-rail { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; }
.atl-thumb-rail::-webkit-scrollbar { display: none; }

.atl-thumb {
    flex: 0 0 62px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid rgba(var(--rule-rgb), .12);
    background: var(--mat-2);
    opacity: .55;
    transition: opacity .3s var(--ease), border-color .3s var(--ease);
}

.atl-thumb:hover, .atl-thumb.is-active { opacity: 1; border-color: var(--brass); }
.atl-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

.atl-product-info { min-width: 0; }

.atl-product-name {
    font: 500 clamp(29px, 7.5vw, 52px)/.99 var(--disp);
    letter-spacing: -.015em;
    text-transform: uppercase;
    margin: 6px 0 4px;
    color: var(--chalk);
}

body[dir="rtl"] .atl-product-name { font-family: var(--ar); letter-spacing: 0; text-transform: none; line-height: 1.2; }

.atl-product-sub { font: 300 14.5px/1.5 var(--ui); color: var(--chalk-dim); margin: 0 0 15px; max-width: 46ch; }
body[dir="rtl"] .atl-product-sub { font-family: var(--ar); }

.atl-product-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding-block: 13px;
    margin-bottom: 15px;
    border-block: 1px solid rgba(var(--rule-rgb), .14);
}

.atl-product-price .atl-price { font-size: clamp(21px, 5vw, 27px); }
.atl-product-price .atl-price-old { font-size: 14px; }

.atl-concierge-hint {
    display: flex;
    gap: 9px;
    margin-top: 13px;
    padding: 12px 13px;
    background: var(--mat-2);
    border: 1px solid rgba(var(--rule-rgb), .12);
    font: 300 11.5px/1.6 var(--ui);
    color: var(--chalk-dim);
}

.atl-concierge-hint i { color: var(--brass-dim); font-size: 15px; flex: none; }

.atl-qty { display: inline-flex; align-items: center; border: 1px solid rgba(var(--rule-rgb), .22); border-radius: 2px; }
.atl-qty-btn { width: 42px; height: 46px; display: grid; place-items: center; background: transparent; border: 0; color: var(--chalk-dim); cursor: pointer; }
.atl-qty-btn:hover { color: var(--brass); }
.atl-qty-num { min-width: 44px; text-align: center; font: 500 14px/1 var(--ui); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- variant picker */
/* The shared include ships its own <style> inside the body, so at equal
   specificity it wins over this file no matter the load order. One extra
   class settles it, and colour is pinned in pairs so a selected label can
   never land on a fill derived from its own colour. */
.atl-page .sm-variants { margin: 4px 0 18px; gap: 14px; }

.atl-page .sm-variant-label {
    font: 500 10px/1 var(--ui);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--chalk-faint);
    opacity: 1;
}

.atl-page .sm-variant-opt {
    min-width: 50px;
    padding: 11px 16px;
    border: 1px solid rgba(var(--rule-rgb), .22);
    border-radius: 2px;
    background: transparent;
    color: var(--chalk);
    font: 500 12px/1 var(--ui);
    letter-spacing: .08em;
    opacity: 1;
    transition: all .25s var(--ease);
}

.atl-page .sm-variant-opt:hover { border-color: var(--brass); color: var(--brass); background: transparent; }

.atl-page .sm-variant-opt.is-selected,
.atl-page .sm-variant-opt.is-selected:hover {
    background: var(--chalk);
    border-color: var(--chalk);
    color: var(--mat);
    font-weight: 600;
}

.atl-page .sm-variant-opt.is-selected .sm-variant-delta { color: var(--brass-dim); }

.atl-page .sm-variant-opt.tw-oos,
.atl-page .sm-variant-opt.tw-oos:hover {
    background: transparent;
    border-color: rgba(var(--rule-rgb), .1);
    color: var(--chalk-faint);
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: var(--mark);
}

/* ---------------------------------------------------------------- prose */
.atl-prose { font: 300 15px/1.75 var(--ui); color: var(--chalk-dim); }
body[dir="rtl"] .atl-prose { font-family: var(--ar); }

.atl-prose h3, .atl-prose h4 {
    font: 500 clamp(14px, 3vw, 17px)/1.3 var(--disp);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--chalk);
    margin: 24px 0 9px;
}

body[dir="rtl"] .atl-prose h3, body[dir="rtl"] .atl-prose h4 { font-family: var(--ar); letter-spacing: 0; text-transform: none; }

.atl-prose p { margin: 0 0 13px; max-width: 68ch; }
.atl-prose ul { margin: 0 0 18px; padding: 0; list-style: none; }
.atl-prose li { position: relative; padding-inline-start: 18px; margin-bottom: 7px; max-width: 66ch; }
.atl-prose li::before { content: ""; position: absolute; inset-inline-start: 0; top: .78em; width: 7px; height: 1px; background: var(--brass-dim); }
.atl-prose a { color: var(--brass); border-bottom: 1px solid rgba(201, 169, 97, .3); }

/* The size chart is a spec block, not a table dropped into prose. */
.atl-prose table {
    width: 100%;
    max-width: 560px;
    border-collapse: collapse;
    margin: 4px 0 22px;
    font: 400 12.5px/1.4 var(--ui);
    font-variant-numeric: tabular-nums;
}

.atl-prose thead th {
    background: var(--mat-3);
    color: var(--brass);
    font: 600 9.5px/1.3 var(--ui);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 9px 6px;
    border: 1px solid rgba(var(--rule-rgb), .12);
    text-align: center;
}

.atl-prose tbody td { padding: 9px 6px; text-align: center; border: 1px solid rgba(var(--rule-rgb), .12); color: var(--chalk); }
.atl-prose tbody tr:nth-child(even) td { background: rgba(var(--rule-rgb), .03); }

.tw-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------- voices */
/* Auto-drifting marquee: right to left, pauses the moment she touches it,
   restarts only after three quiet seconds. The page's one authored motion. */
.tw-voices-band {
    margin-top: clamp(26px, 4vw, 56px);
    padding-block: clamp(22px, 4vw, 48px);
    background: var(--mat-2);
    border-block: 1px solid rgba(var(--rule-rgb), .1);
}

.tw-vp {
    position: relative;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.tw-vp:active { cursor: grabbing; }
.tw-vt { display: flex; gap: 10px; will-change: transform; }

.tw-v { flex: 0 0 clamp(200px, 62vw, 290px); background: var(--mat); border: 1px solid rgba(var(--rule-rgb), .13); padding: 4px; }
.tw-v img { width: 100%; height: auto; pointer-events: none; }

.tw-vnav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; }

.tw-vb {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--rule-rgb), .2);
    border-radius: 2px;
    background: transparent;
    color: var(--chalk-dim);
    cursor: pointer;
    transition: all .3s var(--ease);
}

.tw-vb:hover { border-color: var(--brass); color: var(--brass); }
.tw-vb svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ----------------------------------------------------------- about band */
.tw-band { background: var(--mat-2); border-block: 1px solid rgba(var(--rule-rgb), .1); }
.tw-about { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3.5vw, 52px); align-items: center; }
.tw-about-figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mat-3); border: 1px solid rgba(var(--rule-rgb), .1); }
.tw-about-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.tw-about-copy p { margin: 0 0 14px; font: 300 15px/1.8 var(--ui); color: var(--chalk-dim); max-width: 62ch; }
.tw-about-copy p:first-of-type { color: var(--chalk); font-size: clamp(16px, 2.2vw, 19px); }
body[dir="rtl"] .tw-about-copy p { font-family: var(--ar); }

/* -------------------------------------------------------------- reveals */
.tw-reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.tw-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .tw-reveal { opacity: 1 !important; transform: none !important; transition: none; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------- states */
.atl-empty { text-align: center; padding: clamp(40px, 8vw, 86px) 16px; }
.atl-empty-mark { display: block; width: 38px; height: 38px; margin: 0 auto 12px; border: 1px solid rgba(var(--rule-rgb), .2); position: relative; }
.atl-empty-mark::after { content: ""; position: absolute; inset: 12px; border-bottom: 1px solid var(--brass-dim); }
.atl-empty-mark-light { opacity: .4; }
.atl-empty-title { font: 500 20px/1.2 var(--disp); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; color: var(--chalk); }
.atl-empty-sub { font-size: 13px; color: var(--chalk-dim); margin: 0 0 20px; }

.atl-note { padding: 11px 14px; border-radius: 2px; font-size: 13px; border: 1px solid; margin-block: 12px; }
.atl-note-success { background: rgba(201, 169, 97, .09); border-color: var(--brass-dim); color: var(--brass); }
.atl-note-danger { background: rgba(226, 82, 59, .09); border-color: var(--mark); color: var(--mark); }

.atl-pagination, .atl-pager { display: flex; justify-content: center; gap: 5px; padding-top: 28px; }
.atl-pagination a, .atl-pagination span, .atl-pager a, .atl-pager span {
    display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 9px;
    border: 1px solid rgba(var(--rule-rgb), .18); border-radius: 2px;
    color: var(--chalk-dim); font: 400 12px/1 var(--ui); font-variant-numeric: tabular-nums;
}
.atl-pagination a:hover, .atl-pager a:hover,
.atl-pagination .active span, .atl-pager .active span,
.atl-pagination .page-item.active .page-link { background: var(--brass); border-color: var(--brass); color: var(--mat); }

/* ----------------------------------------------------------------- cart */
.atl-drawer, .offcanvas { background: var(--mat) !important; color: var(--chalk); border-inline-start: 1px solid rgba(var(--rule-rgb), .12) !important; }
.offcanvas-header { border-bottom: 1px solid rgba(var(--rule-rgb), .1); }
.atl-drawer-title, .offcanvas-title { font: 500 20px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--chalk); }
.btn-close { opacity: .6; }

.atl-cart-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(var(--rule-rgb), .1); }
.atl-cart-item-img { width: 62px; aspect-ratio: 3/4; object-fit: cover; background: var(--mat-2); flex: none; }
.atl-cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.atl-cart-item-name { font: 500 15px/1.2 var(--disp); letter-spacing: .04em; text-transform: uppercase; margin: 0; color: var(--chalk); }
.atl-cart-item-price, .atl-cart-item-sub { font-size: 12.5px; color: var(--chalk-dim); }
.atl-cart-item-actions { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.atl-qty-remove { background: none; border: 0; color: var(--mark); cursor: pointer; font-size: 11.5px; }
.atl-cart-line, .atl-cart-total { display: flex; align-items: center; justify-content: space-between; padding-block: 8px; font-size: 13px; color: var(--chalk-dim); }
.atl-cart-total { border-top: 1px solid rgba(var(--rule-rgb), .14); margin-top: 6px; padding-top: 14px; color: var(--chalk); }
.atl-cart-total-num { font: 600 18px/1 var(--ui); color: var(--brass); }
.atl-cart-empty { text-align: center; padding: 50px 16px; color: var(--chalk-dim); }
.atl-cart-empty-text { font: 500 18px/1.2 var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--chalk); }
.atl-cart-hint { font-size: 11.5px; color: var(--chalk-faint); line-height: 1.6; }
.atl-drawer-foot { border-top: 1px solid rgba(var(--rule-rgb), .12); padding-top: 14px; }

.atl-modal, .modal-content { background: var(--mat); border: 1px solid rgba(var(--rule-rgb), .14); border-radius: 2px; color: var(--chalk); }
.atl-modal-sub { font-size: 12.5px; color: var(--chalk-dim); }
.form-control, .form-select {
    background: var(--mat-2) !important;
    border: 1px solid rgba(var(--rule-rgb), .18) !important;
    border-radius: 2px !important;
    color: var(--chalk) !important;
    font-family: var(--ui);
    min-height: 44px;
}
.form-control:focus, .form-select:focus { border-color: var(--brass) !important; box-shadow: none !important; }
.form-control::placeholder { color: var(--chalk-faint) !important; }
.form-label { font: 500 10px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-faint); margin-bottom: 6px; }

/* --------------------------------------------------------------- footer */
.atl-footer { background: var(--mat-2); border-top: 1px solid rgba(var(--rule-rgb), .12); margin-top: clamp(28px, 5vw, 60px); }
.atl-footer-top { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; padding-block: clamp(28px, 5vw, 52px) 20px; }
.atl-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 380px; }
.atl-footer-wordmark { height: 30px; width: auto; align-self: flex-start; flex: none; }
.atl-footer-tag { font: 300 13px/1.6 var(--ui); color: var(--chalk-dim); margin: 0; }

.tw-foot-contact { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--chalk-dim); }
.tw-foot-contact a:hover { color: var(--brass); }
.tw-foot-h { font: 500 10px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--chalk-faint); margin-bottom: 3px; }

ul.atl-social { display: flex; align-items: center; gap: 7px; list-style: none; margin: 0; padding: 0; }
ul.atl-social a {
    display: inline-grid; place-items: center; width: 34px; height: 34px;
    border: 1px solid rgba(var(--rule-rgb), .18); border-radius: 2px;
    color: var(--chalk-dim); transition: all .3s var(--ease);
}
ul.atl-social a:hover { border-color: var(--brass); color: var(--brass); }

.atl-footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-block: 18px; border-top: 1px solid rgba(var(--rule-rgb), .1); }
.atl-footer-links a { font: 400 10.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-faint); }
.atl-footer-links a:hover { color: var(--brass); }
.atl-footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-block: 16px 26px; border-top: 1px solid rgba(var(--rule-rgb), .1); font-size: 11.5px; color: var(--chalk-faint); }
.atl-footer-base a:hover { color: var(--brass); }

/* ----------------------------------------------------------------- dock */
.atl-dock {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 35;
    display: none; align-items: stretch;
    background: rgba(var(--ground-rgb), .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(var(--rule-rgb), .12);
    padding-bottom: env(safe-area-inset-bottom);
}
.atl-dock a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 4px; font: 500 9px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-faint); }
.atl-dock a i { font-size: 18px; }
.atl-dock a.is-active { color: var(--brass); }

.atl-loader { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: var(--mat); }
.atl-loader::after { content: ""; width: 30px; height: 30px; border: 1px solid rgba(var(--rule-rgb), .18); border-top-color: var(--brass); border-radius: 99px; animation: tw-spin .85s linear infinite; }
@keyframes tw-spin { to { transform: rotate(360deg); } }

.atl-policy { padding-block: clamp(16px, 3vw, 32px) 20px; max-width: 780px; }
.atl-policy .atl-display { font-size: clamp(23px, 6vw, 38px); margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(var(--rule-rgb), .14); white-space: normal; }

#pwaModal { z-index: 30; }

/* ------------------------------------------------------------ breakpoints */
@media (min-width: 700px) {
    .atl-grid, .atl-prodrail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .atl-tilerail, .atl-tilegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .atl-card-body { padding: 13px 13px 15px; }
    .atl-product { grid-template-columns: 1.05fr .95fr; }
    .tw-about { grid-template-columns: .85fr 1.15fr; }
    .atl-thumb { flex-basis: 74px; }
}

@media (min-width: 1080px) {
    .atl-grid, .atl-prodrail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .atl-tilerail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .atl-tilegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .atl-card-body { padding: 14px 14px 16px; }
}

@media (max-width: 699px) {
    .atl-dock { display: flex; }
    .atl-footer { padding-bottom: 58px; }
    .tw-spec { border-inline-start: 0; padding-inline-start: 0; }
}

@media print { .atl-topbar, .atl-footer, .atl-dock, .tw-voices-band { display: none; } }

/* ==========================================================================
   Mobile ergonomics and grid containment
   ========================================================================== */

/* A grid item's default min-width is auto, so a wide image inside one pushes the
   whole column past the viewport. Twéblossom's gallery overflowed 390px by 12px
   for exactly this reason. */
.atl-product > *,
.atl-gallery,
.atl-product-info,
.tw-about > *,
.atl-card,
.atl-tile { min-width: 0; }

.atl-gallery { display: block; width: 100%; }
.atl-gallery img, .atl-thumb-rail { max-width: 100%; }

/* Touch targets. The visible mark stays its designed size; the hit area grows
   around it, so nothing shifts visually but everything is reachable with a thumb. */
.atl-brand {
    padding-block: 11px;
    padding-inline-end: 10px;
    margin-inline-start: -2px;
}

.atl-sechead-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline-start: 10px;
}

.atl-footer-links a,
.atl-footer-base a,
.tw-foot-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}

.atl-crumb a { display: inline-flex; align-items: center; min-height: 34px; }

/* The rule's flex line must not be squeezed out by the taller link. */
.atl-sechead-row { align-items: center; }

@media (max-width: 699px) {
    .atl-footer-links { gap: 0 18px; }
    .atl-footer-base { padding-block: 8px 22px; }
    /* Hero actions are the primary path on a phone: full width, thumb height. */
    .tw-hero-actions .atl-btn { flex: 1 1 auto; min-height: 50px; }
}

/* ==========================================================================
   Scarcity, the archive, and the voices frame
   ========================================================================== */

/* Scarcity is read from stock, never typed by hand. Brass because it is an
   invitation; the red pen is reserved for what is already gone. */
.tw-last {
    position: absolute;
    top: 9px;
    inset-inline-end: 9px;
    z-index: 2;
    padding: 4px 8px;
    background: var(--brass);
    color: var(--mat);
    font: 600 9px/1 var(--ui);
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

body[dir="rtl"] .tw-last { letter-spacing: 0; }

/* A piece that has sold out is still part of the collection: she can open it,
   read it and see what she missed. It is drained of colour so the grid never
   mistakes it for something buyable. */
.tw-gone .atl-card-media img { filter: grayscale(1) contrast(.92); opacity: .72; }
.tw-gone:hover .atl-card-media img { filter: grayscale(.85) contrast(.95); opacity: .82; }
.tw-gone .atl-card-name, .tw-gone .atl-price { color: var(--chalk-faint); }
.tw-gone .atl-price { text-decoration: line-through; text-decoration-color: var(--mark); }

.tw-gone .atl-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(var(--ground-rgb), .28);
    pointer-events: none;
}

/* Product page, sold out. */
.tw-sold-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 15px;
    margin-block: 4px 16px;
    background: rgba(168, 50, 27, .07);
    border: 1px solid var(--mark);
    border-radius: 2px;
}

.tw-sold-note strong {
    display: block;
    font: 600 11px/1.3 var(--ui);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mark);
    margin-bottom: 4px;
}

body[dir="rtl"] .tw-sold-note strong { letter-spacing: 0; }
.tw-sold-note p { margin: 0; font: 300 13px/1.6 var(--ui); color: var(--chalk-dim); }
body[dir="rtl"] .tw-sold-note p { font-family: var(--ar); }
.tw-sold-note i { color: var(--mark); font-size: 17px; flex: none; margin-top: 1px; }

.tw-gone-hero .atl-gallery-main img { filter: grayscale(1) contrast(.94); }

/* Voices: the screenshots differ in ratio by nearly two to one, so each sits
   centred on both axes inside one fixed frame and is never cropped. */
.tw-v {
    flex: 0 0 clamp(200px, 62vw, 290px);
    height: clamp(240px, 46vw, 330px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mat);
    border: 1px solid rgba(var(--rule-rgb), .13);
    padding: 8px;
    overflow: hidden;
}

.tw-v img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: auto;
    pointer-events: none;
}

/* ==========================================================================
   Service ticker
   --------------------------------------------------------------------------
   The track carries the promises TWICE so the loop wraps without a seam. That
   only reads as one running line while the marquee is actually clipped and
   animated; when the relight dropped these rules the two copies rendered as
   duplicated static text. Both halves are aria-hidden in the markup, so the
   repetition is never announced.
   ========================================================================== */
.tw-ticker {
    position: relative;
    overflow: hidden;
    background: var(--chalk);
    color: var(--mat);
    border-bottom: 1px solid rgba(var(--rule-rgb), .18);
}

.tw-ticker-track {
    display: flex;
    width: max-content;
    animation: tw-marquee 46s linear infinite;
}

.tw-ticker-track span {
    flex: none;
    padding: 9px 26px;
    font: 500 10px/1.4 var(--ui);
    letter-spacing: .22em;
    text-transform: uppercase;
    white-space: nowrap;
}

body[dir="rtl"] .tw-ticker-track span {
    font-family: var(--ar);
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
}

.tw-ticker-track span::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-inline-start: 26px;
    background: var(--brass-dim);
    vertical-align: middle;
}

.tw-ticker:hover .tw-ticker-track { animation-play-state: paused; }

@keyframes tw-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* In RTL a flex row lays out from the right, so the track already hangs to the LEFT
   of the viewport with its right edge at the container edge. Translating negative
   from there drags it entirely off screen (measured: left edge at -2086px, every
   span invisible). Reversing the direction does not help, because both ends of the
   original keyframe are <= 0. RTL therefore travels the other way, 0 -> +50%, which
   is still "onward" in reading order because the set is duplicated. */
@keyframes tw-marquee-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
}

body[dir="rtl"] .tw-ticker-track {
    animation-name: tw-marquee-rtl;
    animation-direction: normal;
}

@media (prefers-reduced-motion: reduce) {
    /* No animation means no seamless wrap, so only one set may be visible. */
    .tw-ticker-track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
    .tw-ticker-track span:nth-child(n+5) { display: none; }
}

/* The generic trust strip repeated these promises in vaguer words; the ticker
   states the real ones (60 EGP Cairo, 3-day exchange), so the strip goes. */
.atl-trust { display: none; }

/* ==========================================================================
   The living wordmark
   --------------------------------------------------------------------------
   The PNG contributes only its alpha; everything visible is painted behind it.
   A brand-gold field, a drift of small warm motes, and one slow sweep that
   crosses the lettering every twelve seconds. Because it is a mask, the light
   is INSIDE the letterforms and never leaks into the bar around them.

   A flex column stretches its children to full width by default, which is what
   was pulling the footer mark from 96px to 197px while its height stayed put.
   Hence align-self: flex-start above, not a new width.
   ========================================================================== */
.tw-mark {
    display: block;
    /* 704x190 => 3.705. Twice the old 22px. */
    height: 44px;
    width: 163px;
    flex: none;

    -webkit-mask-image: var(--tw-mark);
    mask-image: var(--tw-mark);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    background-color: var(--brass);
    background-image:
        /* the sweep */
        linear-gradient(100deg,
            transparent 38%,
            rgba(255, 246, 214, .0) 44%,
            rgba(255, 248, 224, .95) 50%,
            rgba(255, 246, 214, .0) 56%,
            transparent 62%),
        /* motes, three sizes so the drift never reads as one repeating row */
        radial-gradient(1.4px 1.4px at 12% 34%, rgba(255, 250, 228, .95), transparent 60%),
        radial-gradient(1.1px 1.1px at 31% 68%, rgba(255, 244, 206, .85), transparent 60%),
        radial-gradient(1.7px 1.7px at 54% 22%, rgba(255, 252, 236, .95), transparent 60%),
        radial-gradient(1.1px 1.1px at 68% 74%, rgba(255, 243, 202, .8), transparent 60%),
        radial-gradient(1.5px 1.5px at 83% 40%, rgba(255, 250, 228, .9), transparent 60%),
        radial-gradient(1.2px 1.2px at 94% 62%, rgba(255, 246, 214, .85), transparent 60%),
        /* the ground: deeper at the feet, brighter across the middle */
        linear-gradient(175deg, #a98436 0%, var(--brass) 46%, #6b5219 100%);
    background-size: 260% 100%, auto, auto, auto, auto, auto, auto, auto;
    background-position: -60% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat;

    animation: tw-mark-sweep 12s cubic-bezier(.5, 0, .5, 1) infinite,
               tw-mark-drift 26s ease-in-out infinite alternate;
}

@keyframes tw-mark-sweep {
    0%, 62% { background-position-x: -60%, 0, 0, 0, 0, 0, 0, 0; }
    100%    { background-position-x: 160%, 0, 0, 0, 0, 0, 0, 0; }
}

/* The motes rise a little and settle, so the fill breathes rather than scrolls. */
@keyframes tw-mark-drift {
    from { background-position-y: 0, 0%, 0%, 0%, 0%, 0%, 0%, 0; }
    to   { background-position-y: 0, 22%, -18%, 14%, -22%, 18%, -14%, 0; }
}

.atl-brand:hover .tw-mark { animation-duration: 4.5s, 26s; }

@media (max-width: 699px) {
    .tw-mark { height: 34px; width: 126px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Still gold, still theirs, simply at rest. */
    .tw-mark { animation: none; background-image: linear-gradient(175deg, #a98436 0%, var(--brass) 46%, #6b5219 100%); }
}

/* Safari before 15.4 and any engine without mask support would show a gold
   rectangle, which is worse than no effect at all. */
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
    .tw-mark {
        background: none;
        -webkit-mask: none;
        mask: none;
        background-image: var(--tw-mark);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}