/*
  Home — an editorial brand page.

  Rhythm: the page alternates between the INK ground (brand moments: hero, manifesto, Academy) and
  the PAPER ground (things you read and act on: the drop, the process, the mold, Nathy, social).
  That alternation, plus photographic scale, is what carries the premium feel — not borders, not
  cards, not shadows.

  Nothing here uses a generic three-up feature-card row, and nothing uses a dashed empty box.
*/

/* =========================================================================
   1. HERO — full-bleed photograph with offset editorial type
   ========================================================================= */
.hero {
    position: relative;
    background: var(--cg-black);
    color: var(--color-on-deep);
    overflow: hidden;
    isolation: isolate;
}

.hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: -2;
}

.hero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* Mobile crop keeps the piece in the upper half so the type below never covers it. */
    object-position: 50% 22%;
}

/* A vertical scrim so white type stays legible over any photograph without dimming the piece. */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(16, 14, 14, 0.55) 0%,
        rgba(16, 14, 14, 0.30) 32%,
        rgba(16, 14, 14, 0.82) 78%,
        rgba(16, 14, 14, 0.96) 100%);
}

.hero__inner {
    position: relative;
    display: grid;
    align-content: end;
    justify-items: start;
    gap: var(--space-lg);
    min-block-size: min(88svh, 50rem);
    padding-block: var(--space-3xl) var(--space-2xl);
}

/* The headline carries the page: set WIDE and HEAVY, at a scale no template would dare, so the first
   thing a visitor meets is a sentence with the weight of a finished piece. */
.hero__title {
    font-size: clamp(2.7rem, 1.2rem + 6vw, 6.9rem);
    font-stretch: 116%;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.045em;
    color: var(--color-on-deep-strong);
    max-inline-size: 11ch;
    text-wrap: balance;
    margin: 0;
    /* The headline sits over the piece; a soft shadow keeps it readable wherever the photograph is
       bright, without dimming the whole image with a heavier scrim. */
    text-shadow: 0 2px 24px rgba(10, 8, 8, 0.5);
}

.hero__eyebrow { color: var(--color-on-deep); margin: 0; }

.hero__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-on-deep);
    max-inline-size: 40ch;
    margin: 0;
}

.button__arrow { transition: transform var(--transition-base); }
.button:hover .button__arrow { transform: translateX(4px); }

/* The opening arrives in order — eyebrow, headline, lead, actions — as the page first paints. Pure
   CSS on purpose: it needs no script, so it can never flash (a script-armed version would paint the
   page, then hide it, then show it), and an animation always ends on its visible frame. While the
   branded ident is covering the page it waits, and plays the moment the ident lifts. */
@media (prefers-reduced-motion: no-preference) {
    .hero__inner > * { animation: cg-hero-rise 1100ms var(--ease-entrance) both; }
    .hero__inner > :nth-child(2) { animation-delay: 80ms; }
    .hero__inner > :nth-child(3) { animation-delay: 160ms; }
    .hero__inner > :nth-child(4) { animation-delay: 300ms; }
    .hero__inner > :nth-child(5) { animation-delay: 420ms; }
    [data-brand-intro="run"] .hero__inner > * { animation-play-state: paused; }
}

/* The ember glow that follows the pointer (interactions.js), between the photograph and the type. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(36rem circle at var(--gx, 30%) var(--gy, 60%), var(--kiln-glow), transparent 66%);
    opacity: 0;
    transition: opacity 700ms var(--ease-out);
}

.hero[data-glow="on"]::after { opacity: 0.45; }

@keyframes cg-hero-rise {
    from { opacity: 0; transform: translateY(32px); clip-path: inset(0 0 100% 0); }
    to { opacity: 1; transform: none; clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }
}

/* ---- The ribbon at the foot of the opening ------------------------------------------------------
   Four short phrases run along the bottom edge like the ribbon under a finished piece, separated by
   the brand's red. Two identical runs slide by half the track, so the loop never shows a seam. */
.hero__ticker {
    position: relative;
    overflow: hidden;
    border-block-start: 1px solid var(--color-on-deep-border);
    /* Near-solid rather than frosted: a backdrop blur under a moving strip is recomputed every frame. */
    background: color-mix(in srgb, var(--cg-black) 88%, transparent);
}

