/*
Theme Name:        Permanent Waves
Theme URI:         https://mikepratt.tv
Author:            Michael Pratt
Author URI:        https://mikepratt.tv
Description:       Bespoke structural theme for mikepratt.tv. A flat, high-contrast layout system in the spirit of Apple.com — full-bleed media bands, 1px hairline dividers, strict aspect-ratio image containers. No gradients, no shadows, no rounded corners.
Version:            1.1.0
Requires at least: 6.4
Tested up to:       6.6
Requires PHP:       7.4
License:            GNU General Public License v2 or later
License URI:        https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:        permanent-waves
*/

/* ==========================================================================
   ROLLED BACK 2026-08-26 — absolute rollback to the first-pass baseline,
   per explicit owner request ("stopping our current iteration path...
   execute an absolute rollback to our very first working layout
   baseline"). Every hero-billboard / venture-grid / portfolio-grid /
   split-asym / panamplify-canvas / row-grid rule added across the
   subsequent iteration sessions has been removed outright (not just
   marked superseded) — this file is a best-effort reconstruction of the
   original theme-deploy CSS from claudecode.md's dated change log, since
   no literal file backup of that original state exists on this server.
   See claudecode.md §8 change log, rollback entry, for the full method
   and the one assumption it required (DFC/Panamplify original image
   ratio, inferred from the still-registered `pw-portrait-45` image size
   in functions.php). Do not reintroduce any of the removed components
   without a fresh, explicit owner request — this is a hard reset, not a
   merge.
   ========================================================================== */

/* ==========================================================================
   1. Local wordmark asset
   Restricted to .site-branding__wordmark — used nowhere else in this file.
   ========================================================================== */
