/* ==========================================================
   PICTURA POESIS
========================================================== */

:root {
    --black:#070909;
    --black-soft:#0d1010;
    --black-raised:#111515;
    --ash:#8b918e;
    --ash-light:#aaa7a0;
    --parchment:#e3ddd1;
    --white:#f2efe7;
    --dust:#958b7f;
    --line:rgba(227,221,209,.11);
    --line-strong:rgba(227,221,209,.28);
    --font-display:"Cormorant Garamond",serif;
    --font-body:"Inter",sans-serif;
    --content-width:1220px;
    --section-width:min(calc(100% - 12vw),var(--content-width));
    --bg-main:url("../images/background.png");
    --bg-history:url("../images/history-bg.png");
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
    margin:0;
    background:var(--black);
    color:var(--parchment);
    font-family:var(--font-body);
    font-weight:300;
    line-height:1.7;
    overflow-x:hidden;
}

img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
p { margin-top:0; }

::selection {
    background:var(--parchment);
    color:var(--black);
}

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

/* TYPOGRAPHY */

h1,h2,h3,h4 {
    margin:0;
    font-family:var(--font-display);
    font-weight:500;
}

h2 { font-size:clamp(3.4rem,7vw,6.7rem); line-height:.92; }
h3 { font-size:clamp(2.8rem,5.7vw,5.3rem); line-height:.93; }
h4 { font-size:clamp(1.9rem,3vw,2.6rem); line-height:1; }

.eyebrow {
    margin-bottom:1.35rem;
    color:var(--ash);
    font-size:.66rem;
    font-weight:500;
    letter-spacing:.33em;
    text-transform:uppercase;
}

.lead {
    max-width:760px;
    font-family:var(--font-display);
    font-size:clamp(1.55rem,3vw,2.5rem);
    line-height:1.34;
}

.lead-small {
    font-family:var(--font-display);
    font-size:clamp(1.5rem,2.4vw,2.15rem);
    line-height:1.35;
}

.body-copy { max-width:690px; }

/* HEADER */

.site-header {
    position:absolute;
    top:0;
    left:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:2rem 4vw;
}

.header-logo { display:block; width:155px; }
.header-logo img { width:100%; opacity:.93; }

.desktop-nav {
    display:flex;
    align-items:center;
    gap:2rem;
    font-size:.66rem;
    font-weight:500;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.desktop-nav a {
    position:relative;
    padding:.4rem 0;
    opacity:.66;
    transition:opacity .2s ease;
}

.desktop-nav a::after {
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:1px;
    background:var(--parchment);
    transition:width .25s ease;
}

.desktop-nav a:hover,
.desktop-nav .nav-active { opacity:1; }

.desktop-nav a:hover::after,
.desktop-nav .nav-active::after { width:100%; }

/* MOBILE MENU */

.mobile-menu { display:none; }

.mobile-menu summary {
    list-style:none;
    cursor:pointer;
    color:var(--parchment);
    font-size:.62rem;
    font-weight:500;
    letter-spacing:.22em;
    text-transform:uppercase;
}

.mobile-menu summary::-webkit-details-marker { display:none; }

.mobile-menu nav {
    position:absolute;
    top:4.7rem;
    right:5vw;
    display:flex;
    flex-direction:column;
    min-width:180px;
    padding:1.4rem;
    background:rgba(7,9,9,.96);
    border:1px solid var(--line-strong);
    backdrop-filter:blur(12px);
}

.mobile-menu nav a {
    padding:.75rem 0;
    border-bottom:1px solid var(--line);
    font-size:.67rem;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.mobile-menu nav a:last-child { border-bottom:0; }

/* BUTTONS & LINKS */

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:175px;
    padding:.95rem 1.6rem;
    border:1px solid var(--line-strong);
    font-size:.66rem;
    font-weight:500;
    letter-spacing:.18em;
    text-transform:uppercase;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
}

.button-primary {
    background:var(--parchment);
    color:var(--black);
    border-color:var(--parchment);
}

.button-primary:hover {
    background:var(--white);
    border-color:var(--white);
}

.button-secondary {
    background:rgba(7,9,9,.18);
    backdrop-filter:blur(3px);
}

.button-secondary:hover {
    background:rgba(7,9,9,.52);
    border-color:var(--parchment);
}

.text-link {
    display:inline-block;
    position:relative;
    margin-top:1.5rem;
    padding-bottom:.35rem;
    font-size:.65rem;
    font-weight:500;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.text-link::after,
.streaming-links a::after {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background:var(--dust);
    transform-origin:left center;
    transition:transform .2s ease;
}

.text-link:hover::after,
.streaming-links a:hover::after { transform:scaleX(.35); }

/* GLOBAL */

.section {
    width:var(--section-width);
    margin:0 auto;
    padding:8.5rem 0;
}

.section-heading { margin-bottom:5.5rem; }

.section-heading>p:last-child {
    margin:1.6rem 0 0;
    color:var(--ash);
}

/* HOME HERO */

.hero {
    position:relative;
    display:flex;
    align-items:center;
    min-height:100svh;
    padding:10rem 6vw 6rem;
    background:
        linear-gradient(90deg,rgba(7,9,9,.92) 0%,rgba(7,9,9,.68) 42%,rgba(7,9,9,.26) 100%),
        var(--bg-main) center/cover no-repeat;
    overflow:hidden;
}

.hero::before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 80% 35%,rgba(164,102,69,.08),transparent 34%);
    pointer-events:none;
}