.hero__ticker-track {
    display: flex;
    inline-size: max-content;
    animation: cg-ticker 46s linear infinite;
}

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

.hero__ticker-run {
    display: flex;
    flex: none;
    margin: 0;
    max-inline-size: none;
}

.hero__ticker-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-md) 0 var(--space-md) var(--space-xl);
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-black);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-on-deep-strong);
}

/* A drop of glaze between phrases, in the red. */
.hero__ticker-item::after {
    content: "";
    inline-size: 0.62em;
    block-size: 0.62em;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--cg-red-on-dark);
}

.hero__ticker-item:nth-child(even) {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-on-deep);
}

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

@media (prefers-reduced-motion: reduce) {
    .hero__ticker-track { animation: none; }
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-xs);
}

/* Three red dots from the footer ornament, sitting above the headline. The brand's punctuation. */
.hero__dots {
    display: flex;
    gap: var(--space-xs);
}

.hero__dots span {
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--cg-red-on-dark);
}

@media (min-width: 62rem) {
    /* Push the piece to the right so the type column sits on the darker half of the frame. */
    .hero__media img { object-position: 74% 45%; }

    .hero__inner {
        min-block-size: min(84svh, 52rem);
        padding-block: var(--space-3xl) var(--space-3xl);
    }

    .hero__media::after {
        background: linear-gradient(96deg,
            rgba(16, 14, 14, 0.96) 0%,
            rgba(16, 14, 14, 0.88) 34%,
            rgba(16, 14, 14, 0.42) 62%,
            rgba(16, 14, 14, 0.30) 100%);
    }
}

/* =========================================================================
   2. CURRENT DROP

   The drop shelf uses the shared shelf from product-card.css and defines nothing of its own.

   It used to carry a private three-column grid plus a "few products" variant that widened the tracks
   to two — which is how the Home's shop moment ended up in a different geometry from the Store's, with
   its products drifting apart whenever the catalogue was small. The Home samples the shop, so it must
   look like the shop.
   ========================================================================= */

/* =========================================================================
   3. MANIFESTO — one statement, at scale
   ========================================================================= */
.manifesto__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

/* The statement column is a grid so the eyebrow, headline and body can never collide — a headline
   this large has deep descenders and margin collapsing is not trustworthy here. */
.manifesto__copy {
    display: grid;
    gap: var(--space-lg);
    justify-items: start;
}

.manifesto__copy .eyebrow { margin: 0; }

.manifesto__statement {
    font-size: var(--text-4xl);
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
    color: var(--color-on-deep-strong);
    max-inline-size: 18ch;
    margin: 0;
}

.manifesto__body {
    color: var(--color-on-deep);
    font-size: var(--text-lg);
    max-inline-size: var(--measure-narrow);
    margin: 0;
}

.manifesto__marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
    margin: 0;
}

.manifesto__marks-label {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-on-deep-muted);
    font-weight: var(--weight-semibold);
}

.manifesto__swatches { display: flex; gap: var(--space-xs); }

/* Small glaze chips sampled from the real pieces — the "colored porcelain" claim, shown not told. */
.manifesto__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-on-deep-muted);
}

.manifesto__chip::before {
    content: "";
    inline-size: 0.85rem;
    block-size: 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--chip, var(--clay-bone));
}

.manifesto__chip--bone::before { background: var(--clay-bone); }
.manifesto__chip--celadon::before { background: var(--clay-celadon); }
.manifesto__chip--ember::before { background: var(--clay-ember); }
.manifesto__chip--olive::before { background: var(--clay-olive); }
.manifesto__chip--black::before { background: #1d1a19; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }

/* The mascot is the section's punctuation: large, cropped by the section edge, unmistakably the
   brand. It is decorative only — the statement carries the meaning. */
.manifesto__mascot {
    inline-size: clamp(7rem, 26vw, 16rem);
    block-size: auto;
    justify-self: start;
}

@media (min-width: 62rem) {
    .manifesto__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-3xl); }
    .manifesto__mascot { justify-self: center; }
}

/* =========================================================================
   4. CREATION PROCESS — a numbered editorial sequence
   The studio has no process photography approved for publication yet, so the sequence is carried by
   type at scale (large stage numerals) plus one piece of Nathy's own artwork. No stock imagery, no
   icon cards, and an honest note rather than an invented photo set.
   ========================================================================= */
