/* ==========================================================================
   VinoVinoPhoto — shared stylesheet
   --------------------------------------------------------------------------
   One stylesheet for every page. The browser caches it after the first
   request, so each additional page costs only its (very compressible) HTML.

   No JavaScript runs anywhere on this site. Every effect below — the nav
   underline, the gallery hover-zoom, the click-to-enlarge lightbox — is
   pure CSS.
   ========================================================================== */


/* --- Design tokens -------------------------------------------------------- */
:root {
    /* Colour: the "Nebbiolo" palette — earthy greige with a garnet accent.
       Dark-mode overrides ("Graphite") live in the @media block below :root. */
    --color-background:    #f5f2ec;   /* warm greige page background        */
    --color-surface:       #ece7dd;   /* cards and subtle panels            */
    --color-text:          #2c2622;   /* espresso ink for body copy         */
    --color-text-muted:    #6b6358;   /* captions, dates, secondary detail  */
    --color-border:        #e0d8ca;
    --color-accent:        #8a2f3b;   /* garnet — the single accent         */
    --color-accent-strong: #6c2430;   /* hover / active accent              */
    --color-on-accent:     #ffffff;   /* text/icons sitting on the accent   */
    --color-accent-2:      #6f7257;   /* olive — secondary hue, for artwork */

    /* Type: Apple system fonts (zero web-font downloads) with fallbacks.
       Headings in Skia; body in Avenir Next at Medium weight (set in body{}). */
    --font-heading: Optima, "Optima Nova", "URW Classico", "Gill Sans", "Segoe UI", sans-serif;
    --font-body:    "Avenir Next", Avenir, "Segoe UI", Roboto, system-ui, sans-serif;
    --font-script:  Zapfino, "Snell Roundhand", "Brush Script MT", cursive;  /* wordmark only */

    /* Spacing scale (rem). */
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;

    /* Layout. */
    --measure-reading: 42rem;   /* comfortable line length for prose */
    --measure-wide:    72rem;   /* gallery and full-width sections   */
    --radius:          8px;

    /* Motion. */
    --transition-fast: 120ms ease;
    --transition-base: 220ms ease;

    /* Decorative SVG motifs, reused by the artwork at the foot of this file.
       They are monochrome silhouettes used as CSS masks: the shape comes from
       the SVG, the COLOUR comes from a palette variable on the element — so the
       artwork recolours itself for light (Nebbiolo) and dark (Graphite) modes.
       (Filled white so they work whether a browser masks by alpha or luminance.) */
    /* A "hanging drift" bunch: big berries in uneven rows, the cluster
       drifting sideways as it descends to a small dangling berry. */
    --art-grapes: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 108'><g fill='white'><path d='M38 3 C36 9 37 15 37 21 L42 21 C42 15 41 9 44 3 Z'/><path d='M41 10 C50 3 63 7 62 17 C54 22 44 19 41 10 Z'/><circle cx='20' cy='33' r='9'/><circle cx='39' cy='30' r='10'/><circle cx='57' cy='34' r='8'/><circle cx='13' cy='50' r='7'/><circle cx='30' cy='48' r='10'/><circle cx='50' cy='46' r='10'/><circle cx='64' cy='48' r='7'/><circle cx='25' cy='64' r='9'/><circle cx='44' cy='62' r='10'/><circle cx='62' cy='61' r='8'/><circle cx='37' cy='77' r='9'/><circle cx='55' cy='75' r='8'/><circle cx='49' cy='90' r='8'/><circle cx='58' cy='99' r='6'/></g></svg>");
    /* A "large" decanter: wide flat rounded base, tall slender flared neck. */
    --art-decanter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 210' fill='none' stroke='white' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'><path d='M82 12 C80 18 86 24 88 32 C90 50 91 72 92 92 C74 116 30 134 21 168 C17 186 33 198 60 199 C80 200 120 200 140 199 C167 198 183 186 179 168 C170 134 126 116 108 92 C109 72 110 50 112 32 C114 24 120 18 118 12 C110 22 90 22 82 12 Z'/><path d='M82 12 C90 4 110 4 118 12'/><path d='M26 158 C70 174 130 174 174 158'/></svg>");
    /* The camera aperture, as a single-tone mask (reused on the gallery page). */
    --art-aperture: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='white' stroke-width='4' stroke-linejoin='round'><circle cx='100' cy='100' r='90'/><polygon points='140,100 120,134.6 80,134.6 60,100 80,65.4 120,65.4'/><line x1='140' y1='100' x2='145' y2='178'/><line x1='120' y1='134.6' x2='55' y2='178'/><line x1='80' y1='134.6' x2='10' y2='100'/><line x1='60' y1='100' x2='55' y2='22'/><line x1='80' y1='65.4' x2='145' y2='22'/><line x1='120' y1='65.4' x2='190' y2='100'/></svg>");
}


