/* ============================================================
   PAGE-SCOPED STYLES — moved out of the individual html files.

   In the feed several pages live in one document at the same time,
   so every page's overrides must be loaded everywhere and must not
   leak into a neighbouring section. Rules stay scoped to the grid
   container id (the PAGE_GUIDE convention); the two rules that used
   to be global got the container id added.

   Shared base (html, body, .main-frame) stays in the page files —
   it is identical across all of them.
   ============================================================ */


/* ---------------------------- headings ---------------------------- */

/* Every feed page is on the design-v2 vocabulary now: no "# / ##" marks, no
   .bio-header + .bio-highlight — just the small t-* type set below, id-scoped
   so nothing leaks between sections sharing the document. (The standalone
   even.it.html widget keeps its own inline .bio-* styles; it is not in the
   feed and does not read this file.) */

/* .t-lede always sits directly under a .t-row header, .t-body under a bare
   .t-h — the 2px lifts the sub-line off the heading without a full vgap. */
#gridContainer .t-lede,
#clayPetGrid .t-lede,
#rufaPressGrid .t-lede,
#stuffContainer .t-lede,
#obrVarGrid .t-lede,
#rawContainer .t-lede,
#yaroGrid .t-lede,
#evenitGrid .t-lede,
#menuOverlay .t-lede {
    display: block;
    color: var(--ink);
    margin-top: 2px;
}

#gridContainer .t-h,
#clayPetGrid .t-h,
#rufaPressGrid .t-h,
#stuffContainer .t-h,
#obrVarGrid .t-h,
#rawContainer .t-h,
#yaroGrid .t-h,
#evenitGrid .t-h,
#menuOverlay .t-h {
    display: block;
    font: var(--type-display);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--ink-strong);
}

#gridContainer .t-body,
#clayPetGrid .t-body,
#rufaPressGrid .t-body,
#stuffContainer .t-body,
#obrVarGrid .t-body,
#rawContainer .t-body,
#yaroGrid .t-body,
#evenitGrid .t-body,
#menuOverlay .t-body {
    display: block;
    color: var(--ink);
    margin-top: 2px;
}

#gridContainer .t-muted,
#clayPetGrid .t-muted,
#rufaPressGrid .t-muted,
#stuffContainer .t-muted,
#obrVarGrid .t-muted,
#rawContainer .t-muted,
#yaroGrid .t-muted,
#evenitGrid .t-muted {
    display: block;
    color: var(--ink-faint);
    font-family: var(--font-rounded);
    font-weight: 400;
    font-style: italic;
    /* 1px smaller than body at both breakpoints (13px web / 15px mobile) */
    font-size: calc(var(--fs-body) - 1px);
}

/* Title and year share a line — .t-h is display:block, so the pair needs a
   flex row to sit side by side the way the Figma header does. */
#gridContainer .t-row,
#clayPetGrid .t-row,
#rufaPressGrid .t-row,
#stuffContainer .t-row,
#obrVarGrid .t-row,
#rawContainer .t-row,
#yaroGrid .t-row,
#evenitGrid .t-row,
#menuOverlay .t-row {
    display: flex;
    align-items: baseline;
    gap: var(--stack-2);
}

/* The year a project ran, raised beside its title. Superscript comes from
   align-self, not vertical-align: .t-year is a flex item of .t-row and flex
   items ignore vertical-align — see .ts-year in tokens.css. */
#gridContainer .t-year,
#clayPetGrid .t-year,
#rufaPressGrid .t-year,
#stuffContainer .t-year,
#obrVarGrid .t-year,
#rawContainer .t-year,
#yaroGrid .t-year,
#evenitGrid .t-year,
#menuOverlay .t-year {
    font: var(--type-year);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--ink-dim);
    align-self: flex-start;
}


/* signs carries no page-scoped rules. Each case is a card whose text side is
   authored as plain text-block markup in card.text (t-row / t-body / vgap /
   tags), so it inherits the exact text-block rhythm — heading, copy, tags —
   with no card-specific spacing overrides. */


/* ----------------------------- raw ----------------------------- */

/* raw's bottomText captions and dashed dividers were replaced by cards, which
   bring their own frame and spacing. Only the botworks tile keeps an override:
   its video is drawn much wider than it reads, so it is held to 40% and left
   aligned like every other card row. */
#rawContainer .card video[src*="botworks"] {
    width: 40%;
    margin-left: 0;
    margin-right: auto;
}

/* abo.svg is white line art drawn for the dark theme — on the light card it is
   almost invisible. Same treatment as clay.pet's wordmark; drop it if the dark
   palette is ever restored. */
#rawContainer .card img[src$="abo.svg"] {
    filter: invert(1);
}


/* ---------------------------- clay.pet ---------------------------- */

/* bottomText spacing: top = one line, no bottom (matches signs/raw) */
#clayPetGrid .image-wrapper + .text-content,
#clayPetGrid .video-wrapper + .text-content {
    padding-top: 16px;
    padding-bottom: 0 !important;
}

/* remove inline margin-bottom injected by bundle */
#clayPetGrid .content-grid-item {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    #clayPetGrid .image-wrapper + .text-content,
    #clayPetGrid .video-wrapper + .text-content {
        padding-top: 19px;
    }
}


/* --------------------- even.it pattern maker ---------------------- */

.evenit-fields-wrap {
    display: flex;
    width: 100%;
    position: relative;
}

.evenit-field-wrap {
    flex: 1;
    touch-action: none;
    user-select: none;
    display: block;
    line-height: 0;
}

.evenit-field-wrap svg {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    user-select: none;
    cursor: crosshair;
}

#evenit-container path.hit {
    cursor: crosshair;
}

/* DOTS DISABLED
#evenit-container .evenit-dots-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

#evenit-container .evenit-dots-row span {
    color: var(--white-90);
    user-select: none;
    font-family: "Fragment Mono", monospace;
    font-size: 12px;
    line-height: 16px;
}
*/

#evenit-container .evenit-controls {
    padding: 16px 17.3px;
    color: var(--white-20);
    font-family: "Fragment Mono", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

#evenit-container .evenit-comment {
    color: var(--white-20);
    display: inline-block;
    text-indent: -3ch;
    padding-left: 3ch;
}

#evenit-container .evenit-color-field {
    display: inline;
    color: var(--white-20);
}

.evenit-color-input {
    /* dark theme: rgba(255, 255, 255, 0.04) */
    background: rgba(0, 0, 0, 0.05);
    border: none;
    outline: none;
    font-family: "Fragment Mono", monospace;
    font-size: 14px;
    color: var(--white-90);
    padding: 2px 4px;
    line-height: 20px;
    width: 80px;
    caret-color: var(--white-90);
}

/* tool buttons (.evenit-action-btn) styled in components/links/links.css */

@media (max-width: 768px) {
    #evenit-container .evenit-controls {
        padding: 19px calc(5vw + 17.3px);
        font-size: 16px;
        line-height: 22px;
    }

    #evenit-container .evenit-comment {
        font-size: 16px;
        line-height: 21px;
    }
}


/* clay.pet's .text-block-bottom-wrapper override lived here. It has been
   removed: no clay.pet item uses `bottomImage`, so the rule matched nothing. */

/* 3.4.png is the clay.pet wordmark drawn for the dark theme — pure white ink on
   transparent, so on the light ground it renders as an empty box. Inverting is
   exact for white-on-transparent art and keeps one asset serving both themes;
   drop this rule if the dark palette is ever restored. */
#clayPetGrid .content-grid-item img[src$="3.4.png"] {
    filter: invert(1);
}