.craft__layout {
    display: grid;
    gap: var(--space-2xl);
}

.craft__figure { margin: 0; }

.craft__figure img {
    inline-size: 100%;
    aspect-ratio: var(--ratio-portrait);
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

.craft__caption {
    margin-block-start: var(--space-sm);
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    max-inline-size: 34ch;
}

.craft__steps {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: craft;
}

.craft__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
    padding-block: var(--space-lg);
    border-block-start: 1px solid var(--color-border);
}

.craft__step:last-child { border-block-end: 1px solid var(--color-border); }

.craft__num {
    counter-increment: craft;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: var(--tracking-display);
    color: var(--color-accent);
    min-inline-size: 2.5ch;
    font-variant-numeric: tabular-nums;
}

.craft__num::before { content: counter(craft, decimal-leading-zero); }

.craft__step-title {
    font-size: var(--text-lg);
    margin: 0 0 var(--space-2xs);
}

.craft__step-body {
    color: var(--color-ink-muted);
    margin: 0;
    max-inline-size: var(--measure);
}

.craft__note {
    margin-block-start: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    max-inline-size: var(--measure-narrow);
}

@media (min-width: 62rem) {
    .craft__layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-3xl); }
    .craft__figure { position: sticky; top: calc(var(--header-height) + var(--space-lg)); }
}

/* =========================================================================
   5/6/7. FEATURE — the shared split block used by Mold Base, Academy and Nathy.
   Deliberately asymmetric: the media column is wider than the text column and the two overlap
   slightly on desktop, so the page never settles into a 50/50 grid.
   ========================================================================= */
.feature__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

.feature__media {
    margin: 0;
    position: relative;
}

.feature__media img {
    inline-size: 100%;
    aspect-ratio: var(--ratio-portrait);
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

.feature__media--tall img { aspect-ratio: var(--ratio-tall); }
.feature__media--wide img { aspect-ratio: var(--ratio-editorial); }

.feature__text { display: grid; gap: var(--space-md); align-content: start; }

.feature__title { font-size: var(--text-3xl); letter-spacing: var(--tracking-display); margin: 0; }
.feature__body { color: var(--color-ink-muted); font-size: var(--text-lg); }
.on-ink .feature__body { color: var(--color-on-deep); }

.feature__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature__fact {
    display: grid;
    gap: 2px;
}

.feature__fact dt,
.feature__fact-label {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    font-weight: var(--weight-semibold);
}

.on-ink .feature__fact-label { color: var(--color-on-deep-muted); }

.feature__fact-value {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-strong);
}

.on-ink .feature__fact-value { color: var(--color-on-deep-strong); }

.feature__disclosure {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    border-inline-start: 3px solid var(--color-accent);
    padding-inline-start: var(--space-md);
    max-inline-size: var(--measure);
}

.on-ink .feature__disclosure {
    color: var(--color-on-deep-muted);
    border-inline-start-color: var(--color-accent-on-deep);
}

@media (min-width: 62rem) {
    .feature__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: var(--space-3xl);
    }

    .feature--reverse .feature__media { order: 2; }
}

/* =========================================================================
   8. SOCIAL / ATELIER MOMENT
   ========================================================================= */
.social__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

.social__media { margin: 0; }

