/* ============================================================
   SALON — kaitlinquinn.com

   The site is what she wears. Structure is the body,
   color is the expression. Every section is a full-bleed color field.

   PALETTE, True Winter (personal)
   PRIMARY    Ink #0d1b2a, Snow #f7f8fa          the body
   SECONDARY  Cold Navy #1b3a5b, Icy Blue #c9dcec   structure
   ACCENT     Fuchsia #9d2f5a                    pops only

   Groundtruth 911 keeps its own warm palette elsewhere. The two
   share exactly one color: Fuchsia and Peony are both #9d2f5a.

   Type: Fraunces display, Tenor Sans body (never bold), Courier Prime data
   ============================================================ */

:root {
    --ink:        #0d1b2a;
    --snow:       #f7f8fa;
    --navy:       #1b3a5b;
    --icy:        #c9dcec;
    --fuchsia:    #9d2f5a;

    --gt-green:   #1f4d3a;   /* only survivor of the Groundtruth palette, used on swatches */

    --rule-dark:  rgba(247,248,250,.20);
    --rule-light: rgba(13,27,42,.14);

    --serif: "Fraunces", Georgia, serif;
    --sans: "Tenor Sans", "Helvetica Neue", Arial, sans-serif;
    --mono: "Courier Prime", "SF Mono", monospace;

    --wrap: 1380px;
    --measure: 38rem;
    --pad: clamp(1.25rem, 4vw, 3.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

strong, b {
    font-weight: 400;
    color: var(--fuchsia);
    text-decoration: underline;
    text-decoration-color: rgba(157,47,90,.38);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

body {
    margin: 0;
    background: var(--snow);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--fuchsia); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

.skip-link { position: absolute; left: -9999px; background: var(--ink); color: var(--snow); padding: 1rem 1.5rem; z-index: 200; }
.skip-link:focus { left: 0; top: 0; }

/* ============================================================
   COLOR FIELDS — full-bleed sections
   ============================================================ */
.plate { position: relative; }
.plate-ink   { background: var(--ink);      color: var(--snow); }
.plate-snow  { background: var(--snow);     color: var(--ink); }
.plate-navy  { background: var(--navy);     color: var(--snow); }
.plate-icy   { background: var(--icy);      color: var(--ink); }

.plate-ink a, .plate-navy a, .plate-icy a { color: inherit; }

/* Section eyebrow — museum wall label */
.plate-num {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    opacity: .62;
    margin: 0 0 1.25rem;
}
.plate-ink .plate-num, .plate-navy .plate-num { opacity: .74; }

/* ============================================================
   TYPE
   ============================================================ */
.label {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    margin: 0;
    opacity: .7;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.028em; line-height: .98; margin: 0; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--ink); color: var(--snow);
    border-bottom: 1px solid var(--rule-dark);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; padding-top: 1.125rem; padding-bottom: 1.125rem;
}

.brand { display: inline-flex; align-items: center; gap: .75rem; }
.brand-mark { width: 22px; height: 22px; flex: none; }
.brand-name { font-family: var(--mono); font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; }

.site-nav ul { display: flex; gap: 2.25rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.site-nav a {
    font-family: var(--mono);
    font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase;
    opacity: .72; padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: opacity .25s ease, border-color .25s ease;
}
.site-nav a:hover { opacity: 1; border-bottom-color: var(--fuchsia); }
.site-nav .nav-current a { opacity: 1; border-bottom-color: var(--fuchsia); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 28px; padding: 8px 0; background: none; border: none; cursor: pointer; }
.nav-toggle-bar { display: block; height: 1px; background: var(--snow); transition: transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
    .nav-toggle { display: flex; }
    .header-inner { flex-wrap: wrap; }
    .site-nav { display: none; width: 100%; padding-bottom: 1rem; }
    .site-nav.is-open { display: block; }
    .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav li { border-top: 1px solid var(--rule-dark); }
    .site-nav a { display: block; padding: 1rem 0; font-size: .8125rem; border-bottom: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(4rem, 11vw, 9rem); padding-bottom: clamp(3rem, 8vw, 6rem); overflow: hidden; }

.hero-title {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    line-height: .92;
    letter-spacing: -.045em;
    margin: 1.5rem 0 0;
    text-indent: -.05em;
}
.hero-title .accent { color: var(--fuchsia); font-style: italic; }

.hero-meta {
    display: grid; gap: 2rem;
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    padding-top: 2rem;
    border-top: 1px solid var(--rule-dark);
}
@media (min-width: 900px) {
    .hero-meta { grid-template-columns: minmax(0,3fr) minmax(0,5fr) minmax(0,3fr); gap: 3rem; }
}

.hero-lede { font-size: 1.0625rem; line-height: 1.7; margin: 0; opacity: .88; }
.hero-lede a { border-bottom: 1px solid var(--fuchsia); }
.hero-lede a:hover { color: var(--fuchsia); }

.hero-actions { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

.arrow-link {
    font-family: var(--mono);
    font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: .875rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid currentColor;
    transition: gap .3s ease, color .3s ease;
}
.arrow-link::after { content: "\2192"; }
.arrow-link:hover { gap: 1.5rem; color: var(--fuchsia); }
.plate-snow .arrow-link:hover, .plate-icy .arrow-link:hover { color: var(--fuchsia); }

/* ============================================================
   LEGEND — the map key. One card per page.
   ============================================================ */
.legend { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.legend-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule-light); border: 1px solid var(--rule-light); }
@media (min-width: 700px) { .legend-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .legend-grid { grid-template-columns: repeat(4, 1fr); } }

.legend-item {
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 3.5rem; padding: 2rem 1.75rem 1.75rem;
    background: var(--snow);
    min-height: 15rem;
    transition: background .35s ease, color .35s ease;
}
.legend-item:hover { background: var(--ink); color: var(--snow); }
.legend-item:nth-child(2):hover { background: var(--navy); }
.legend-item:nth-child(3):hover { background: var(--ink); }
.legend-item:nth-child(4):hover { background: var(--navy); }
.legend-item .legend-rule { width: 2rem; height: 2px; background: var(--fuchsia); margin-bottom: 1rem; transition: width .35s ease; }
.legend-item:hover .legend-rule { width: 4rem; }

.legend-num { font-family: var(--mono); font-size: .6875rem; letter-spacing: .24em; opacity: .55; }
.legend-item:hover .legend-num { opacity: .8; }
.legend-title { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.02; }
.legend-note { font-size: .875rem; line-height: 1.55; opacity: .68; margin: .625rem 0 0; }

/* ============================================================
   ENTRY LIST — editorial rows
   ============================================================ */
.section { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }

.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid currentColor;
}
.section-title { font-family: var(--mono); font-size: .6875rem; letter-spacing: .28em; text-transform: uppercase; }
.section-link { font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.section-link:hover { opacity: 1; color: var(--fuchsia); }

.entry-list { list-style: none; margin: 0; padding: 0; }

.entry {
    display: grid; grid-template-columns: 1fr; gap: .5rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--rule-light);
}
.plate-ink .entry, .plate-navy .entry { border-bottom-color: var(--rule-dark); }

@media (min-width: 780px) {
    .entry { grid-template-columns: 7rem minmax(0,1fr) 10rem; gap: 2.5rem; align-items: baseline; }
}

.entry-date { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; opacity: .55; white-space: nowrap; }
.entry-title { font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.08; margin: 0 0 .5rem; transition: color .25s ease; }
.entry:hover .entry-title { color: var(--fuchsia); }
.entry-excerpt { font-size: .9375rem; line-height: 1.65; opacity: .72; margin: 0; max-width: 36rem; }
.entry-tag { font-family: var(--mono); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
@media (min-width: 780px) { .entry-tag { text-align: right; } }
.entry.is-gt .entry-tag { color: var(--gt-green); opacity: .95; }
.plate-ink .entry.is-gt .entry-tag, .plate-navy .entry.is-gt .entry-tag { color: var(--icy); }

/* ============================================================
   STATEMENT — big pull quote as a color field
   ============================================================ */
.statement { padding-top: clamp(4rem, 10vw, 8rem); padding-bottom: clamp(4rem, 10vw, 8rem); }
.statement-inner { max-width: 60rem; }
.statement-text {
    font-size: clamp(2rem, 5.5vw, 4.25rem);
    line-height: 1.02; letter-spacing: -.03em;
    margin: 1.5rem 0 0;
}
.statement-text em { font-style: italic; color: var(--fuchsia); }
.statement-foot { margin-top: 2.5rem; }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header { padding-top: clamp(3.5rem, 9vw, 7rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-header-inner { max-width: 56rem; }
.page-title { font-size: clamp(2.25rem, 5.5vw, 4rem); line-height: .98; margin: 1.25rem 0 0; text-indent: -.035em; }
.page-lede { font-size: 1.0625rem; line-height: 1.7; margin: 2rem 0 0; max-width: 34rem; opacity: .85; }

.feature-image { margin: 0; }
.feature-image img { width: 100%; }
.feature-image figcaption { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; padding: 1rem var(--pad) 0; }

/* ============================================================
   LONG-FORM CONTENT
   ============================================================ */
.content-wrap { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.gh-content { max-width: var(--measure); margin: 0 auto; font-size: 1.0625rem; line-height: 1.8; }
.gh-content > * { margin: 0 0 1.625rem; }
.gh-content > *:last-child { margin-bottom: 0; }
.gh-content p { opacity: .86; }
.gh-content strong { opacity: 1; }

.gh-content h2 {
    font-family: var(--mono);
    font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--fuchsia); line-height: 1.5;
    margin: 4rem 0 1.5rem; padding-top: 2rem;
    border-top: 1px solid var(--rule-light);
}
.gh-content h2::before {
    content: "";
    display: block; width: 2.5rem; height: 2px;
    background: var(--fuchsia); margin-bottom: 1.5rem;
}
.gh-content h3 { font-family: var(--mono); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; margin: 3rem 0 1rem; opacity: .68; }
.gh-content h4 { font-family: var(--sans); font-size: 1rem; font-weight: 400; margin: 2rem 0 .5rem; }

.gh-content a { border-bottom: 1px solid var(--fuchsia); }
.gh-content a:hover { color: var(--fuchsia); }

.gh-content ul, .gh-content ol { padding-left: 1.25rem; opacity: .86; }
.gh-content li { margin-bottom: .625rem; }

.gh-content blockquote {
    margin: 3rem 0; padding: 0 0 0 2rem;
    border-left: 2px solid var(--fuchsia);
    font-family: var(--serif); font-size: 1.5rem; line-height: 1.3;
    font-style: italic; letter-spacing: -.02em;
}
.gh-content blockquote p { opacity: 1; margin-bottom: 0; }

.gh-content hr { border: none; height: 1px; background: var(--rule-light); margin: 4rem 0; }

.gh-content figure { margin: 3rem 0; }
.gh-content figcaption { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-top: 1rem; }

.gh-content code { font-family: var(--mono); font-size: .875em; background: var(--icy); padding: .15em .4em; }
.gh-content pre { background: var(--ink); color: var(--snow); padding: 1.75rem; overflow-x: auto; font-size: .8125rem; line-height: 1.7; }
.gh-content pre code { background: none; padding: 0; }

.gh-content table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.gh-content th, .gh-content td { padding: .875rem 1rem .875rem 0; border-bottom: 1px solid var(--rule-light); text-align: left; }
.gh-content th { font-family: var(--mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; }

.gh-content .kg-width-wide { max-width: min(62rem, 100%); margin-left: 50%; transform: translateX(-50%); width: min(62rem, 100%); }
.gh-content .kg-width-full { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* ============================================================
   FILTERS
   ============================================================ */
.feed-filter { display: flex; flex-wrap: wrap; gap: 2rem; padding-top: 2rem; }
.filter-chip { font-family: var(--mono); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; opacity: .6; padding-bottom: .375rem; border-bottom: 1px solid transparent; }
.filter-chip:hover { opacity: 1; border-bottom-color: var(--fuchsia); }

/* ============================================================
   LOG SECTIONS (The work page)
   ============================================================ */
.log-section { max-width: var(--measure); margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid var(--rule-light); }
.log-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
.log-swatch { width: 1.75rem; height: 1.75rem; flex: none; }
.log-swatch.is-gt { background: var(--gt-green); }
.log-swatch.is-ph { background: var(--navy); }
.log-title { font-family: var(--mono); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; }
.log-list { list-style: none; margin: 0; padding: 0; }
.log-list li { padding: 1rem 0; border-bottom: 1px solid var(--rule-light); }
.log-list li:last-child { border-bottom: none; }
.log-date { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; opacity: .55; display: block; margin-bottom: .25rem; }
.log-link { font-family: var(--serif); font-size: 1.1875rem; }
.log-link:hover { color: var(--fuchsia); }

/* ============================================================
   SUBSCRIBE
   ============================================================ */
.plate-icy .subscribe-form { border-bottom-color: var(--fuchsia); }
.subscribe { padding-top: clamp(3.5rem, 8vw, 6rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.subscribe-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 900px) { .subscribe-grid { grid-template-columns: minmax(0,6fr) minmax(0,5fr); gap: 5rem; align-items: end; } }

.subscribe-title { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.0; margin: 1.25rem 0 0; }
.subscribe-title em { font-style: italic; color: var(--fuchsia); }
.subscribe-form { border-bottom-color: var(--fuchsia) !important; }
.subscribe-form button { color: var(--fuchsia); }
.subscribe-form button:hover { opacity: 1; color: var(--snow); }
.subscribe-copy { font-size: .9375rem; line-height: 1.65; opacity: .82; margin: 0 0 2rem; }

.subscribe-form { display: flex; border-bottom: 1px solid currentColor; }
.subscribe-form input[type="email"] {
    flex: 1; min-width: 0; padding: 1rem 0;
    font-family: var(--sans); font-size: 1rem;
    color: inherit; background: transparent; border: none;
}
.subscribe-form input[type="email"]::placeholder { color: currentColor; opacity: .5; }
.subscribe-form input[type="email"]:focus { outline: none; }
.subscribe-form button {
    padding: 1rem 0 1rem 1.5rem;
    font-family: var(--mono); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
    color: inherit; background: none; border: none; cursor: pointer;
    transition: opacity .25s ease;
}
.subscribe-form button:hover { opacity: .65; }

.form-message { display: none; font-family: var(--mono); font-size: .75rem; margin: 1rem 0 0; }
.success .form-message.success-message { display: block; }
.error .form-message.error-message { display: block; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 3rem; margin-top: 2rem; border-top: 1px solid var(--rule-light);
    font-family: var(--mono); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
}
.page-number { opacity: .55; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { padding-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: minmax(0,6fr) minmax(0,3fr) minmax(0,3fr); gap: 3rem; } }

.footer-statement { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.04; margin: 0; max-width: 30rem; text-wrap: balance; }
.footer-col-title { font-family: var(--mono); font-size: .625rem; letter-spacing: .24em; text-transform: uppercase; opacity: .55; margin: 0 0 1.25rem; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .75rem; }
.footer-list a { font-size: .9375rem; opacity: .8; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.footer-list a:hover { opacity: 1; border-bottom-color: var(--fuchsia); }

.footer-legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); }
.footer-legal p { font-family: var(--mono); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; opacity: .5; margin: 0; }

/* Color bar — the palette as a signature stripe */
.palette-bar { display: flex; height: 6px; }
.palette-bar span { flex: 1; }
.pb-ink     { background: var(--ink); }
.pb-navy    { background: var(--navy); }
.pb-icy     { background: var(--icy); }
.pb-fuchsia { background: var(--fuchsia); }
.pb-gt      { background: var(--gt-green); }

/* ============================================================
   ERROR
   ============================================================ */
.error-page { padding-top: clamp(5rem, 14vw, 10rem); padding-bottom: clamp(5rem, 14vw, 10rem); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}