/* --- Dark mode: the "Graphite" palette -----------------------------------
   Only the colour tokens change. Every component reads these variables, so
   the entire site re-themes itself when a visitor's device is in dark mode. */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background:    #20222a;   /* cool charcoal                  */
        --color-surface:       #282b35;
        --color-text:          #e8e9ef;
        --color-text-muted:    #a4a8b4;
        --color-border:        #363a46;
        --color-accent:        #a74f5a;   /* darker burgundy, less pink     */
        --color-accent-strong: #b85566;
        --color-on-accent:     #1c1e25;   /* dark text on the light accent  */
        --color-accent-2:      #c9a96a;   /* warm gold — secondary, artwork */
    }
}


/* --- Reset / base --------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Smooth in-page jumps for the lightbox + footnote-style anchors. */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 500;            /* Avenir Next Medium */
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-strong);
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-sm);
}


/* --- Accessibility helpers ------------------------------------------------ */
/* Keyboard users can jump straight to the page content. */
.skip-link {
    position: absolute;
    left: var(--space-sm);
    top: -3rem;
    z-index: 200;
    background: var(--color-text);
    color: var(--color-background);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius);
    text-decoration: none;
    transition: top var(--transition-base);
}

.skip-link:focus {
    top: var(--space-sm);
    color: var(--color-background);
}


/* --- Shared layout container ---------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--measure-wide);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.container--reading {
    max-width: calc(var(--measure-reading) + var(--space-md) * 2);
}


/* --- Site header / navigation --------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--color-background) 92%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--color-border);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm) var(--space-md);
    padding-block: var(--space-sm);
}

.nav-brand {
    font-family: var(--font-script);   /* Zapfino script wordmark */
    font-weight: 400;                  /* never synthetically bold a script face */
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: normal;            /* let Zapfino set its own spacing/ligatures */
    white-space: nowrap;
    color: var(--color-text);
    text-decoration: none;
    margin-right: auto;                /* push the link list to the right */
    padding-right: var(--space-sm);    /* breathing room for the trailing flourish */
}

.nav-brand-accent {
    color: var(--color-accent);
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    position: relative;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95rem;
    padding-bottom: 2px;
}

/* Animated underline — grows from the left on hover and for the active page. */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav-link[aria-current="page"] {
    color: var(--color-accent);
}


/* --- Buttons -------------------------------------------------------------- */
.button {
    display: inline-block;
    padding: var(--space-2xs) var(--space-md);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-base),
                color var(--transition-base),
                transform var(--transition-fast),
                border-color var(--transition-base);
}

.button-primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border: 1px solid var(--color-accent);
}

.button-primary:hover {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: var(--color-on-accent);
    transform: translateY(-1px);
}

.button-ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.button-ghost:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-1px);
}