.social__media img {
    inline-size: 100%;
    aspect-ratio: var(--ratio-editorial);
    object-fit: cover;
    object-position: center 30%;
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

@media (min-width: 62rem) {
    .social__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

/* =========================================================================
   9. THE MONTHLY DROP — countdown and the three states

   The hardest thing to get right here is TONE. Every convention for "a sale is
   coming" belongs to a kind of shop Ceramigeek is not: the red banner, the
   flashing digits, the pulsing border, the word HURRY. None of them appear.

   The urgency is real and therefore does not need to be performed — these are
   made one at a time, there are a handful, and they open on a date. So the band
   is the ink ground with editorial type at scale, and the countdown is set in
   the display face like a headline rather than styled like a timer.
   ========================================================================= */
.release__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

/* justify-items keeps the copy at the container's left edge. Without it the grid stretches each
   child to the full column, and a one-column band (a drop with no cover yet) ended up with its
   heading centred while the product cards under it stayed left — two alignments in one band. */
.release__copy {
    display: grid;
    gap: var(--space-md);
    align-content: start;
    justify-items: start;
}

.release__title {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    color: var(--color-on-deep-strong);
    margin: 0;
    text-wrap: balance;
}

/* The collection's own name, from the collection. Set apart from the editorial
   copy because it is live data, not a sentence someone wrote on this page. */
/* THE COLLECTION'S NAME IS THE HEADLINE OF THIS BAND.
   It used to be one quiet red line under the title — the owner asked for the theme to carry real
   weight (PPT slide 2), sketching "BOOK BOYFRIENDS" as a solid block. The name is catalog data and
   changes every month, so the emphasis lives here in the layout and never in the copy: whatever she
   types on the collection is what gets the treatment. */
/* THE COLLECTION THEME, AS THE BADGE THE OWNER DREW.
   First attempt made this bigger red type. Her correction (PPT slide 2, follow-up): "BOOK BOYFRIENDS
   Should look like that, a button not only bigger letters" — her mock-up is a filled dark-red pill
   with the theme in white, sitting under the heading.

   Deliberately NOT a <button> or a link. There is nowhere for it to go: the collection has not opened
   yet, and a control that looks pressable and then does nothing is worse than a label. This is the
   badge from her drawing, rendered as the label it actually is.

   The fill is --cg-red-deep, the deeper red the tokens describe as sampled from the brand artwork —
   the closest brand-native match to the colour in her slide, and dark enough for white to clear AA on
   the ink ground. `fit-content` keeps the pill hugging the theme name instead of stretching the
   column, while it stays a block so the surrounding rhythm is unchanged. */
.release__name {
    inline-size: fit-content;
    max-inline-size: 100%;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-on-accent);
    background: var(--color-terracotta);
    padding: 0.62em 1.15em;
    border-radius: var(--radius-lg);
    margin: var(--space-sm) 0 var(--space-md);
    /* A long theme name must wrap rather than escape the column. */
    overflow-wrap: anywhere;
}

.release__body {
    color: var(--color-on-deep);
    font-size: var(--text-lg);
    max-inline-size: 46ch;
    margin: 0;
}

.release__when { display: grid; gap: 0.15rem; margin-block-start: var(--space-sm); }

.release__date {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.1;
    letter-spacing: var(--tracking-display);
    color: var(--color-on-deep-strong);
    text-transform: uppercase;
}

.release__date-sep { color: var(--color-accent-on-deep); }

.release__zone,
.release__local {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-on-deep-muted);
}

.release__local-value { color: var(--color-on-deep); }

/* The `hidden` attribute is UA-level `display: none`, and ANY author display rule beats it — so the
   two rules above would have shown an empty "no seu horário" line to every visitor whose browser
   never filled it in. Restoring it here rather than dropping the flex layout, because the line does
   need to be a flex row once it has a value. */
.release__local[hidden],
.release__opening[hidden] { display: none; }

/* The countdown itself. Tabular figures so the seconds do not shift the layout
   sideways every time a 1 becomes a 4 — the single most common way a countdown
   makes a page feel cheap. */
.countdown {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-block-start: var(--space-md);
    padding-block: var(--space-md);
    border-block: 1px solid var(--color-on-deep-border);
}

.countdown__unit {
    display: grid;
    gap: 0.15rem;
    min-inline-size: 3.5rem;
}

.countdown__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-on-deep-strong);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.countdown__label {
    font-size: var(--text-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-on-deep-muted);
}

.release__opening {
    margin: var(--space-md) 0 0;
    font-size: var(--text-lg);
    color: var(--color-accent-on-deep);
}

.release__note {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-on-deep-muted);
    max-inline-size: 44ch;
}


/* ---- The waiting list -------------------------------------------------------------------------
   Sits directly under the "peças únicas, quantidades limitadas" note, on the same ink ground as the
   countdown it belongs to. Deliberately quiet: it is an offer, not the band's headline. */

.release__reminder {
    margin-block-start: var(--space-lg);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid rgba(255, 255, 255, 0.14);
    max-inline-size: 44ch;
}