.hero::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,transparent 54%,rgba(7,9,9,.2) 70%,var(--black) 100%);
    pointer-events:none;
}

.hero-content {
    position:relative;
    z-index:2;
    width:min(820px,86vw);
}

.hero-logo {
    width:min(690px,82vw);
    max-height:300px;
    object-fit:contain;
    object-position:left center;
}

.hero-tagline {
    max-width:610px;
    margin:2.2rem 0 0;
    font-family:var(--font-display);
    font-size:clamp(1.5rem,2.6vw,2.15rem);
    line-height:1.3;
}

.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:.9rem;
    margin-top:2.7rem;
}

.hero-scroll {
    position:absolute;
    z-index:5;
    right:2vw;
    bottom:5rem;
    color:var(--ash);
    font-size:.58rem;
    letter-spacing:.38em;
    text-transform:uppercase;
    transform:rotate(90deg);
}

/* INTERNAL PAGE HERO */

.page-hero {
    position:relative;
    display:flex;
    align-items:flex-end;
    min-height:48vh;
    padding:9rem 7vw 4.5rem;
    background:
        linear-gradient(90deg,rgba(7,9,9,.94) 0%,rgba(7,9,9,.72) 50%,rgba(7,9,9,.40) 100%),
        var(--bg-main) center/cover no-repeat;
    overflow:hidden;
}

/* Alleen History krijgt de nieuwe afbeelding */
.history-page .page-hero {
    background:
        linear-gradient(90deg,rgba(7,9,9,.96) 0%,rgba(7,9,9,.78) 48%,rgba(7,9,9,.46) 100%),
        var(--bg-history) center/cover no-repeat;
}

.page-hero::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(7,9,9,.10),rgba(7,9,9,.15) 55%,var(--black) 100%);
    pointer-events:none;
}

.page-hero-content {
    position:relative;
    z-index:2;
    width:min(720px,100%);
}

.page-title {
    margin:0;
    color:var(--white);
    font-family:var(--font-display);
    font-size:clamp(4rem,8vw,7rem);
    font-weight:500;
    line-height:.82;
}

.page-lead {
    max-width:560px;
    margin:2rem 0 0;
    color:var(--parchment);
    font-family:var(--font-display);
    font-size:clamp(1.25rem,2vw,1.7rem);
    line-height:1.35;
}