/* --- Sections ------------------------------------------------------------- */
.section {
    padding-block: var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.section:first-of-type {
    border-top: 0;
}

.section-heading {
    font-size: clamp(1.4rem, 1rem + 1.6vw, 1.85rem);
}

.section-lead {
    color: var(--color-text-muted);
    max-width: var(--measure-reading);
    margin-top: calc(var(--space-sm) * -0.25);
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 var(--space-2xs);
}


/* --- Hero ----------------------------------------------------------------- */
.hero {
    padding-block: clamp(var(--space-xl), 10vw, var(--space-2xl));
}

.hero-title {
    font-size: clamp(2.2rem, 1.2rem + 4.5vw, 3.6rem);
    margin-bottom: var(--space-md);
}

.hero-lead {
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
    color: var(--color-text-muted);
    max-width: var(--measure-reading);
    margin: 0 0 var(--space-lg);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}


/* --- Card grid (wine side / photo side / class info) ---------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-md);
}

.card h3 {
    font-size: 1.2rem;
    margin-bottom: var(--space-2xs);
}

.card p {
    margin: 0 0 var(--space-sm);
}

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


/* --- Classes: the "next class" callout ------------------------------------ */
.class-callout {
    max-width: var(--measure-reading);
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
}

/* Sized the same whichever heading level the host page needs. */
.class-callout h2,
.class-callout h3 {
    font-size: 1.2rem;
    margin-bottom: var(--space-2xs);
}

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

.class-status {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 var(--space-2xs);
}


/* --- Classes: the tasting sheet -------------------------------------------
   Wines in pouring order, numbered down a connected line. The counter comes
   from CSS, so the markup stays a plain ordered list. */
.flight {
    list-style: none;
    counter-reset: pour;
    max-width: var(--measure-reading);
    margin: var(--space-lg) 0 0;
    padding: 0;
}

.flight li {
    counter-increment: pour;
    position: relative;
    padding: 0 0 var(--space-md) var(--space-lg);
    border-left: 1px solid var(--color-border);
}

/* The line should stop at the last pour, not run past it. */
.flight li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.flight li::before {
    content: counter(pour);
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-50%);
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.pour-meta {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--color-accent);
    margin: 0 0 0.3rem;
}

.pour-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.15rem;
}

.pour-note {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    margin: 0;
}


/* --- Photo gallery -------------------------------------------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.gallery-figure {
    margin: 0;
}

/* The link wraps the image and clips the hover-zoom. */
.gallery-link {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    aspect-ratio: 1 / 1;
}

.gallery-link img,
.gallery-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 450ms ease;
}

.gallery-link:hover img,
.gallery-link:hover .gallery-placeholder {
    transform: scale(1.045);
}

/* Neutral placeholder shown until a real photo is dropped in. */
.gallery-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-surface), var(--color-border));
    color: var(--color-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.gallery-caption {
    margin-top: var(--space-2xs);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}


/* --- CSS-only lightbox (no JavaScript) -----------------------------------
   Each thumbnail links to "#photo-N". The matching overlay below becomes
   visible only while it is the :target of the URL. The close links point
   back to "#gallery", which dismisses the overlay.
   ------------------------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: rgba(18, 18, 20, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

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

/* Clicking anywhere on the dimmed backdrop closes the overlay. */
.lightbox-backdrop {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
}

.lightbox-stage {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: min(var(--measure-wide), 92vw);
    text-align: center;
}

.lightbox-stage img,
.lightbox-stage .gallery-placeholder {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    border-radius: var(--radius);
}

.lightbox-stage .gallery-placeholder {
    width: min(60vw, 30rem);
    aspect-ratio: 4 / 5;
}

.lightbox-caption {
    color: #e7e7ea;
    margin: var(--space-sm) 0 0;
    font-size: 0.95rem;
}

.lightbox-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    transition: background var(--transition-base);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}


/* --- Blog: rolling feed of post summaries --------------------------------- */
.post-list {
    list-style: none;
    margin: var(--space-lg) 0 0;
    padding: 0;
}

.post-summary {
    padding-block: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.post-summary:first-child {
    border-top: 0;
    padding-top: 0;
}

.post-meta {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xs);
}

.post-title {
    font-size: clamp(1.3rem, 1rem + 1.3vw, 1.7rem);
    margin-bottom: var(--space-xs);
}

.post-title a {
    color: var(--color-text);
    text-decoration: none;
}

.post-title a:hover {
    color: var(--color-accent);
}

.post-excerpt {
    margin: 0 0 var(--space-sm);
    max-width: var(--measure-reading);
}

/* "Read on" link with a nudging arrow on hover. */
.read-more {
    font-weight: 600;
    text-decoration: none;
}

.read-more::after {
    content: " \2192";   /* → */
    display: inline-block;
    transition: transform var(--transition-base);
}

.read-more:hover::after {
    transform: translateX(4px);
}


/* --- Blog: single-post article -------------------------------------------- */
.post {
    padding-block: var(--space-xl);
}

.post-header {
    margin-bottom: var(--space-lg);
}

.post-header h1 {
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.6rem);
    margin-bottom: var(--space-xs);
}

/* Long-form reading column. */
.prose {
    max-width: var(--measure-reading);
}

.prose > * + * {
    margin-top: var(--space-md);
}

.prose h2 {
    font-size: 1.4rem;
    margin-top: var(--space-lg);
}