.release__reminder-intro {
    margin: 0 0 var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-on-deep-muted);
}

.release__reminder-form {
    display: grid;
    gap: var(--space-sm);
}

.release__reminder-field {
    display: grid;
    gap: 0.3rem;
}

.release__reminder-label {
    font-size: var(--text-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-on-deep-muted);
}

.release__reminder-field input {
    inline-size: 100%;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-on-deep);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
}

.release__reminder-field input::placeholder { color: var(--color-on-deep-muted); }

.release__reminder-field input:focus-visible {
    outline: 2px solid var(--color-accent-on-deep);
    outline-offset: 2px;
}

.release__reminder-privacy {
    margin: var(--space-sm) 0 0;
    font-size: var(--text-2xs);
    line-height: 1.5;
    color: var(--color-on-deep-muted);
}

.release__reminder-status {
    margin: var(--space-sm) 0 0;
    font-size: var(--text-sm);
    color: var(--color-accent-on-deep);
}

/* [hidden] alone loses to the author `display` rules above, which is how an empty status line reaches
   a page. Stated explicitly so it cannot. */
.release__reminder-status[hidden],
.release__reminder-form[hidden] { display: none; }

.release__reminder-status[data-ok="false"] { color: var(--color-on-deep); }

/* Two fields side by side once there is room; stacked on a phone, where a half-width e-mail input is
   a typing error waiting to happen. */
@media (min-width: 40rem) {
    .release__reminder-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .release__reminder-form > button { grid-column: 1 / -1; }

    .release__reminder-form > button { justify-self: start; }
}
.release__media { margin: 0; }

/* The single-cover fallback, shown when a drop has a hero image and no gallery. Same treatment as the
   carousel for the same reason: this was `cover` inside a tall frame, which is exactly the crop the
   owner objected to — it just happened to be on the path with no gallery, so it escaped the first
   pass. A drop should not start cropping its photograph the moment the gallery is emptied. */
.release__media img {
    inline-size: 100%;
    aspect-ratio: var(--ratio-square);
    object-fit: contain;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
}


/* ---- The drop's photographs ---------------------------------------------------------------------
   A scroll-snap track. Swiping works on a phone with no JavaScript — the browser already knows how to
   do this, and a script that reimplements it only adds ways for it to break. */

/* ONE PHOTOGRAPH AT A TIME, FILLING THE FRAME.
   This used to be `grid-auto-columns: 85%` with the track bleeding past its own padding — the common
   "peek" affordance, where a sliver of the next slide hints that the row scrolls. The owner's reading
   of it (PPT follow-up): "It should show ONE FULL PICTURE, not part of the next. Use all the space for
   the picture of the moment." On the wide column that peek is not a hint, it is a second photograph
   sliced down the middle, sitting right next to the one you are meant to be looking at.

   So a column is now exactly the width of the track: the current photograph gets the whole space and
   its neighbours sit fully off-screen. The arrows and dots already say the row scrolls, which is what
   the peek was there to do. Swipe and trackpad scrolling are unaffected — this is still the same
   scroll-snap row, just snapping a full frame at a time. */
.release__gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.release__photo {
    margin: 0;
    scroll-snap-align: center;
}

/* THE WHOLE PHOTOGRAPH, ALWAYS.
   These were `object-fit: cover`, which fills the frame by cropping — and on a tall frame that means
   slicing the middle out of a mug. The owner's words (PPT slide 2): "estão ficando cortadas no meio,
   dando aspecto feio. As fotos precisam ser mostradas inteiras."

   So the frame keeps a fixed size — the carousel must not jump as you page through photographs of
   different shapes — and the image is fitted INSIDE it with `contain`. The letterboxing that leaves
   is filled by a soft panel rather than a hard edge, so a portrait and a landscape shot sit in the
   same visual box without either being cut.

   The frame is SQUARE, not tall. It was `--ratio-tall` (2/3), and measured against the real gallery
   that wasted most of the space: her photographs are 576x576 and 576x356, so `contain` inside a
   portrait box filled only 67% and 41% of it — the rest was empty bar. Square fills 100% and 62% of
   the same frame with the same photographs and still crops nothing, which is what "use all the space
   for the picture of the moment" asks for. Square is also the best single fixed ratio available here:
   any frame taller or wider than the content loses area at both ends of the range. */