/* INTRO */

.intro,
.page-intro {
    display:grid;
    border-bottom:1px solid var(--line);
}

.intro {
    grid-template-columns:minmax(100px,190px) 1fr;
    gap:clamp(2rem,6vw,7rem);
}

.page-intro {
    grid-template-columns:130px minmax(0,760px);
    justify-content:start;
    gap:3.5rem;
    padding-block:5.5rem;
}

.section-rule { padding-top:.7rem; }

.section-rule::before {
    content:"";
    display:block;
    width:100%;
    height:1px;
    background:linear-gradient(90deg,var(--line-strong),transparent);
}

.section-rule span {
    display:block;
    width:5px;
    height:5px;
    margin-top:-3px;
    background:var(--dust);
    transform:rotate(45deg);
}

.intro h2,
.page-intro h2 { margin-bottom:2.8rem; }

.intro .body-copy,
.page-intro .body-copy { color:var(--ash-light); }

.intro .body-copy { margin-top:2.3rem; }

.page-intro h2 { font-size:clamp(3.1rem,5.2vw,5.2rem); }

.page-intro .lead {
    max-width:650px;
    font-size:clamp(1.35rem,2.2vw,1.95rem);
}

.page-intro .body-copy {
    max-width:620px;
    margin-top:1.8rem;
}

/* DISCOGRAPHY */

.discography { padding-top:9.5rem; }

.release {
    display:grid;
    grid-template-columns:minmax(280px,510px) minmax(300px,1fr);
    gap:clamp(4rem,8vw,8rem);
    align-items:center;
    padding:5rem 0;
    border-top:1px solid var(--line);
}

.release-feature {
    padding-top:0;
    border-top:0;
}

.release-reverse {
    grid-template-columns:minmax(300px,1fr) minmax(280px,510px);
}

.release-reverse .release-cover { grid-column:2; }

.release-reverse .release-info {
    grid-column:1;
    grid-row:1;
}

.release-cover { position:relative; }

.release-cover::after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:1rem -1rem -1rem 1rem;
    border:1px solid rgba(149,139,127,.23);
}

.release-cover img {
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    background:var(--black-raised);
    box-shadow:0 24px 65px rgba(0,0,0,.38);
    transition:transform .5s ease;
}

.release:hover .release-cover img { transform:scale(1.012); }

.release-type {
    margin-bottom:1.3rem;
    color:var(--ash);
    font-size:.65rem;
    font-weight:500;
    letter-spacing:.22em;
    text-transform:uppercase;
}

.release-info h3 { margin-bottom:1.8rem; }

.release-info>p:not(.release-type) {
    max-width:540px;
    color:var(--ash-light);
}

.streaming-links {
    display:flex;
    flex-wrap:wrap;
    gap:1.4rem;
    margin-top:2.2rem;
}

.streaming-links a {
    position:relative;
    padding-bottom:.32rem;
    font-size:.64rem;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
}

/* HOME ARCHIVE */

.archive-heading {
    padding-top:7rem;
    margin-bottom:3rem;
    border-top:1px solid var(--line);
}

.archive-heading h3 { font-size:clamp(2.8rem,5vw,4.6rem); }

.archive-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2rem;
}

.archive-release {
    overflow:hidden;
    background:var(--black-soft);
    border:1px solid var(--line);
}

.archive-cover { overflow:hidden; }

.archive-cover img {
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    filter:saturate(.82);
    transition:transform .55s ease,filter .4s ease;
}

.archive-release:hover .archive-cover img {
    transform:scale(1.025);
    filter:saturate(1);
}

.archive-details { padding:2.1rem; }
.archive-details h4 { margin-bottom:1.2rem; }

.archive-details p:last-child {
    margin-bottom:0;
    color:var(--ash-light);
}

/* HOME CONCEPT */

.concept-section {
    position:relative;
    display:flex;
    align-items:center;
    min-height:760px;
    margin-top:4rem;
    overflow:hidden;
}

