/* ==========================================================================
   TF Word — Ticket Fairy's music and culture magazine.

   A dark editorial system: near-black ink so nightlife photography carries the
   page, one magenta accent used sparingly for structure, Gilroy for display and
   a serif for long-form reading.

   Sections
     1. Fonts
     2. Tokens
     3. Base and layout
     4. Header
     5. Cards
     6. Lead block
     7. Section rails
     8. Archives and pagination
     9. Story
    10. Writers
    11. Footer
    12. Motion and print
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Fonts
   Gilroy is self-hosted for the whole site; one family across six weights so
   templates can use font-weight instead of swapping family names.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: "Gilroy";
    src: url("/resources/fonts/home_v2_5/Gilroy-Light.woff2") format("woff2"),
         url("/resources/fonts/home_v2_5/Gilroy-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("/resources/fonts/home_v2_5/Gilroy-Regular.woff2") format("woff2"),
         url("/resources/fonts/home_v2_5/Gilroy-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("/resources/fonts/home_v2_5/Gilroy-Medium.woff2") format("woff2"),
         url("/resources/fonts/home_v2_5/Gilroy-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("/resources/fonts/home_v2_5/Gilroy-Bold.woff2") format("woff2"),
         url("/resources/fonts/home_v2_5/Gilroy-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("/resources/fonts/home_v2_5/Gilroy-ExtraBold.woff2") format("woff2"),
         url("/resources/fonts/home_v2_5/Gilroy-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("/resources/fonts/home_v2_5/Gilroy-Heavy.woff2") format("woff2"),
         url("/resources/fonts/home_v2_5/Gilroy-Heavy.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------------
   2. Tokens
   ------------------------------------------------------------------------- */

.tfword {
    /* Surfaces, darkest first. */
    --ink: #08070d;
    --ink-raised: #100e1a;
    --ink-hover: #171526;
    --line: rgba(255, 255, 255, 0.11);
    --line-strong: rgba(255, 255, 255, 0.22);

    /* Text. --paper-dim holds 8.3:1 on --ink, and --paper-faint 5.1:1 on --ink
       / 4.85:1 on --ink-raised, so the 10-13px dates, bylines and captions
       clear WCAG AA on both surfaces rather than reading as decoration. */
    --paper: #f6f5f9;
    --paper-dim: #a8a4bd;
    --paper-faint: #817d9a;

    /* One accent. Magenta is the Ticket Fairy mark; nothing else competes. */
    --accent: #e930ff;
    --accent-ink: #12000f;
    --accent-wash: rgba(233, 48, 255, 0.14);

    /* The same pairing the promoter blog uses: Inter Tight for headings,
       self-hosted Gilroy for body copy. */
    --display: "Inter Tight", "Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --body: "Gilroy", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --shell: 1320px;
    --measure: 41rem;
    --gutter: clamp(1.1rem, 4vw, 3rem);
    --gap: clamp(1.1rem, 2.2vw, 2rem);

    --radius: 4px;
    --header-height: 68px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------------------
   3. Base and layout
   ------------------------------------------------------------------------- */

.tfword *,
.tfword *::before,
.tfword *::after {
    box-sizing: border-box;
}

html.tfword-root {
    /* The main site sets 62.5% here; the magazine works in real rem units. */
    font-size: 100%;
    scroll-behavior: smooth;
    background: #08070d;
}

body.tfword {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.tfword img {
    max-width: 100%;
    display: block;
}

.tfword a {
    color: inherit;
    text-decoration: none;
}

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

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

.w-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
}

.w-skip:focus {
    left: 0;
}

.w-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Shared editorial furniture ---------------------------------------------- */

.w-eyebrow {
    font-family: var(--display);
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.w-standfirst {
    font-family: var(--body);
    font-size: clamp(1rem, 1.3vw, 1.1875rem);
    line-height: 1.55;
    color: var(--paper-dim);
    margin: 0;
}

.w-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--paper-faint);
    margin: 0;
}

.w-meta > * + *::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: 0.75rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

.w-meta a:hover {
    color: var(--paper);
}

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */

.w-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8, 7, 13, 0.82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.w-header__bar {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    height: var(--header-height);
}

.w-wordmark {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: none;
}

/* The mark is a white PNG, so it needs no colour handling — only a height that
   keeps it optically level with the nav beside it. */