.release__photo img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--ratio-square);
    object-fit: contain;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
}

/* The frame takes the shape of the drop's photographs (set in _release.cshtml from their sizes), and a
   photo of that shape fills it exactly: no dark bars beside a portrait mug (owner, 02/10/2026). A photo
   of another shape keeps `contain` above — shown whole, never cut. */
.release__gallery--tall .release__photo img { aspect-ratio: 3 / 4; }
.release__gallery--wide .release__photo img { aspect-ratio: 4 / 3; }
.release__photo--fill img { object-fit: cover; background: none; }

.release__photo-caption {
    margin-block-start: 0.5rem;
    font-size: var(--text-2xs);
    color: var(--color-on-deep-muted);
}

/* One photograph is not a carousel. It fills the column like the cover it effectively is, and does
   not snap, because there is nothing to snap between. */
.release__gallery[data-count="1"] {
    grid-auto-columns: minmax(0, 1fr);
    scroll-snap-type: none;
    overflow-x: visible;
}


/* ---- Carousel controls ---------------------------------------------------------------------------
   Arrows and dots over the scroll-snap track. Discreet on purpose: the photographs are the content,
   and a drop announcement should not look like a component library. Hidden until the script arms
   them, so a visitor without JavaScript never sees an arrow that cannot move. */

.release__carousel { display: grid; gap: var(--space-sm); }

.release__carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.release__carousel-nav[hidden] { display: none; }

.release__arrow {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-on-deep);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease;
}

.release__arrow:hover:not(:disabled) {
    border-color: var(--color-accent-on-deep);
    color: var(--color-accent-on-deep);
}

.release__arrow:focus-visible {
    outline: 2px solid var(--color-accent-on-deep);
    outline-offset: 2px;
}

/* Disabled at the ends rather than hidden: a control that vanishes moves the two beside it, and the
   row jitters every time you reach an edge. */
.release__arrow:disabled { opacity: 0.3; cursor: default; }

.release__dots { display: flex; align-items: center; gap: 0.5rem; }

.release__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}

.release__dot.is-active {
    background: var(--color-accent-on-deep);
    transform: scale(1.35);
}

.release__dot:focus-visible {
    outline: 2px solid var(--color-accent-on-deep);
    outline-offset: 3px;
}

/* The track itself is focusable for keyboard paging, but a permanent focus ring around a row of
   photographs is noise — only show it when focus arrived from the keyboard. */
.release__gallery:focus { outline: none; }

.release__gallery:focus-visible {
    outline: 2px solid var(--color-accent-on-deep);
    outline-offset: 4px;
}

/* Once the controls are running, the scrollbar is redundant furniture under the photographs. */
[data-carousel-armed] .release__gallery { scrollbar-width: none; }
[data-carousel-armed] .release__gallery::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
    .release__dot,
    .release__arrow { transition: none; }
}
/* The Instagram invite: a card at the top of the photo column, with a real button. */
.release__aside {
    display: grid;
    gap: var(--space-lg);
    align-content: start;
    align-self: start;
    min-inline-size: 0;
}

/* No card and no photos: no empty column (and no extra gap under the copy). */
.release__aside:not(:has(*)) { display: none; }

.release__social {
    position: relative;
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    border: 1px solid color-mix(in srgb, var(--cg-red-on-dark) 70%, transparent);
    border-radius: var(--radius-lg);
    color: var(--color-on-deep);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--cg-red) 24%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--cg-red) 10%, var(--cg-black)) 0%, var(--cg-black) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cg-red) 18%, transparent),
        0 0 28px color-mix(in srgb, var(--cg-red) 38%, transparent),
        inset 0 0 24px color-mix(in srgb, var(--cg-red) 12%, transparent);
    overflow: hidden;
}

.release__social-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md);
}

.release__social-glyph {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cg-red) 55%, transparent));
}

.release__social-spark {
    inline-size: 4rem;
    block-size: auto;
    align-self: end;
    color: var(--cg-red-on-dark);
    opacity: 0.9;
}

.release__social-heading { display: grid; gap: var(--space-2xs); min-inline-size: 0; }

.release__social-eyebrow {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cg-red-on-dark);
}