.concept-background {
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(7,9,9,.94),rgba(7,9,9,.68) 52%,rgba(7,9,9,.3)),
        var(--bg-main) center/cover no-repeat;
    filter:saturate(.74);
}

.concept-background::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,var(--black),transparent 18%,transparent 82%,var(--black));
}

.concept-inner {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(170px,1fr) minmax(300px,750px);
    gap:5rem;
    width:var(--section-width);
    margin:0 auto;
    padding:9rem 0;
}

.concept-mark { padding-top:.7rem; }

.concept-mark span {
    display:block;
    width:85px;
    height:1px;
    margin-bottom:1.3rem;
    background:var(--line-strong);
}

.concept-mark p {
    color:var(--dust);
    font-family:var(--font-display);
    font-size:1rem;
    font-style:italic;
    letter-spacing:.07em;
}

.concept-copy h2 { margin-bottom:2.8rem; }

.concept-copy>p:not(.eyebrow):not(.lead) {
    max-width:650px;
    color:var(--ash-light);
}

/* ABOUT / WORKS MANIFESTO */

.about,
.works-manifesto {
    display:grid;
    grid-template-columns:minmax(300px,1fr) minmax(300px,520px);
    align-items:end;
    border-bottom:1px solid var(--line);
}

.about { gap:clamp(4rem,10vw,10rem); }

.works-manifesto {
    gap:5rem;
    padding-block:5.5rem;
}

.about-copy>p:not(.lead-small),
.works-manifesto-copy>p:not(.lead-small) { color:var(--ash-light); }

.works-manifesto h2 { font-size:clamp(3.1rem,5.2vw,5.2rem); }

.works-manifesto .lead-small {
    font-size:clamp(1.35rem,2vw,1.8rem);
}

/* NEXT CHAPTER */

.next-chapter {
    position:relative;
    display:flex;
    align-items:center;
    min-height:72vh;
    padding:8rem 6vw;
    background:
        linear-gradient(90deg,rgba(7,9,9,.94),rgba(7,9,9,.52)),
        var(--bg-main) 70% center/cover no-repeat;
    border-bottom:1px solid var(--line);
}

.next-chapter::after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 78% 45%,rgba(164,102,69,.11),transparent 32%);
}

.next-chapter-inner {
    position:relative;
    z-index:2;
    width:min(850px,100%);
}

.next-chapter h2 { margin-bottom:2.4rem; }

.chapter-note {
    margin-top:2rem;
    color:var(--ash);
    font-size:.78rem;
    letter-spacing:.06em;
}

/* LIVE */

.live {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6rem;
    align-items:end;
}

.show-row {
    display:grid;
    grid-template-columns:130px 1fr;
    gap:2rem;
    padding:1.5rem 0;
    border-top:1px solid var(--line-strong);
    border-bottom:1px solid var(--line);
}

.show-status {
    color:var(--dust);
    font-size:.65rem;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.live-follow {
    margin:1.8rem 0 0;
    color:var(--ash);
    font-size:.85rem;
}

/* CONTACT */

.contact {
    position:relative;
    padding:10rem 6vw;
    text-align:center;
    background:var(--black-soft);
    border-top:1px solid var(--line);
}

.contact-inner {
    width:min(900px,100%);
    margin:0 auto;
}

.contact h2 { margin-bottom:2.3rem; }

.contact-intro {
    margin-bottom:2rem;
    color:var(--ash);
}

.email-link {
    display:inline-block;
    margin-bottom:2.7rem;
    font-family:var(--font-display);
    font-size:clamp(1.2rem,2.2vw,1.7rem);
    border-bottom:1px solid var(--line-strong);
}

.contact-actions { margin-bottom:3.5rem; }

.social-links {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:1rem 2rem;
}

.social-links a {
    color:var(--ash-light);
    font-size:.65rem;
    font-weight:500;
    letter-spacing:.17em;
    text-transform:uppercase;
    transition:color .2s ease;
}

.social-links a:hover { color:var(--white); }

/* HISTORY */

.timeline-section {
    padding-top:5.5rem;
    padding-bottom:5.5rem;
}

.timeline-section h2 { font-size:clamp(3.1rem,5.2vw,5.2rem); }

.timeline { position:relative; }

.timeline::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:210px;
    width:1px;
    background:linear-gradient(to bottom,transparent,var(--line-strong) 4%,var(--line-strong) 96%,transparent);
}