.w-wordmark__mark {
    height: 26px;
    width: auto;
}

.w-wordmark__by {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-faint);
    white-space: nowrap;
}

.w-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.w-nav__desk {
    position: relative;
}

.w-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--paper-dim);
    border-radius: var(--radius);
    transition: color 0.18s var(--ease), background 0.18s var(--ease);
    white-space: nowrap;
}

.w-nav__desk:hover .w-nav__link,
.w-nav__desk:focus-within .w-nav__link,
.w-nav__link[aria-current="page"] {
    color: var(--paper);
    background: var(--ink-hover);
}

.w-nav__chevron {
    width: 9px;
    height: 9px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.18s var(--ease);
}

.w-nav__desk:hover .w-nav__chevron,
.w-nav__desk:focus-within .w-nav__chevron {
    transform: translateY(1px) rotate(225deg);
}

/* Sections open on hover and on keyboard focus, so the menu is reachable
   without a pointer. */
.w-nav__sections {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 13rem;
    padding: 0.5rem;
    margin: 0;
    list-style: none;
    background: var(--ink-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}

.w-nav__desk:hover .w-nav__sections,
.w-nav__desk:focus-within .w-nav__sections {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.w-nav__section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--paper-dim);
}

.w-nav__section:hover {
    background: var(--accent-wash);
    color: var(--paper);
}

.w-nav__count {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--paper-faint);
}

/* Pushed right from the actions rather than the nav, so the search and menu
   buttons stay in the corner on the touch layout where the nav is hidden. */
.w-header__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    margin-left: auto;
}

.w-iconbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--paper-dim);
    cursor: pointer;
    transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.w-iconbutton:hover {
    color: var(--paper);
    background: var(--ink-hover);
}

.w-iconbutton svg {
    width: 19px;
    height: 19px;
}

.w-menutoggle,
.w-nav__expand {
    display: none;
}

/* Search ------------------------------------------------------------------- */

.w-search {
    display: none;
    border-top: 1px solid var(--line);
    background: var(--ink-raised);
}

.w-search[data-open="true"] {
    display: block;
}

.w-search__form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
}

.w-search__input {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1rem;
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--paper);
    font-family: var(--display);
    font-size: 1rem;
}

.w-search__input::placeholder {
    color: var(--paper-faint);
}

.w-search__submit {
    padding: 0.85rem 1.4rem;
    background: var(--accent);
    color: var(--accent-ink);
    border: 0;
    border-radius: var(--radius);
    font-family: var(--display);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.w-search__results {
    padding-bottom: 1rem;
    margin: 0;
    list-style: none;
}

.w-suggestion {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem;
    border-radius: var(--radius);
}

.w-suggestion:hover {
    background: var(--ink-hover);
}

.w-suggestion__thumb {
    width: 60px;
    height: 44px;
    flex: none;
    object-fit: cover;
    border-radius: 2px;
    background: var(--ink-hover);
}

.w-suggestion__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.w-suggestion__meta {
    font-size: 0.75rem;
    color: var(--paper-faint);
    margin: 0.15rem 0 0;
}

/* -------------------------------------------------------------------------
   5. Cards
   One card, three sizes. Every variant carries a section, a headline and a
   byline in the same order, so the page reads consistently.
   ------------------------------------------------------------------------- */

.w-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.w-card__frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--ink-raised);
    aspect-ratio: 16 / 10;
}

.w-card__frame img,
.w-card__frame picture {
    width: 100%;
    height: 100%;
}