.release__social-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem);
    font-weight: var(--weight-bold);
    font-stretch: condensed;
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-on-deep);
}

.release__social-accent { color: var(--cg-red-on-dark); }

.release__social-text {
    margin: 0;
    max-inline-size: 46ch;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-on-deep-muted);
}

.release__social-cta {
    inline-size: 100%;
    border-radius: var(--radius-md);
    justify-content: center;
    gap: var(--space-xs);
}

.release__social-arrow { font-size: 1.1em; line-height: 1; }

.release__social-handle {
    margin: 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-on-deep-muted);
}

@media (max-width: 30rem) {
    .release__social-head { grid-template-columns: auto minmax(0, 1fr); }
    .release__social-spark { display: none; }
    .release__social-glyph { inline-size: 2.75rem; block-size: 2.75rem; }
}

@media (min-width: 62rem) {
    /* Beside the copy, the track is one column wide and scrolls within it — the countdown keeps its
       place on the left rather than being pushed down by a row of photographs.

       There were two more rules here: 46% at tablet width, so two photographs shared the row, and 82%
       here, so the next one peeked in. Both are gone. One photograph occupies the whole track at every
       width, because that is the instruction and because a half-visible mug beside the one you are
       looking at reads as a rendering fault, not as an affordance. The arrows and dots carry the
       "there is more here" signal on their own. */
    .release__gallery { align-self: start; }
}
/* The pieces of an open drop sit under the announcement, on the same ink ground. */
.release .product-grid { margin-block-start: var(--space-xl); }

/* Live and sold-out states carry no countdown, so the copy can take the full
   measure rather than sharing the row with a photograph. */
.release--soldOut .release__body { max-inline-size: 52ch; }

@media (min-width: 62rem) {
    .release__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: var(--space-3xl);
    }

    /* A drop with no cover assigned yet gets one column instead of a column of copy beside half a
       screen of nothing. The owner prepares a collection before its photograph exists, so this is the
       normal state of a drop for most of the month, not an edge case. */
    /* Only when the right column is truly empty. The Instagram card on its own keeps its column: a
       drop without photos yet must not push the card under the countdown (September 2026). */
    .release__inner:not(:has(.release__aside > *)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .countdown { gap: var(--space-xl); }
    .countdown__unit { min-inline-size: 4.5rem; }
}

/* =========================================================================
   10. DIRETO DO ATELIÊ — a mural, not another wall of text

   Five images in an asymmetric grid: one tall anchor and four smaller tiles
   around it. Asymmetric on purpose — five equal squares read as a product grid,
   and this band is meant to read as a pinboard.
   ========================================================================= */
.atelier__head {
    display: grid;
    gap: var(--space-sm);
    justify-items: start;
    max-inline-size: 52ch;
    margin-block-end: var(--space-xl);
}

.atelier__mural {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.atelier__tile { margin: 0; }

.atelier__tile img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    display: block;
}

/* The first tile is the anchor: full width on a narrow screen, then a tall
   column beside the others once there is room. */
.atelier__tile--1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.atelier__tile--2,
.atelier__tile--3 { aspect-ratio: 3 / 4; }
.atelier__tile--4,
.atelier__tile--5 { aspect-ratio: 1 / 1; }

.atelier__note {
    margin-block-start: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    max-inline-size: 60ch;
}