.timeline-entry {
    display:grid;
    grid-template-columns:170px 80px minmax(0,1fr);
    padding:3rem 0;
    border-top:1px solid var(--line);
}

.timeline-entry:first-child { border-top:0; }

.timeline-year {
    padding-top:.4rem;
    color:var(--dust);
    font-family:var(--font-display);
    font-size:1.35rem;
    letter-spacing:.05em;
}

.timeline-marker { position:relative; }

.timeline-marker::before {
    content:"";
    position:absolute;
    top:.8rem;
    left:36px;
    width:9px;
    height:9px;
    background:var(--black);
    border:1px solid var(--dust);
    transform:rotate(45deg);
}

.timeline-content { max-width:650px; }

.timeline-label {
    margin-bottom:1rem;
    color:var(--ash);
    font-size:.64rem;
    font-weight:500;
    letter-spacing:.19em;
    text-transform:uppercase;
}

.timeline-content h3 {
    margin-bottom:1.4rem;
    font-size:clamp(2.4rem,4vw,3.8rem);
}

.timeline-content>p:not(.timeline-label) {
    margin-bottom:1rem;
    color:var(--ash-light);
    font-size:.92rem;
}

.timeline-release {
    display:flex;
    align-items:center;
    gap:1.3rem;
    margin-top:2rem;
}

.timeline-release img {
    width:70px;
    height:70px;
    object-fit:cover;
    filter:saturate(.8);
}