.w-card__frame img {
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.w-card:hover .w-card__frame img {
    transform: scale(1.045);
}

.w-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.w-card__title {
    font-family: var(--display);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.015em;
    color: var(--paper);
}

.w-card__title a {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1.5px;
    transition: background-size 0.28s var(--ease);
}

.w-card:hover .w-card__title a {
    background-size: 100% 1.5px;
}

.w-card__standfirst {
    font-family: var(--body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--paper-dim);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.w-card--lg .w-card__title {
    font-size: clamp(1.3rem, 2.1vw, 1.75rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
}

.w-card--sm {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.9rem;
}

.w-card--sm .w-card__frame {
    width: 104px;
    flex: none;
    aspect-ratio: 1 / 1;
}

.w-card--sm .w-card__title {
    font-size: 0.9375rem;
}

/* A numbered rail for "most read"-style lists. */
.w-card--ranked .w-card__rank {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
    color: var(--line-strong);
    flex: none;
    width: 1.6rem;
    font-variant-numeric: tabular-nums;
}

.w-grid {
    display: grid;
    gap: var(--gap) calc(var(--gap) * 1.15);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* -------------------------------------------------------------------------
   6. Lead block
   ------------------------------------------------------------------------- */

.w-lead {
    padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem);
}

.w-lead__layout {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    align-items: stretch;
}

/* Image and copy share one grid cell, so the block is as tall as whichever is
   taller. A four-line headline grows the picture with it instead of escaping
   the scrim and landing on bare photography. */
.w-lead__story {
    position: relative;
    display: grid;
    height: 100%;
    min-height: 24rem;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--ink-raised);
    isolation: isolate;
}

.w-lead__frame {
    position: relative;
    grid-area: 1 / 1;
    min-height: 0;
}

.w-lead__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.w-lead__story:hover .w-lead__frame img {
    transform: scale(1.03);
}

/* The scrim is what makes a headline readable over an unpredictable press
   photo. It is opaque enough at the base to carry white text over a bright
   image, and fades to nothing so the picture still reads. */
.w-lead__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(4, 3, 8, 0.94) 0%,
        rgba(4, 3, 8, 0.86) 22%,
        rgba(4, 3, 8, 0.5) 48%,
        rgba(4, 3, 8, 0.12) 72%,
        rgba(4, 3, 8, 0) 100%
    );
}

.w-lead__copy {
    position: relative;
    grid-area: 1 / 1;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
    background: linear-gradient(
        to top,
        rgba(4, 3, 8, 0.95) 0%,
        rgba(4, 3, 8, 0.92) 45%,
        rgba(4, 3, 8, 0.7) 72%,
        rgba(4, 3, 8, 0) 100%
    );
}