@media (min-width: 48rem) {
    .atelier__mural {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .atelier__tile--1 { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
    .atelier__tile--2 { grid-column: 3 / 4; grid-row: 1 / 2; aspect-ratio: auto; }
    .atelier__tile--3 { grid-column: 4 / 5; grid-row: 1 / 2; aspect-ratio: auto; }
    .atelier__tile--4 { grid-column: 3 / 4; grid-row: 2 / 3; aspect-ratio: auto; }
    .atelier__tile--5 { grid-column: 4 / 5; grid-row: 2 / 3; aspect-ratio: auto; }

    /* A fixed height for the row pair, so the anchor has something to match and
       the tiles never collapse to their intrinsic ratios inside the grid. */
    .atelier__mural { grid-auto-rows: minmax(0, 1fr); block-size: clamp(24rem, 42vw, 34rem); }
}

/* =========================================================================
   11. COLECIONAR OU CRIAR — the closing fork

   Two paths of deliberately equal weight. The mascot sits on the seam: on a
   narrow screen it drops out entirely rather than stacking as a third item,
   because a decorative image between two choices reads as a third choice.
   ========================================================================= */
.choose__head {
    display: grid;
    gap: var(--space-sm);
    justify-items: center;
    text-align: center;
    margin-block-end: var(--space-2xl);
}

.choose__paths {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

.choose__path {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    padding: var(--space-xl);
    border: 1px solid var(--color-on-deep-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
}

.choose__path-text {
    margin: 0;
    font-family: var(--font-editorial);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--color-on-deep-strong);
    text-wrap: balance;
}

.choose__mascot {
    display: none;
    inline-size: clamp(4rem, 8vw, 7rem);
    block-size: auto;
    justify-self: center;
}

@media (min-width: 62rem) {
    .choose__paths {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: var(--space-2xl);
    }

    .choose__mascot { display: block; }
}

/* EDIT MODE ONLY: the drop's photographs are their own edit target (content-gallery.js). */
.release__photos { display: grid; gap: var(--space-sm); min-inline-size: 0; cursor: pointer; border-radius: var(--radius-lg); }
.release__photos:hover,
.release__photos:focus-visible { outline: 2px dashed var(--cg-red-on-dark); outline-offset: 6px; }
.release__photos-empty {
    display: grid;
    place-items: center;
    aspect-ratio: var(--ratio-square);
    padding: var(--space-lg);
    border: 2px dashed color-mix(in srgb, var(--color-on-deep) 35%, transparent);
    border-radius: var(--radius-lg);
    color: var(--color-on-deep-muted);
    text-align: center;
}

/* =========================================================================
   REDESIGN LAYER — "a página é uma fornada"
   Small, deliberate refinements over the bands above. Nothing here changes a band's structure or
   an owner-decided rule (whole photographs, one photo at a time, the collection badge); it only adds
   handling: how a surface answers the hand.
   ========================================================================= */

/* Editorial photographs sit in a softer frame, lifted off the ground like a piece on a plinth. */
.feature__media img,
.craft__figure img {
    border-radius: var(--radius-xl);
    box-shadow: 0 40px 70px -46px rgb(20 14 12 / 0.55);
}

.on-ink .feature__media img { box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.8); }

/* The studio mural answers the pointer: each tile's photograph drifts forward a little. */
.atelier__tile {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.atelier__tile img {
    border-radius: 0;
    transition: transform 900ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .atelier__tile:hover img { transform: scale(1.05); }
}

/* The two doors of the closing fork: glass on the kiln's black, and heat at the edge on hover. */
.choose__path {
    position: relative;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 100% at 0% 0%, rgb(255 255 255 / 0.06), transparent 60%),
        rgb(255 255 255 / 0.02);
    transition: border-color var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-slow);
}

.choose__path-text {
    font-family: var(--font-display);
    font-stretch: var(--stretch-label);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .choose__path:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--kiln-ember) 55%, transparent);
        box-shadow: 0 30px 60px -36px var(--kiln-glow);
    }
}

/* The mascot on the seam floats, gently — the only thing on the page that moves on its own. */
@media (prefers-reduced-motion: no-preference) {
    .choose__mascot { animation: cg-float 6s var(--ease-in-out) infinite alternate; }
}

@keyframes cg-float {
    from { transform: translateY(-6px) rotate(-2deg); }
    to { transform: translateY(6px) rotate(2deg); }
}

/* The drop's countdown reads as display type: wide numerals, a heat line under the row. */
.countdown__value { font-stretch: var(--stretch-display); font-weight: var(--weight-black); }

.countdown { position: relative; }

.countdown::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    block-size: 2px;
    background: var(--heat-gradient);
    opacity: 0.8;
}

/* The collection badge keeps the owner's filled pill; it only gains the display width. */
.release__name { font-stretch: var(--stretch-display); font-weight: var(--weight-black); }

/* On a phone the two opening actions stack at full width, sized so neither label wraps. */
@media (max-width: 40rem) {
    .hero__actions { display: grid; inline-size: 100%; }
    .hero__actions .button--large {
        inline-size: 100%;
        padding-inline: var(--space-lg);
        font-size: var(--text-sm);
        letter-spacing: 0.06em;
    }
}