@font-face {
  font-family: 'Permanent Waves';
  src: local('Permanent Waves Regular'), local('PermanentWaves'),
       url('assets/fonts/PermanentWaves.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. Design tokens
   ========================================================================== */
:root {
  --color-canvas:   #ffffff;
  --color-surface:  #f5f5f7;
  --color-ink:      #1d1d1f;
  --color-ink-soft: #6e6e73;
  --color-rule:     #d2d2d7;
  --color-accent:   rgb(190, 24, 74); /* Version 1.1 "Top Hero" lock, 2026-08-26 — crimson pulled from the hero stage lights, explicit owner request, supersedes the prior Apple-blue #0071e3. Reserved for links/focus rings/active nav only — never applied to a text block. See claudecode.md §4 and §8. */

  --font-display: 'Permanent Waves', 'DM Sans', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --measure: 65ch;   /* body copy line length ceiling — 50–65 characters */
  --shell:   980px;
  --gutter:  22px;
  --band:    110px;
}

/* ==========================================================================
   3. Reset & base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -60px; left: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--color-ink);
  color: var(--color-canvas);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  clip: auto;
  overflow: visible;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   4. Masthead
   ========================================================================== */
.site-header { padding: 76px 0 44px; text-align: center; }

.site-branding__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.site-branding__wordmark a {
  color: var(--color-ink);
  text-decoration: none;
}
.site-branding__wordmark a:hover { text-decoration: none; }

.site-branding__byline {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.4;
  font-style: italic;
  color: var(--color-ink-soft);
}

/* ==========================================================================
   5. Primary navigation — unnumbered
   ========================================================================== */
.main-navigation {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.nav-list {
  list-style: none;   /* unnumbered — no markers, no counters */
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: var(--shell);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 46px);
  height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-list::-webkit-scrollbar { display: none; }
.nav-list li { flex: 0 0 auto; }

.nav-list a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav-list a:hover { color: var(--color-accent); text-decoration: none; }
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ==========================================================================
   6. Bands & typography rhythm
   ========================================================================== */
.band { padding: var(--band) 0; border-bottom: 1px solid var(--color-rule); }
.band--flush { padding-bottom: 0; }

.eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(38px, 5.6vw, 56px); line-height: 1.07; }
h2 { font-size: clamp(30px, 4.2vw, 40px); line-height: 1.1; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }

.lede {
  margin: 22px 0 0;
  max-width: var(--measure);
  font-size: clamp(19px, 2.1vw, 21px);
  line-height: 1.47;
  color: var(--color-ink-soft);
}
.copy {
  margin: 20px 0 0;
  max-width: var(--measure);
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.center { text-align: center; }
.center .lede, .center .copy { margin-inline: auto; }

/* ==========================================================================
   7. Media slots — strict aspect-ratio containers
   ========================================================================== */
.slot {
  position: relative;
  width: 100%;
  background: var(--color-surface);
  overflow: hidden;
}
.slot::after {
  content: attr(data-slot);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  pointer-events: none;
}
.slot:has(img)::after { content: none; }
.slot img { width: 100%; height: 100%; object-fit: cover; }

.ratio-219 { aspect-ratio: 21 / 9; }
.ratio-169 { aspect-ratio: 16 / 9; } /* re-added 2026-08-26 for the Version 1.1 "Top Hero" band — see §8 change log */
.ratio-45  { aspect-ratio: 4 / 5; }
.ratio-32  { aspect-ratio: 3 / 2; }
.ratio-11  { aspect-ratio: 1 / 1; }

.bleed { width: 100%; margin-top: 64px; border-top: 1px solid var(--color-rule); }

/* ==========================================================================
   7b. Hero top band — Version 1.1 "Top Hero" lock (ADDED 2026-08-26)
   Full-bleed 16:9 image band, Apple-style bottom-left text overlay, no grey
   backing — the photograph's own shadows carry the text. Explicit, scoped
   owner request; every section below #hero is untouched. Distinct from
   (not a reinstatement of) the removed .hero-billboard component — that one
   used a dark scrim gradient over the photo, this one deliberately has
   none. See claudecode.md §8 change log.
   ========================================================================== */
.hero-top { border-bottom: 1px solid var(--color-rule); }

.hero-top__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-top__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  max-width: min(640px, 60%);
  padding: clamp(28px, 5vw, 72px) clamp(24px, 5vw, 64px);
}

.hero-top__title {
  margin: 0;
  font-family: var(--font-body); /* DM Sans */
  font-weight: 300;
  color: #ffffff;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.hero-top__subtitle {
  margin: 14px 0 0;
  font-family: var(--font-body); /* DM Sans */
  font-weight: 400;
  color: #e5e7eb;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.4;
}

/* ==========================================================================
   8. Split band
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 76px) clamp(28px, 5vw, 64px);
}
.split__text .copy, .split__text .lede { max-width: 30em; }
.split--reverse .split__media { order: -1; }
.split__media { border-inline-start: 1px solid var(--color-rule); }
.split--reverse .split__media {
  border-inline-start: 0;
  border-inline-end: 1px solid var(--color-rule);
}

/* ==========================================================================
   9. Triptych grid
   ========================================================================== */
.triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-rule);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  margin-top: 56px;
}
.tile { background: var(--color-canvas); display: flex; flex-direction: column; }
.tile__caption { padding: 22px clamp(16px, 2.4vw, 26px) 30px; }
.tile__caption h3 { margin-bottom: 8px; }
.caption { margin: 0; font-size: 14px; line-height: 1.45; color: var(--color-ink-soft); }

/* ==========================================================================
   10. Contact grid
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-rule);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  margin-top: 56px;
}
.contact-cell { background: var(--color-canvas); padding: 38px clamp(20px, 3vw, 32px); }
.contact-cell .eyebrow { margin-bottom: 12px; }
.contact-cell p { margin: 0; font-size: 17px; line-height: 1.5; }

/* ==========================================================================
   11. Generic single-page content (page.php / index.php loop)
   ========================================================================== */
.entry-header { padding: 88px 0 0; text-align: center; }
.entry-header .eyebrow { margin-bottom: 18px; }
.entry-content { padding-top: 40px; }
.entry-content p,
.entry-content ul,
.entry-content ol {
  max-width: var(--measure);
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0 0 20px;
}
.entry-content a { text-decoration: underline; }

.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li {
  padding: 32px 0;
  border-bottom: 1px solid var(--color-rule);
}
.archive-list li:first-child { border-top: 1px solid var(--color-rule); }

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer { padding: 44px 0 60px; font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: baseline;
  justify-content: space-between;
}
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }

/* ==========================================================================
   13. Scroll reveal (progressive enhancement — see assets/js/reveal.js)
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   14. Responsive
   ========================================================================== */
@media (max-width: 860px) {
  :root { --band: 76px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__media { border-inline-start: 0; border-inline-end: 0; border-top: 1px solid var(--color-rule); }
  .split--reverse .split__media { order: 0; border-inline-end: 0; border-top: 1px solid var(--color-rule); }
  .triptych { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .ratio-219 { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .site-header { padding: 52px 0 32px; }
  .nav-list { justify-content: flex-start; gap: 26px; }
}