.w-lead__title {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.w-lead__standfirst {
    max-width: 46ch;
    color: rgba(246, 245, 249, 0.82);
}

/* Featured carousel ------------------------------------------------------- */

/* The track is a scroll-snap rail, so it swipes on touch and scrolls with a
   trackpad on its own. The controls below are an enhancement layered on top —
   with JavaScript off the reader still reaches every slide. */
.w-slider {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.w-slider__track {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: var(--radius);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.w-slider__track::-webkit-scrollbar {
    display: none;
}

.w-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

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

.w-slider__arrow,
.w-slider__pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--paper-dim);
    cursor: pointer;
    transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.w-slider__arrow:hover,
.w-slider__pause:hover {
    border-color: var(--accent);
    color: var(--paper);
}

.w-slider__arrow svg {
    width: 16px;
    height: 16px;
}

.w-slider__pause {
    margin-left: auto;
}

/* Two bars for pause, one triangle for play — drawn rather than iconed so the
   control has no asset to load. */
.w-slider__pauseicon {
    width: 10px;
    height: 11px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}

.w-slider__pause[aria-pressed="true"] .w-slider__pauseicon {
    width: 0;
    height: 0;
    border-left: 9px solid currentColor;
    border-right: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-left: 3px;
}

.w-slider__dots {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.w-slider__dot {
    display: block;
    width: 28px;
    height: 20px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
}

.w-slider__dot::before {
    content: "";
    position: absolute;
    inset: 9px 2px;
    border-radius: 100px;
    background: var(--line-strong);
    transition: background 0.2s var(--ease);
}

.w-slider__dot:hover::before {
    background: var(--paper-dim);
}

.w-slider__dot[aria-current="true"]::before {
    background: var(--accent);
}

.w-lead__aside {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.w-lead__asidehead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.w-lead__asidehead h2 {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.w-lead__list {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.w-lead__list li + li {
    padding-top: 1.05rem;
    border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------------------
   7. Section rails
   ------------------------------------------------------------------------- */

.w-rail {
    padding: clamp(2rem, 4.5vw, 3.5rem) 0;
    border-top: 1px solid var(--line);
}

.w-rail__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.w-rail__title {
    font-family: var(--display);
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.w-rail__title::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    flex: none;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-0.15em);
}

.w-rail__sections {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.w-chip {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--paper-dim);
    transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}

.w-chip:hover,
.w-chip[aria-current="page"] {
    border-color: var(--accent);
    background: var(--accent-wash);
    color: var(--paper);
}

.w-morelink {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

.w-morelink:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   8. Archives and pagination
   ------------------------------------------------------------------------- */

.w-archive {
    padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.w-archive__head {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 46rem;
    padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    border-bottom: 1px solid var(--line);
}

.w-archive__title {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(1.9rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.w-archive__count {
    font-size: 0.8125rem;
    color: var(--paper-faint);
}

.w-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--paper-faint);
}

.w-breadcrumbs li + li::before {
    content: "/";
    margin-right: 0.4rem;
    color: var(--line-strong);
}

.w-breadcrumbs a:hover {
    color: var(--paper);
}

.w-breadcrumbs__current {
    display: inline-block;
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.w-empty {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
    max-width: 34rem;
}

.w-empty__title {
    font-family: var(--display);
    margin: 0 0 0.75rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.w-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--line);
}

.w-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--paper-dim);
    font-variant-numeric: tabular-nums;
    transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.w-pagination__link:hover {
    border-color: var(--line-strong);
    color: var(--paper);
}

.w-pagination__link[aria-current="page"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.w-pagination__gap {
    padding: 0 0.35rem;
    color: var(--paper-faint);
}

/* -------------------------------------------------------------------------
   9. Story
   ------------------------------------------------------------------------- */

.w-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--accent);
    will-change: transform;
}

.w-story {
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.w-story__head {
    max-width: 48rem;
    margin-inline: auto;
    padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(1.25rem, 2.5vw, 2rem);
    text-align: left;
}

.w-story__sections {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.w-story__title {
    font-family: var(--display);
    margin: 0 0 1rem;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.038em;
    text-wrap: balance;
}

.w-story__standfirst {
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    line-height: 1.5;
    color: var(--paper-dim);
    margin: 0 0 1.5rem;
}

.w-byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.w-byline__avatar {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--ink-hover);
    object-fit: cover;
}

.w-byline__name {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
}

.w-byline__meta {
    font-size: 0.8125rem;
    color: var(--paper-faint);
    margin: 0.1rem 0 0;
}

/* auto, not 0, on the inline axis: the figure also carries .w-shell, whose
   margin-inline: auto is what centres it. A margin shorthand here sets all four
   sides, and this rule is the later of the two single-class selectors, so
   writing 0 silently won and pinned the hero to the left of a centred page. */
.w-story__hero {
    margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
}

.w-story__hero img {
    width: 100%;
    max-height: 70vh;
    object-fit: cover;
    border-radius: var(--radius);
}

.w-story__caption {
    max-width: 48rem;
    margin: 0.7rem auto 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--paper-faint);
}

/* Article body. The measure and the serif are what make 2,000 words readable;
   everything WordPress can emit is styled here so no story arrives unstyled. */
.w-prose {
    max-width: var(--measure);
    margin-inline: auto;
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #e6e4ee;
}

.w-prose > * {
    margin-block: 0 1.45em;
}

.w-prose > *:last-child {
    margin-bottom: 0;
}

.w-prose h2,
.w-prose h3,
.w-prose h4 {
    font-family: var(--display);
    color: var(--paper);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-top: 2.2em;
    margin-bottom: 0.6em;
}

.w-prose h2 {
    font-size: 1.6rem;
    font-weight: 800;
}

.w-prose h3 {
    font-size: 1.3rem;
    font-weight: 700;
}

.w-prose h4 {
    font-size: 1.1rem;
    font-weight: 700;
}

.w-prose a {
    color: var(--paper);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.w-prose a:hover {
    color: var(--accent);
}

.w-prose strong {
    color: var(--paper);
    font-weight: 700;
}

.w-prose ul,
.w-prose ol {
    padding-left: 1.3em;
}

.w-prose li + li {
    margin-top: 0.5em;
}

.w-prose blockquote {
    margin-inline: 0;
    padding: 0.25em 0 0.25em 1.4em;
    border-left: 2px solid var(--accent);
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--paper);
}

.w-prose blockquote p:last-child {
    margin-bottom: 0;
}

.w-prose figure {
    margin-inline: 0;
}

.w-prose img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.w-prose figcaption {
    margin-top: 0.6rem;
    font-family: var(--display);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--paper-faint);
}

.w-prose hr {
    height: 1px;
    border: 0;
    background: var(--line);
    margin-block: 2.5em;
}

.w-prose iframe,
.w-prose video {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: var(--radius);
}

.w-prose table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--display);
    font-size: 0.9375rem;
}

.w-prose th,
.w-prose td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

/* Anything wider than the measure — embeds, tables — scrolls inside itself
   rather than pushing the page sideways. */
.w-prose .wp-block-table,
.w-prose .wp-block-embed {
    overflow-x: auto;
}

.w-story__foot {
    max-width: var(--measure);
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.w-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.w-share__label {
    margin: 0 0.35rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-faint);
}

.w-share__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--paper-dim);
    background: none;
    font-family: var(--display);
    cursor: pointer;
    transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.w-share__link:hover {
    border-color: var(--accent);
    color: var(--paper);
}

.w-authorcard {
    display: flex;
    gap: 1rem;
    max-width: var(--measure);
    margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
    padding: 1.35rem;
    background: var(--ink-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.w-authorcard__avatar {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ink-hover);
}

.w-authorcard__name {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 800;
}

.w-authorcard__bio {
    margin: 0 0 0.5rem;
    font-family: var(--body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--paper-dim);
}

/* Tickets for the events a story links to --------------------------------- */

.w-events {
    max-width: var(--measure);
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-raised);
}

.w-events__head {
    margin-bottom: 1rem;
}

.w-events__title {
    font-family: var(--display);
    margin: 0.4rem 0 0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.w-events__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.w-event {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.65rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.w-event:hover {
    border-color: var(--line);
    background: var(--ink-hover);
}

.w-event__image {
    width: 68px;
    height: 68px;
    flex: none;
    object-fit: cover;
    border-radius: 2px;
    background: var(--ink-hover);
}

.w-event__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.w-event__date {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.w-event__name {
    font-family: var(--display);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--paper);
}

/* A card for a finished event is still worth showing; it just should not look
   like a call to buy. */
.w-event__cta--quiet {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--paper-dim);
}

.w-event__date--past {
    color: var(--paper-faint);
}

.w-event__where {
    font-size: 0.8125rem;
    color: var(--paper-faint);
}

/* Listing links sit outside the card's own anchor — a link inside a link is
   not a link — so they get their own row under it. */
.w-event__nearby {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.25rem;
    padding: 0 0.65rem 0.35rem calc(68px + 1.55rem);
    font-size: 0.8125rem;
    color: var(--paper-faint);
}

.w-event__nearby a {
    color: var(--paper-dim);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
}

.w-event__nearby a:hover {
    color: var(--paper);
    text-decoration-color: var(--accent);
}

.w-event__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    padding: 0.5rem 0.85rem;
    border-radius: 100px;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--display);
    font-size: 0.8125rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .w-event {
        flex-wrap: wrap;
    }

    .w-event__cta {
        width: 100%;
        justify-content: center;
        margin-top: 0.35rem;
    }

    .w-event__nearby {
        padding-left: 0.65rem;
    }
}

/* Newsletter -------------------------------------------------------------- */

.w-newsletter {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    max-width: var(--shell);
    margin-inline: auto;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        radial-gradient(110% 160% at 100% 0%, rgba(233, 48, 255, 0.15) 0%, rgba(233, 48, 255, 0) 62%),
        var(--ink-raised);
}

/* Inside an article the block sits on the reading measure, so it stacks. */
.w-story .w-newsletter,
.w-newsletter--narrow {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--measure);
    margin-block: clamp(2rem, 4vw, 3rem);
}

.w-newsletter__title {
    font-family: var(--display);
    margin: 0.5rem 0 0.6rem;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.w-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.w-newsletter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.w-newsletter__input {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.9rem 1rem;
    background: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--paper);
    font-family: var(--body);
    font-size: 1rem;
}

.w-newsletter__input::placeholder {
    color: var(--paper-faint);
}

.w-newsletter__input:user-invalid {
    border-color: #ff6b8b;
}

.w-newsletter__submit {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    font-family: var(--display);
}

.w-newsletter__submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* Off-screen rather than display:none — a bot reading the DOM should still
   find it, a person using a screen reader should not. */
.w-newsletter__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.w-newsletter__legal {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--paper-faint);
}

.w-newsletter__legal a {
    color: var(--paper-dim);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.w-newsletter__status {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--paper-dim);
}

.w-newsletter__status[data-state="error"] {
    color: #ff8fa5;
}

.w-newsletter__status[data-state="success"] {
    color: var(--accent);
}

/* -------------------------------------------------------------------------
   10. Writers
   ------------------------------------------------------------------------- */

.w-writers {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.w-writer {
    display: flex;
    gap: 0.9rem;
    padding: 1.1rem;
    background: var(--ink-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.18s var(--ease);
}

.w-writer:hover {
    border-color: var(--line-strong);
}

.w-writer__avatar {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ink-hover);
}

.w-writer__name {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
}

.w-writer__bio {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--paper-dim);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */

.w-cta {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(233, 48, 255, 0.16) 0%, rgba(233, 48, 255, 0) 60%),
        var(--ink-raised);
}

