/* ==========================================================================
   artist.css — turns the tech look into a studio/gallery look.
   Loaded last, unlayered, so it beats the layered component rules and the
   unlayered button rules by order. Class names are untouched.
   ========================================================================== */

/* ── 1. Tokens: warm paper + ink + madder red ─────────────────────────── */
:root {
  color-scheme: light;

  --bg-core:    #f3eee4;          /* paper */
  --bg-surface: #faf6ee;          /* lighter sheet */
  --bg-card:    #faf6ee;
  --text:       #231d19;          /* ink */
  --text-muted: #6e645b;
  --line:       #d9d0c1;          /* pencil line */
  --border-color: var(--line);

  --accent:        #b4472d;       /* madder / terracotta */
  --accent-bright: #c95a3d;
  --accent-deep:   #8f3520;
  --accent-violet: #8f3520;       /* old name, remapped so gradients go flat */
  --accent-primary: var(--accent);
  --accent-glow:  transparent;    /* kill glows */
  --accent-halo:  transparent;
  --border-glow:  var(--accent);

  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-hand:    'Caveat', cursive;

  --radius:    2px;               /* nearly square, like paper */
  --radius-sm: 2px;

  --ease-out: cubic-bezier(.22, .61, .36, 1);   /* soft, no snap */
  --t: .35s;

  --shadow-lift: 0 1px 1px rgb(60 40 20 / .08),
                 0 10px 24px -12px rgb(60 40 20 / .35);
}

/* Optional dark "gallery night" theme: warm, never blue-black */
[data-theme="night"] {
  color-scheme: dark;
  --bg-core:    #1b1613;
  --bg-surface: #241d19;
  --bg-card:    #241d19;
  --text:       #f1e9dc;
  --text-muted: #a99d8e;
  --line:       #3b312a;
  --accent:     #e0805f;
  --accent-bright: #ec9376;
  --accent-deep:   #c8664a;
  --accent-violet: #c8664a;
}

/* ── 2. Page: paper grain instead of atmospheric glow ────────────────── */
body {
  background-color: var(--bg-core);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .2  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
}
body::before, body::after { display: none; }   /* remove glow blobs if present */

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: none;
}
h1 { font-size: clamp(2.6rem, 1.5rem + 5vw, 5rem); font-style: italic; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); }

/* Small-caps labels for metadata (year, medium, size, tags) */
.label, .meta, .tag, small {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* One handwritten note, used sparingly */
.hand { font-family: var(--font-hand); font-size: 1.35rem; color: var(--accent); }

::selection { background: var(--accent); color: #fff; }

/* ── 3. Surfaces: paper cards, no glass ───────────────────────────────── */
.glass-panel, .glass-float, .glass, .snackbar {
  background: var(--bg-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, var(--shadow-lift);
}

/* ── 4. Buttons: flat ink, no gradient, no glow ──────────────────────── */
.btn, .btn-primary, .glow-button {
  --_btn-bg: var(--text);
  --_btn-bg-hover: var(--accent);
  --_btn-edge: var(--text);
  background: var(--text);
  color: var(--bg-core);
  border: 1px solid var(--text);
  border-radius: var(--radius);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .7rem 1.5rem;
  transition: background-color var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out),
              color var(--t) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .btn-primary:hover, .glow-button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: none;
    filter: none;
    box-shadow: none;
  }
}
.btn:active, .btn-primary:active, .glow-button:active { transform: translateY(1px); }

/* Secondary: just an underlined word, like a link in a book */
.btn-ghost, .btn-link {
  background: none; border: 0; color: var(--text); padding: 0;
  text-decoration: underline; text-underline-offset: .3em;
  text-decoration-thickness: 1px; text-transform: none; letter-spacing: 0;
}
.btn-ghost:hover { color: var(--accent); }

/* ── 5. Artwork: framed print with a mat and a caption ───────────────── */
.art-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(.6rem, 1.2vw, 1rem);            /* the passe-partout mat */
  box-shadow: var(--shadow-lift);
  transition: box-shadow var(--t) var(--ease-out);
}
.art-card img {
  border-radius: 0;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08);        /* thin edge of the print */
  transition: filter .5s var(--ease-out), opacity .5s var(--ease-out);
  filter: saturate(.96);
}
.art-card::after { display: none; }              /* remove cursor spotlight */

@media (hover: hover) and (pointer: fine) {
  .art-card:hover, .art-card:focus-within {
    transform: none;                             /* no lift, no scale */
    border-color: var(--line);
    box-shadow: 0 1px 1px rgb(60 40 20 / .1), 0 18px 34px -14px rgb(60 40 20 / .45);
  }
  .art-card:hover img, .art-card:focus-within img {
    transform: none;
    filter: saturate(1.05) contrast(1.02);
  }
}

/* Museum label under each piece */
.art-card figcaption, .art-card .caption {
  padding-top: .75rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--text);
}
.art-card figcaption small, .art-card .caption small {
  display: block; margin-top: .15rem;
}

/* A hint of hand-hung looseness (very small, optional) */
.masonry-grid > .art-card:nth-child(3n+1) { rotate: -.35deg; }
.masonry-grid > .art-card:nth-child(3n+2) { rotate:  .25deg; }
@media (prefers-reduced-motion: reduce) { .masonry-grid > .art-card { rotate: 0deg; } }

.masonry-grid { column-gap: clamp(1.25rem, 3vw, 2.5rem); }
.masonry-grid > * { margin-bottom: clamp(1.25rem, 3vw, 2.5rem); }

/* ── 6. Lightbox: dim wall, no blur ──────────────────────────────────── */
dialog.lightbox::backdrop {
  background: rgb(24 18 14 / .92);
  backdrop-filter: none;
}
dialog.lightbox img {
  border-radius: 0;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6);
}

/* ── 7. Motion: slow, soft, physical ─────────────────────────────────── */
.reveal { animation-duration: 1s; animation-timing-function: var(--ease-out); }
@keyframes rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* Remove tech-flavoured effects */
.pulse-ring::after, .animate-count-pulse, .skeleton { animation: none; }
.skeleton { background: color-mix(in srgb, var(--line) 60%, transparent); }
.cursor { display: none !important; }
.over-art { mix-blend-mode: normal; color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / .45); }

/* ── 8. Forms and links ──────────────────────────────────────────────── */
input, textarea, select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--text);
  border-radius: 0;
  padding: .6rem 0;
  color: var(--text);
  font-family: var(--font-body);
}
input:focus, textarea:focus, select:focus { outline: none; border-bottom-color: var(--accent); }
::placeholder { color: var(--text-muted); font-style: italic; }

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }   /* no glow */

/* Toggle: ink on paper */
.check-toggle label, .toggle i { background: var(--line); border-color: var(--line); }
.check-toggle input:checked + label, .toggle input:checked + i { background: var(--accent); }

/* Timeline: a pencil line, not a gradient beam */
.story-chapter-line::before, .timeline::before {
  background: var(--line); width: 1px;
}

/* ── 9. Scrollbar: quiet ─────────────────────────────────────────────── */
::-webkit-scrollbar-track { background: var(--bg-core); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }