/*
Theme Name: Atmosferal
Theme URI: https://atmosferal.com
Author: Atmosferal
Description: The Photocopied Insert — Atmosferal's visual world. Toner black on grained paper, one grotesk, one spot color per release, states as print events. See DESIGN.md in the project repo.
Version: 0.1.8
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atmosferal
*/

/* The world's working variables. --spot is overridden per release
   (inline on body by atmosferal-core). */
:root {
  --ink: var(--wp--preset--color--ink, #111111);
  --paper: var(--wp--preset--color--paper, #F6F4F0);
  --shade: var(--wp--preset--color--shade, #ECE9E3);
  --spot: var(--wp--preset--color--spot, #2E7CD6);
}

body {
  /* photocopy ground: real speckle raster, tiled */
  background-image: url("assets/images/paper-grain.png");
}

img { display: block; height: auto; }

a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--spot); outline-offset: 2px; }

/* ---------- boxed label vocabulary ---------- */

.box {
  display: inline-block;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 8px 16px;
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- masthead ---------- */

/* horizontal page padding: plain groups don't receive root padding,
   so the page-level containers carry it themselves */
.masthead, .atmos-section, .close, .atmos-tracks-section {
  padding-left: var(--wp--style--root--padding-left, clamp(16px, 3vw, 40px));
  padding-right: var(--wp--style--root--padding-right, clamp(16px, 3vw, 40px));
}

.masthead {
  padding-top: 20px; padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}
.masthead .wp-block-site-logo img { width: 64px; height: 64px; }
.masthead .wp-block-navigation a {
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
}
/* overprint: the current page printed twice, out of register —
   blue impression peeking from behind the glyphs */
.masthead .wp-block-navigation .current-menu-item > a,
.masthead .wp-block-navigation a:hover {
  text-shadow: 4px 3px 0 color-mix(in srgb, var(--spot) 88%, transparent);
}

/* ---------- release spread: plate + clipped labels ---------- */

.atmos-spread {
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(300px, 35fr);
  align-items: start;
  /* the plate bleeds to the page edge: the spread's parent carries no padding */
}

.atmos-spread .atmos-plate { margin: 0; }
.atmos-spread .atmos-plate img {
  width: 100%;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.atmos-edge {
  position: relative;
  z-index: 1;           /* the pasted labels sit ON the plate, never under it */
  padding: 48px var(--wp--style--root--padding-right, 24px) 48px 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  margin-left: -84px;   /* the boxes clip onto the artwork's edge */
}

.atmos-labels { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; font-size: inherit; line-height: 1.15; }
.atmos-labels a { text-decoration: none; }
.atmos-labels a:hover { text-shadow: 4px 3px 0 color-mix(in srgb, var(--spot) 88%, transparent); }
.atmos-labels .artist {
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: 0.02em;
  padding: 10px 20px;
}
.atmos-labels .title {
  font-size: clamp(28px, 3.2vw, 44px);
  font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  padding: 10px 20px;
  margin-left: 24px;
}
.atmos-edge .fact { font-weight: 400; letter-spacing: 0.1em; margin: 0; }
.atmos-edge > .fact:nth-of-type(odd) { margin-left: 12px; }

/* ---------- play block: the spot-color frame ---------- */

.atmos-play {
  margin-top: 28px;
  border: 6px solid var(--spot);
  padding: 20px;
  background: var(--paper);
  max-width: 100%;
}
.atmos-play iframe { border: 0; max-width: 100%; }
.atmos-play-link {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 24px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  padding: 14px 28px;
  text-decoration: none;
}
.atmos-play-link .tri {
  width: 0; height: 0;
  border-left: 16px solid var(--paper);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.atmos-play-link:active { transform: translate(1px, 2px); background: #000; }
.atmos-play-note { margin: 12px 0 0; font-size: 15px; }
.atmos-play-note a { text-decoration-color: var(--spot); }

/* ---------- section headings: a rule with a printed tab ---------- */

.atmos-section { padding-top: 64px; padding-bottom: 64px; }

.rule-h {
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  border-top: 2px solid var(--ink);
  padding-top: 10px;
  margin: 0 0 40px;
}

/* ---------- tracklist ---------- */

.atmos-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 1100px; }
.atmos-sides.single { grid-template-columns: 1fr; max-width: 720px; }
/* sideless formats: the spot color rides the track numbers instead of side tabs */
.atmos-sides.single .atmos-tracks { counter-reset: track; }
.atmos-sides.single .atmos-tracks li > span::before,
.atmos-sides.single .atmos-tracks li > a::before {
  counter-increment: track;
  content: counter(track, decimal-leading-zero);
  font-weight: 700;
  color: var(--spot);
  letter-spacing: 0.06em;
  margin-right: 16px;
}
.atmos-sides.single .atmos-tracks i { flex: 1; }
.atmos-side-mark {
  display: inline-block;
  background: var(--spot); color: var(--paper);
  font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 12px;
  margin: 0 0 20px;
}
.atmos-tracks { list-style: none; margin: 0; padding: 0; }
.atmos-tracks li { border-bottom: 1px solid var(--ink); }
.atmos-tracks li > span, .atmos-tracks li > a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 4px;
  text-decoration: none;
}
.atmos-tracks a:hover { background: var(--shade); }
.atmos-tracks i { font-style: italic; }
.atmos-tracks b { font-weight: 400; font-size: 16px; letter-spacing: 0.06em; }

/* ---------- liner notes ---------- */

.atmos-liner .wp-block-post-content > p { max-width: var(--wp--style--global--content-size); margin-bottom: 28px; }
.atmos-liner .wp-block-post-content > p:first-child::first-line { font-weight: 700; }

/* ---------- credits + outbound links ---------- */

.atmos-credits { display: flex; flex-wrap: wrap; gap: 14px; margin: 48px 0 0; }
.atmos-credits div {
  border: 2px solid var(--ink);
  padding: 8px 16px;
  font-size: 15px;
  display: flex; gap: 10px;
}
.atmos-credits dt { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.atmos-credits dt::after { content: ":"; }
.atmos-credits dd { margin: 0; }

.atmos-get { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; padding: 0; }
.atmos-get a { text-decoration: none; }
.atmos-get a:hover { color: var(--paper); background: var(--ink); }
.atmos-get a:active { transform: translate(1px, 2px); }

/* ---------- release cards (front page / archive) ---------- */

.atmos-river { display: grid; gap: 64px; }
.atmos-card { text-decoration: none; display: block; }
.atmos-card figure { margin: 0; }
.atmos-card img { width: 100%; border: 2px solid var(--ink); }
.atmos-card-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: -2px; }
.atmos-card .artist { font-weight: 700; }
.atmos-card .title { font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
.atmos-card:hover .title { background: var(--card-spot, var(--spot)); color: var(--paper); border-color: var(--ink); }

/* ---------- the object: photos of the physical edition ---------- */

.atmos-object-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  max-width: 1100px;
  align-items: start;
}
.atmos-object-grid figure { margin: 0; }
.atmos-object-grid img { width: 100%; border: 2px solid var(--ink); }
.atmos-object-grid figcaption { margin-top: -2px; font-weight: 400; }

/* ---------- artists ---------- */

/* An artist without a portrait: the labels stand on their own, unclipped */
.atmos-spread:not(:has(.atmos-plate img)) .atmos-edge {
  margin-left: 0;
  padding-left: var(--wp--style--root--padding-left, clamp(16px, 3vw, 40px));
}

.atmos-artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px; align-items: end; }
.atmos-artist-card .wp-block-post-featured-image img { border: 2px solid var(--ink); }
.atmos-artist-name { margin-top: -2px; }
.atmos-artist-name a { text-decoration: none; }

/* ---------- news list ---------- */

.atmos-news-list { display: grid; gap: 0; }
.atmos-news-row { border-bottom: 1px solid var(--ink); padding: 24px 0 28px; max-width: var(--wp--style--global--wide-size); }
.atmos-news-row .atmos-date { margin: 0 0 6px; }
.atmos-news-row .atmos-article-title { font-size: clamp(24px, 2.4vw, 32px); }
.atmos-news-row .atmos-article-title a { text-decoration: none; }
.atmos-news-row .atmos-article-title a:hover { text-shadow: 3px 2px 0 color-mix(in srgb, var(--spot) 88%, transparent); }
.atmos-news-row .wp-block-post-excerpt { max-width: var(--wp--style--global--content-size); }
.atmos-news-row .wp-block-post-excerpt__more-link { font-weight: 700; text-decoration-color: var(--spot); }

/* ---------- article content: quotes, rules, speakers ---------- */

.wp-block-post-content blockquote {
  border: 2px solid var(--ink);
  padding: 24px 28px;
  margin: 48px 0;
  max-width: var(--wp--style--global--content-size);
}
.wp-block-post-content blockquote p {
  font-size: clamp(24px, 2.4vw, 32px);
  font-style: italic;
  line-height: 1.3;
  margin: 0;
}
.wp-block-post-content blockquote cite {
  display: inline-block;
  margin-top: 14px;
  font-style: normal; font-size: 14px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--spot);
}
.wp-block-post-content hr {
  border: 0; border-top: 2px solid var(--ink);
  max-width: 120px; margin: 56px 0;
  background: none;
}

/* ---------- news / generic content ---------- */

.atmos-article-title { font-size: clamp(28px, 3.2vw, 44px); margin: 0 0 8px; }
.atmos-date { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 40px; }

/* ---------- footer ---------- */

.close {
  background: var(--ink); color: var(--paper);
  padding-top: 56px; padding-bottom: 56px;
  border-top: 2px solid var(--ink);
  margin-top: 64px;
}
.close img { filter: invert(1); }
.close a { color: var(--paper); }
.close p { font-size: 16px; line-height: 1.7; margin: 0; }

/* ---------- stamped entrance (once, orchestrated) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .atmos-edge > * { animation: atmos-stamp 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; }
  .atmos-edge > *:nth-child(1) { animation-delay: 0.05s; }
  .atmos-edge > *:nth-child(2) { animation-delay: 0.13s; }
  .atmos-edge > *:nth-child(3) { animation-delay: 0.21s; }
  .atmos-edge > *:nth-child(4) { animation-delay: 0.29s; }
  .atmos-edge > *:nth-child(5) { animation-delay: 0.37s; }
  .atmos-edge > *:nth-child(6) { animation-delay: 0.5s; }
  @keyframes atmos-stamp {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .atmos-spread { display: block; }
  .atmos-spread .atmos-plate img { border-right: 0; }
  .atmos-edge {
    margin-left: 0;
    margin-top: -56px;   /* boxes clip onto the artwork's bottom edge */
    padding-left: var(--wp--style--root--padding-left, 16px);
    padding-bottom: 40px;
  }
  .atmos-sides { grid-template-columns: 1fr; gap: 40px; }
  .masthead .wp-block-site-logo img { width: 48px; height: 48px; }
  .atmos-credits div { flex-wrap: wrap; font-size: 14px; padding: 6px 12px; }
}