.w-cta__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
}

.w-cta__title {
    font-family: var(--display);
    margin: 0 0 0.5rem;
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    max-width: 20ch;
}

.w-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1.6rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    transition: transform 0.18s var(--ease), filter 0.18s var(--ease);
}

.w-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.w-button--ghost {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--paper);
}

.w-footer {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
    font-size: 0.875rem;
    color: var(--paper-dim);
}

.w-footer__top {
    display: grid;
    gap: 2rem clamp(1.5rem, 4vw, 4rem);
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}

.w-footer .w-wordmark__mark {
    height: 30px;
}

.w-footer__blurb {
    max-width: 34ch;
    margin: 0.9rem 0 0;
    line-height: 1.6;
    color: var(--paper-faint);
}

.w-footer__heading {
    margin: 0 0 0.85rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-faint);
}

.w-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.w-footer__list a:hover {
    color: var(--paper);
}

.w-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.75rem;
    font-size: 0.8125rem;
    color: var(--paper-faint);
}

/* -------------------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .w-lead__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .w-lead__story {
        min-height: 0;
    }
}

@media (max-width: 860px) {
    .tfword {
        --header-height: 60px;
    }

    .w-newsletter {
        grid-template-columns: minmax(0, 1fr);
    }

    .w-menutoggle {
        display: inline-flex;
    }

    /* A desk name is a link on touch, so its sections need a control of their
       own rather than a hover state that will never fire. */
    .w-nav__expand {
        display: inline-flex;
        position: absolute;
        top: 0.35rem;
        right: 0;
        width: 44px;
        height: 44px;
    }

    .w-nav__desk {
        position: relative;
    }

    /* The desk menu becomes a disclosure list under the bar rather than a row
       of hover targets, which do not exist on touch. */
    .w-nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        padding: 0.5rem var(--gutter) 1.5rem;
        background: var(--ink);
        border-bottom: 1px solid var(--line);
    }

    .w-nav[data-open="true"] {
        display: flex;
    }

    .w-nav__link {
        justify-content: space-between;
        padding: 0.9rem 0;
        font-size: 1rem;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }

    .w-nav__desk:hover .w-nav__link {
        background: none;
    }

    .w-nav__sections {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        padding: 0.5rem 0 0.75rem;
        background: none;
        border: 0;
        box-shadow: none;
        display: none;
    }

    .w-nav__desk[data-open="true"] .w-nav__sections {
        display: block;
    }

    .w-nav__desk[data-open="true"] .w-nav__chevron {
        transform: translateY(1px) rotate(225deg);
    }

    /* Below the fold width the copy sits under the picture rather than over
       it, where a scrim would only mute it. The two move into separate grid
       rows: leaving the copy in the shared cell as a static element would let
       the positioned frame paint over it, whatever the source order says. */
    .w-lead__story {
        grid-template-rows: auto auto;
    }

    .w-lead__copy {
        grid-area: 2 / 1;
        align-self: start;
        padding: 1.1rem 0 0;
        background: none;
    }

    .w-lead__scrim {
        display: none;
    }

    .w-lead__story {
        background: none;
    }

    .w-footer__top {
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    }
}

@media (max-width: 560px) {
    .w-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .w-card--sm .w-card__frame {
        width: 88px;
    }

    .w-wordmark__by {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   13. Motion and print
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html.tfword-root {
        scroll-behavior: auto;
    }

    .tfword *,
    .tfword *::before,
    .tfword *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .w-header,
    .w-search,
    .w-progress,
    .w-share,
    .w-cta,
    .w-footer,
    .w-rail {
        display: none !important;
    }

    body.tfword {
        background: #fff;
        color: #000;
    }

    .w-prose {
        max-width: none;
        color: #000;
    }
}