.prose blockquote {
    margin: var(--space-md) 0;
    padding-left: var(--space-md);
    border-left: 3px solid var(--color-accent);
    color: var(--color-text-muted);
    font-style: italic;
}

.prose ul,
.prose ol {
    padding-left: var(--space-md);
}

.prose li + li {
    margin-top: var(--space-2xs);
}

.post-back {
    display: inline-block;
    margin-top: var(--space-xl);
    font-weight: 600;
    text-decoration: none;
}

.post-back::before {
    content: "\2190 ";   /* ← */
    display: inline-block;
    transition: transform var(--transition-base);
}

.post-back:hover::before {
    transform: translateX(-4px);
}


/* --- Footer --------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-lg);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.site-footer p {
    margin: 0 0 var(--space-2xs);
}

.site-footer a {
    color: var(--color-text-muted);
}

.site-footer a:hover {
    color: var(--color-accent);
}


/* --- Decorative artwork ---------------------------------------------------
   Inline SVG (hero) and CSS-mask motifs (watermarks, divider). All are
   aria-hidden, sit behind the text, and take their colour from theme tokens,
   so everything recolours automatically in dark mode. No images, no requests. */

/* Hero: a soft "vineyard at dusk" — an orb and three layered hills. */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero-content {
    position: relative;   /* keep the headline above the artwork */
    z-index: 1;
}

/* Camera-aperture emblem: a soft warm glow behind a fine-line iris. */
.hero-art-glow { fill: var(--color-accent-2); opacity: 0.07; }

.hero-art-iris-ring,
.hero-art-iris-hex,
.hero-art-iris-blades line {
    fill: none;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;   /* crisp 2px lines at any scale */
}

.hero-art-iris-ring,
.hero-art-iris-hex,
.hero-art-iris-blades line { stroke: var(--color-accent); opacity: 0.16; }

/* The wine glass framed inside the aperture (the subject in the lens). */
.hero-art-glass {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: 0.24;
}

/* Wine fill inside the glass. */
.hero-art-wine {
    fill: var(--color-accent);
    opacity: 0.24;
}

/* Centred vine/grape separator (an explicit element placed in the markup). */
.deco-vine {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-block: var(--space-lg);
}

.deco-vine::before,
.deco-vine::after {
    content: "";
    height: 1px;
    flex: 0 1 110px;
    background: var(--color-border);
}

.deco-vine-mark {
    flex: 0 0 auto;
    width: 24px;
    aspect-ratio: 80 / 108;   /* match the bunch artwork's proportions */
    background: var(--color-accent);
    opacity: 0.55;
    -webkit-mask: var(--art-grapes) center / contain no-repeat;
            mask: var(--art-grapes) center / contain no-repeat;
}

/* Faint corner watermarks — add .deco-grapes, .deco-decanter, or .deco-aperture
   to a section/article. The motif sits behind the content (negative z-index)
   and is clipped to the box. */
.deco-grapes,
.deco-decanter,
.deco-aperture {
    position: relative;
    overflow: hidden;
}

.deco-grapes::after,
.deco-decanter::after,
.deco-aperture::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background: var(--color-accent);
}

.deco-grapes::after {
    top: var(--space-md);
    right: calc(var(--space-md) * -0.4);
    width: clamp(120px, 20vw, 210px);
    aspect-ratio: 80 / 108;
    opacity: 0.07;
    -webkit-mask: var(--art-grapes) center / contain no-repeat;
            mask: var(--art-grapes) center / contain no-repeat;
}

.deco-decanter::after {
    top: 50%;
    right: calc(var(--space-md) * -0.6);
    transform: translateY(-50%);
    width: clamp(150px, 22vw, 260px);
    aspect-ratio: 200 / 210;
    opacity: 0.13;
    -webkit-mask: var(--art-decanter) center / contain no-repeat;
            mask: var(--art-decanter) center / contain no-repeat;
}

/* Gallery: a complete aperture "badge" inset in the header's top-right —
   a different treatment from the hero's large corner-bleed emblem. */
.deco-aperture::after {
    top: var(--space-lg);
    right: var(--space-lg);
    width: clamp(110px, 16vw, 180px);
    aspect-ratio: 1 / 1;
    opacity: 0.13;
    -webkit-mask: var(--art-aperture) center / contain no-repeat;
            mask: var(--art-aperture) center / contain no-repeat;
}