.timeline-release span {
    color:var(--ash);
    font-size:.64rem;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.timeline-entry-current .timeline-marker::before { background:var(--dust); }

.history-manifesto {
    position:relative;
    display:flex;
    align-items:center;
    min-height:68vh;
    padding:8rem 6vw;
    background:
        linear-gradient(90deg,rgba(7,9,9,.93),rgba(7,9,9,.52)),
        var(--bg-main) 65% center/cover no-repeat;
}

.history-manifesto-inner { width:min(820px,100%); }

.history-manifesto h2,
.archive-callout h2 { margin-bottom:2.5rem; }

.history-manifesto .button,
.archive-callout .button { margin-top:2rem; }

/* WORKS */

.method-section {
    width:var(--section-width);
    margin:0 auto;
    padding:3rem 0 9rem;
}

.method-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.method-step {
    position:relative;
    min-height:300px;
    padding:2.8rem 2.2rem;
    border-right:1px solid var(--line);
}

.method-step:last-child { border-right:0; }

.method-number {
    position:absolute;
    top:2rem;
    right:2rem;
    color:rgba(227,221,209,.12);
    font-family:var(--font-display);
    font-size:4rem;
}

.method-step h3 {
    margin-bottom:1.6rem;
    font-size:clamp(2.3rem,3vw,3.3rem);
}

.method-step>p:last-child { color:var(--ash-light); }

.works-archive {
    padding-top:5.5rem;
    padding-bottom:5.5rem;
}

.works-archive h2 { font-size:clamp(3.1rem,5.2vw,5.2rem); }

.work-release {
    display:grid;
    grid-template-columns:minmax(280px,500px) minmax(300px,1fr);
    gap:5rem;
    align-items:start;
    padding:4.5rem 0;
    border-top:1px solid var(--line);
}

.work-release-reverse {
    grid-template-columns:minmax(300px,1fr) minmax(280px,500px);
}

.work-release-reverse .work-release-art { grid-column:2; }

.work-release-reverse .work-release-content {
    grid-column:1;
    grid-row:1;
}

.work-release-art {
    position:sticky;
    top:2rem;
}

.work-release-art img {
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    box-shadow:0 30px 70px rgba(0,0,0,.35);
}

.work-release-content h3 {
    margin-bottom:2rem;
    font-size:clamp(2.6rem,4.5vw,4.3rem);
}

.work-release-content>p:not(.release-type) {
    max-width:580px;
    color:var(--ash-light);
}

/* TRACK LISTS */

.track-list {
    list-style:none;
    margin:3rem 0 1rem;
    padding:0;
    border-top:1px solid var(--line);
}

.track-list li {
    display:grid;
    grid-template-columns:48px 1fr;
    gap:1rem;
    padding:.9rem 0;
    border-bottom:1px solid var(--line);
    font-family:var(--font-display);
    font-size:1.15rem;
}

.track-list span {
    color:var(--ash);
    font-family:var(--font-body);
    font-size:.62rem;
    letter-spacing:.12em;
}

.single-track {
    margin-top:2.5rem;
    padding:1.2rem 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    color:var(--ash-light);
    font-family:var(--font-display);
    font-size:1.25rem;
}

/* EARLY WORKS */

.works-early {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2rem;
    padding-top:6rem;
    border-top:1px solid var(--line);
}

.early-work {
    background:var(--black-soft);
    border:1px solid var(--line);
}

.early-work img {
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
}

.early-work>div { padding:2.2rem; }

.early-work h3 {
    margin-bottom:1.5rem;
    font-size:clamp(2.5rem,4vw,3.8rem);
}

.early-work p:last-child,
.compact-track-list { color:var(--ash-light); }

.compact-track-list {
    margin:1.5rem 0 0;
    padding-left:1.25rem;
}

.compact-track-list li { padding:.25rem 0; }

/* WORKS CALLOUT */

.archive-callout {
    position:relative;
    display:flex;
    align-items:center;
    min-height:67vh;
    padding:8rem 6vw;
    background:
        linear-gradient(90deg,rgba(7,9,9,.95),rgba(7,9,9,.55)),
        var(--bg-main) 70% center/cover no-repeat;
}

.archive-callout-inner { width:min(830px,100%); }

/* FOOTER */

.footer {
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:3rem;
    align-items:center;
    padding:3.5rem 6vw;
    background:var(--black);
    border-top:1px solid var(--line);
}

.footer-logo {
    display:block;
    width:135px;
}

.footer-logo img {
    width:100%;
    opacity:.65;
}

.footer-tagline {
    margin:0;
    color:var(--ash);
    font-family:var(--font-display);
    font-size:.95rem;
    letter-spacing:.1em;
}

.footer small {
    color:var(--ash);
    font-size:.62rem;
}

/* TABLET */

@media (max-width:950px) {
    .desktop-nav { gap:1.2rem; }

    .release,
    .release-reverse,
    .work-release,
    .work-release-reverse { gap:4rem; }

    .concept-inner { grid-template-columns:130px 1fr; }

    .about,
    .works-manifesto { gap:4rem; }

    .timeline::before { left:175px; }

    .timeline-entry { grid-template-columns:135px 80px 1fr; }
}

/* MOBILE */

@media (max-width:750px) {
    .site-header { padding:1.4rem 6vw; }
    .header-logo { width:105px; }
    .desktop-nav { display:none; }
    .mobile-menu { display:block; }

    .hero {
        min-height:92svh;
        padding:8rem 6vw 5rem;
        background:
            linear-gradient(90deg,rgba(7,9,9,.90),rgba(7,9,9,.60)),
            var(--bg-main) 64% center/cover no-repeat;
    }

    .hero-content { width:100%; }
    .hero-logo { width:min(520px,96%); }
    .hero-tagline { font-size:1.45rem; }

    .hero-actions {
        flex-direction:column;
        align-items:flex-start;
    }

    .button { min-width:185px; }
    .hero-scroll { display:none; }

    .page-hero {
        min-height:70svh;
        padding:9rem 6vw 5rem;
        background:
            linear-gradient(90deg,rgba(7,9,9,.91),rgba(7,9,9,.57)),
            var(--bg-main) 64% center/cover no-repeat;
    }

    .history-page .page-hero {
        background:
            linear-gradient(90deg,rgba(7,9,9,.94),rgba(7,9,9,.66)),
            var(--bg-history) 46% center/cover no-repeat;
    }

    .page-title { font-size:clamp(4.8rem,23vw,7rem); }

    .section {
        width:calc(100% - 12vw);
        padding:6rem 0;
    }

    .intro,
    .page-intro {
        grid-template-columns:1fr;
        gap:2rem;
    }

    .section-rule { width:90px; }

    .release,
    .release-reverse,
    .work-release,
    .work-release-reverse {
        display:flex;
        flex-direction:column;
        gap:3rem;
        padding:4.5rem 0;
    }

    .release-reverse .release-cover,
    .release-reverse .release-info,
    .work-release-reverse .work-release-art,
    .work-release-reverse .work-release-content {
        grid-column:auto;
        grid-row:auto;
    }

    .release-cover::after { inset:.7rem -.7rem -.7rem .7rem; }
    .work-release-art { position:static; }
    .streaming-links { gap:1rem 1.4rem; }
    .archive-heading { padding-top:5rem; }
    .archive-grid { grid-template-columns:1fr; }
    .concept-section { min-height:650px; }

    .concept-inner {
        grid-template-columns:1fr;
        gap:2rem;
        padding:7rem 0;
    }

    .concept-mark {
        padding-bottom:1rem;
        border-bottom:1px solid var(--line);
    }

    .about,
    .works-manifesto {
        grid-template-columns:1fr;
        gap:3rem;
    }

    .next-chapter {
        min-height:65vh;
        padding:7rem 6vw;
    }

    .live {
        grid-template-columns:1fr;
        gap:3rem;
    }

    .show-row {
        grid-template-columns:1fr;
        gap:.5rem;
    }

    .contact {
        padding:7rem 6vw;
        text-align:left;
    }

    .social-links { justify-content:flex-start; }

    .timeline::before { left:10px; }

    .timeline-entry {
        grid-template-columns:35px 1fr;
        gap:0;
        padding:3.5rem 0;
    }

    .timeline-year {
        grid-column:2;
        margin-bottom:1.2rem;
        padding:0;
    }

    .timeline-marker {
        grid-column:1;
        grid-row:1/span 2;
    }

    .timeline-marker::before {
        top:.4rem;
        left:6px;
    }

    .timeline-content { grid-column:2; }

    .method-section {
        width:calc(100% - 12vw);
        padding-bottom:6rem;
    }

    .method-grid { grid-template-columns:1fr; }

    .method-step {
        min-height:auto;
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .method-step:last-child { border-bottom:0; }
    .works-early { grid-template-columns:1fr; }

    .footer {
        grid-template-columns:1fr;
        gap:1.5rem;
    }
}

/* SMALL SCREENS */

@media (max-width:420px) {
    h2 { font-size:clamp(3rem,15vw,4.4rem); }
    h3 { font-size:clamp(2.7rem,14vw,4rem); }
    .hero { padding-top:7.5rem; }
    .hero-logo { width:100%; }
    .release-cover::after { display:none; }
    .archive-details { padding:1.7rem; }
    .email-link { font-size:1.1rem; }
    .contact .button { width:100%; }
    .method-step { padding:3rem 1.5rem; }
}

/* ACCESSIBILITY */

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

    *,
    *::before,
    *::after {
        transition-duration:.01ms!important;
        animation-duration:.01ms!important;
    }
}