/* plumlines theme: layout, shapes, spacing, effects (presentation only, no content) */
/* Organic look: soft shapes and faint paper grain.
   Structure only. Colors come from a palette file loaded after this one.
   Loaded after styles.css and polish.css. */

:root {
  --shadow-soft: 0 1px 2px rgba(var(--shadow-rgb), 0.05), 0 8px 24px rgba(var(--shadow-rgb), 0.07);
  --shadow-lift: 0 2px 6px rgba(var(--shadow-rgb), 0.06), 0 18px 40px rgba(var(--shadow-rgb), 0.13);
}

body {
  background-color: var(--bg);
  /* very faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .25  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

header { border-bottom-color: var(--wordmark); }
footer { border-top-color: var(--wordmark); background: transparent; }
.logo-name { color: var(--wordmark); }

header.is-scrolled { box-shadow: 0 6px 24px rgba(var(--shadow-rgb), 0.10); }
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  header.is-scrolled { background: var(--header-glass); }
}

nav a::after { background: var(--accent); }

/* Hero: soft tint with two organic shapes */
.hero {
  background: linear-gradient(180deg, var(--hero-from) 0%, var(--hero-to) 75%, var(--bg) 100%);
  border-bottom: none;
}

.hero::before {
  inset: auto;
  width: 520px;
  height: 520px;
  right: -120px;
  top: -160px;
  opacity: 1;
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
  background: radial-gradient(circle at 40% 40%, rgba(var(--blob1-rgb), 0.40), rgba(var(--blob1-rgb), 0.10) 70%);
}

.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 300px;
  height: 300px;
  left: -110px;
  bottom: -150px;
  border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%;
  background: rgba(var(--blob2-rgb), 0.16);
  pointer-events: none;
}

.hero .cta-link {
  background: var(--btn);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(var(--btn-rgb), 0.28);
}
.hero .cta-link:hover { background: var(--btn-hover); box-shadow: 0 12px 28px rgba(var(--btn-rgb), 0.32); }

/* Layout: intro on the left, Kristina's quote on the right, centered against each other */
.hero-grid {
  grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: 64px;
  align-items: center;
}

.hero-quote {
  background: #fff;
  border-left-color: var(--quote-border);
  border-radius: 0 18px 18px 0;
}
.hero-quote::before, .testimonial::before { color: var(--accent-dark); opacity: 0.16; }
.hero-quote cite, .testimonial cite { color: var(--teal); }

section h2::after { background: var(--accent); }

/* Tiles: white cards, round icons */
.tile { border-color: var(--card-border); border-radius: 16px; }
.tile:hover { border-color: var(--card-border-hover); }
.tile::before { background: linear-gradient(90deg, var(--teal), var(--accent)); }
.tile h3 { color: var(--tile-title); }
.tile-icon { border-radius: 999px; background: var(--icon-bg); color: var(--teal); }
.tile:hover .tile-icon { background: var(--teal); color: #fff; }

/* Testimonials */
.testimonials { background: var(--testi-bg); }
.testimonial { border-color: var(--card-border); border-left-color: var(--quote-border); border-radius: 0 16px 16px 0; }

/* Closing band */
.cta-band {
  background:
    radial-gradient(55% 130% at 90% 110%, rgba(var(--band-glow-rgb), 0.38) 0%, rgba(var(--band-glow-rgb), 0) 65%),
    radial-gradient(45% 110% at 5% 0%, var(--band-to) 0%, transparent 70%),
    var(--band-from);
}
.cta-band p { color: var(--band-text); }
.cta-band .btn { border-radius: 999px; background: var(--band-btn); color: var(--band-btn-text); }
.cta-band .btn:hover { background: var(--band-btn); filter: brightness(1.04); }

a:focus-visible { outline-color: var(--teal); }
.cta-band a:focus-visible { outline-color: #fff; }

.portfolio-nav-section { border-top-color: var(--card-border); }

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .hero::before { width: 360px; height: 360px; right: -160px; top: -120px; }
}

/* ───────── Inner pages ───────── */

/* Page title band: the same soft tint and shapes as the home page hero, scaled down */
.page-header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--hero-from) 0%, var(--hero-to) 70%, var(--bg) 100%);
  border-bottom: none;
}

.page-header::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 380px;
  height: 380px;
  right: -110px;
  top: -190px;
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
  background: radial-gradient(circle at 40% 40%, rgba(var(--blob1-rgb), 0.40), rgba(var(--blob1-rgb), 0.08) 70%);
  pointer-events: none;
}

.page-header h1::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--accent);
}

/* Buttons: rounded pills everywhere, with a gentle lift */
.btn,
.form-submit {
  border-radius: 999px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn-teal, .form-submit { background: var(--btn); box-shadow: 0 6px 18px rgba(var(--btn-rgb), 0.22); }
.btn-teal:hover, .form-submit:hover { background: var(--btn-hover); }

.btn-outline { border-color: var(--btn); color: var(--btn); }
.btn-outline:hover { background: var(--btn); color: #fff; }

.btn:hover, .form-submit:hover { transform: translateY(-2px); }

/* Sample tags as small pills */
.sample-tag { border-radius: 999px; padding-left: 10px; padding-right: 10px; }

/* Verbatim copy samples, emails and social posts: warm paper cards
   (presentation only: the sample text itself is untouched) */
.copy-sample,
.social-post,
.email-sample {
  background: #fff;
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--quote-border);
  border-radius: 0 14px 14px 0;
  box-shadow: var(--shadow-soft);
}

.email-sample { border-left-width: 1px; border-radius: 14px; }

/* Screenshots and sample images: a soft frame around the work, never on it */
.sample img,
.screen-shot,
.sample-images img {
  border-radius: 10px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-soft);
  background: #fff;
}

.sample video { border-radius: 12px; box-shadow: var(--shadow-soft); }

/* About page */
.about-photo { border-radius: 16px; box-shadow: var(--shadow-soft); }

.client-card {
  border-color: var(--card-border);
  border-radius: 14px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.client-card:hover {
  border-color: var(--card-border-hover);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.exp-item { border-color: var(--card-border); }

/* "More work" band at the foot of portfolio pages */
.portfolio-nav-section { background: var(--testi-bg); }

/* Contact form */
input, textarea {
  border-radius: 12px;
  border-color: var(--card-border-hover);
  background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input:focus, textarea:focus {
  border-color: var(--wordmark);
  box-shadow: 0 0 0 4px rgba(var(--blob1-rgb), 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .form-submit:hover, .client-card:hover { transform: none; }
}

/* ---- base color variables (overridden by palette.css) ---- */
/* Palette: Cyan & Peach, refined
   Each of Stephanie's five colors has one job:
     White        #FFFFFF  base: page, header, cards
     Peach Fuzz   #FFD5C2  soft fields: hero, icon circles, testimonial wash
     Dark Cyan    #588B8B  brand: wordmark, header/footer rules, icons, shapes, closing band
     Tiger Orange #F28F3B  accents: heading rules, quote borders, hover highlights
     Rosy Copper  #C8553D  action: buttons, links, labels (deepened to #B4462F for AA text)
   Text is charcoal. */
:root {
  --cyan: #588B8B;
  --cyan-band: #4C7E7E;       /* a hair deeper so white body text passes AA (4.57:1) */
  --peach: #FFD5C2;
  --orange: #F28F3B;
  --copper: #B4462F;          /* Rosy Copper, deepened for text (5.44:1 on white) */

  --teal: var(--copper);      /* links and actions */
  --teal-dark: #9E3D29;
  --teal-light: #FFF1EA;
  --accent: var(--orange);
  --accent-dark: var(--copper);
  --text: #2B2B2B;
  --text-muted: #4A4A4A;
  --tagline: #3D3D3D;
  --border: #EFE7E2;
  --bg: #FFFFFF;

  --wordmark: var(--cyan);
  --header-glass: rgba(255, 255, 255, 0.88);
  --hero-from: var(--peach);
  --hero-to: #FFF0E9;
  --blob1-rgb: 88, 139, 139;
  --blob2-rgb: 242, 143, 59;
  --quote-border: var(--orange);

  --btn: var(--copper);
  --btn-hover: #9E3D29;
  --btn-rgb: 180, 70, 47;

  --tile-title: var(--text);
  --icon-bg: #FFE6DA;
  --card-border: #F0E6E0;
  --card-border-hover: #F5C9B3;
  --testi-bg: #FFF5F0;

  --band-from: var(--cyan-band);
  --band-to: #426F6F;
  --band-glow-rgb: 242, 143, 59;
  --band-text: #FFFFFF;
  --band-btn: #FFFFFF;
  --band-btn-text: var(--copper);

  --shadow-rgb: 70, 60, 55;
}

/* No paper grain on a true-white page: keep it crisp */
body { background-image: none; }

/* Hero: Peach Fuzz fading into white, cyan and orange shapes */
.hero { background: linear-gradient(180deg, var(--peach) 0%, #FFE4D8 45%, #FFF5F0 85%, #FFFFFF 100%); }
/* Orange glow sits on the peach (a clean warm blend); cyan sits low, against the white */
.hero::before { background: radial-gradient(circle at 40% 40%, rgba(242, 143, 59, 0.42), rgba(242, 143, 59, 0.08) 70%); }
.hero::after { background: rgba(88, 139, 139, 0.30); bottom: -170px; }

/* Icons: cyan on peach; on hover the circle turns orange */
.tile-icon { color: var(--cyan); background: var(--icon-bg); }
.tile:hover .tile-icon { background: var(--orange); color: var(--text); }

/* Quote names in charcoal so copper stays reserved for things you can click */
.hero-quote cite, .testimonial cite { color: var(--text); }
.hero-quote::before, .testimonial::before { color: var(--orange); opacity: 0.35; }

/* Section heading rule and menu underline in orange */
section h2::after, nav a::after { background: var(--orange); }

/* Closing band: dark cyan with a soft lighter-cyan glow (orange over cyan turns muddy) */
.cta-band {
  background:
    radial-gradient(55% 130% at 90% 110%, rgba(140, 186, 186, 0.45) 0%, rgba(140, 186, 186, 0) 65%),
    radial-gradient(45% 110% at 5% 0%, rgba(62, 104, 104, 0.9) 0%, rgba(62, 104, 104, 0) 70%),
    var(--cyan-band);
}

/* Inner page title band: same orange glow on peach as the home page */
.page-header::before { background: radial-gradient(circle at 40% 40%, rgba(242, 143, 59, 0.40), rgba(242, 143, 59, 0.08) 70%); }

/* Contact form focus: cyan ring */
input:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(88, 139, 139, 0.20); }

/* ---- bold treatment ---- */
/* Bold: Stephanie's palette at full strength, used with restraint.
   One confident color moment per section, plenty of white, crisp solid shapes.
   No tints, no glows, no grain. Loaded after theme-organic.css + palette-cyan-peach-refined.css.

     Dark Cyan    #588B8B  shapes, icons, wordmark (large/graphic only: 3.8:1)
     Deep Cyan    #2F5C5C  a deeper cyan behind white text (7.5:1, passes AAA)
     Tiger Orange #F28F3B  solid blocks with near-black text (7.9:1), shapes, rules
     Rosy Copper  #C8553D  deepened to #8F3220 for button and link text (7.9:1, AAA)
     Peach Fuzz   #FFD5C2  small solid accent only
*/
:root {
  --charcoal: #111111;
  --cyan: #588B8B;
  --cyan-deep: #2F5C5C;
  --orange: #F28F3B;
  --copper: #8F3220;
  --peach: #FFD5C2;

  --wordmark: #2F5C5C;       /* the name in the header: deep cyan, 7.5:1 */
  --text: #111111;
  --text-muted: #3F3F3F;
  --tagline: #333333;
  --bg: #FFFFFF;
  --card-border: #E6E6E6;
  --card-border-hover: #D0D0D0;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.07);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.12);
}

body { background: #fff; background-image: none; }

header { border-bottom: 4px solid var(--cyan); }
footer { border-top: 4px solid var(--cyan); }

/* ── Hero: white, with crisp solid shapes behind the quote ── */
.hero {
  background: #fff;
  padding: 88px 0 96px;
}

.hero::before {
  inset: auto;
  width: 540px;
  height: 540px;
  right: -150px;
  top: -130px;
  opacity: 1;
  border-radius: 50%;
  background: var(--cyan);
  -webkit-mask-image: none;
  mask-image: none;
}

.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  left: auto;
  right: 330px;
  bottom: -70px;
  top: auto;
  border-radius: 50%;
  background: var(--orange);
  pointer-events: none;
}

.hero h1 { color: var(--charcoal); }
.hero p { color: var(--text-muted); }

.hero .cta-link {
  background: var(--copper);
  box-shadow: none;
}
.hero .cta-link:hover { background: var(--copper-hover, #732714); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14); }

.hero-quote {
  border-left: 5px solid var(--orange);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}
.hero-quote cite { color: var(--charcoal); }
.hero-quote::before, .testimonial::before { color: var(--orange); opacity: 0.55; }

/* ── Section headings ── */
.section-label { color: var(--copper); }
section h2::after { width: 56px; height: 4px; background: var(--orange); }

/* ── Service cards: solid cyan icon badges ── */
.tile { border-color: var(--card-border); }
.tile::before { height: 4px; background: var(--orange); }
.tile h3 { color: var(--charcoal); }
.tile-icon { background: var(--cyan); color: #fff; }
.tile:hover .tile-icon { background: var(--orange); color: var(--on-orange, var(--charcoal)); }
.tile a.tile-link { color: var(--copper); }

/* ── Testimonials: one solid block of deep cyan ── */
.testimonials { background: var(--cyan-deep); }
.testimonials .section-label { color: #fff; }
.testimonials h2 { color: #fff; }
.testimonial { border: none; border-left: 5px solid var(--orange); }
.testimonial cite { color: var(--charcoal); }

/* ── Closing band: solid Tiger Orange, charcoal type ── */
.cta-band { background: var(--band-bg, var(--orange)); }
.cta-band::before { display: none; }
.cta-band h2, .cta-band p { color: var(--on-band, var(--charcoal)); }
.cta-band .btn { background: var(--band-btn-bg, var(--charcoal)); color: var(--band-btn-fg, #fff); box-shadow: none; }
.cta-band .btn:hover { background: var(--band-btn-bg, #000); filter: brightness(1.15); }
.cta-band a:focus-visible { outline-color: var(--on-band, var(--charcoal)); }

/* ── Menu ── */
nav a::after { background: var(--orange); height: 3px; }

/* ── Inner pages: a solid cyan title band ── */
.page-header { background: var(--cyan-deep); margin-bottom: 56px; }
.page-header::before {
  width: 300px; height: 300px; right: -90px; top: -150px;
  border-radius: 50%;
  background: var(--orange);
}
.page-header h1, .page-header p { color: #fff; }
.page-header a { color: #fff; text-decoration: underline; }
.page-header h1::after { background: var(--orange); }

.copy-sample, .social-post { border-left: 5px solid var(--orange); }
.portfolio-nav-section { background: #F4F4F4; }

/* ── Phones: shapes move behind the quote, never behind text ── */
@media (max-width: 920px) {
  .hero::before { width: 340px; height: 340px; right: -140px; top: auto; bottom: -60px; }
  .hero::after { width: 120px; height: 120px; right: auto; left: -40px; bottom: -50px; }
  .page-header::before { width: 200px; height: 200px; right: -110px; top: -120px; }
}

/* ───────── Phone and touch legibility ───────── */

/* Wide screenshots never overflow the screen (the original 980px cap beat the "100% wide" rule) */
.sample img, .screen-shot, .compare-grid, .sample-images { max-width: min(100%, 980px); }

/* Tap targets: at least 44 x 44 px (WCAG AAA) */
nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
footer a { display: inline-flex; align-items: center; min-height: 44px; }
.btn, .tile a.tile-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.tile a.tile-link { justify-content: flex-start; }
.contact-form + div a, main a[href*="linkedin"] { display: inline-flex; align-items: center; min-height: 44px; }
div[style*="border-top"] > a[href*="linkedin"] { display: inline-flex; align-items: center; min-height: 44px; }

/* Tap-to-enlarge on portfolio screenshots (script wraps each one in a button) */
.zoomable {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: zoom-in;
  text-align: left;
}
.zoomable img { width: 100%; }
.zoomable::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #363833 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.zoomable:focus-visible { outline: 3px solid #F0993A; outline-offset: 3px; }
.sample-images .zoomable img, .zoomable .screen-shot { margin: 0; }
.zoomable:has(.screen-shot) { margin-bottom: 36px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #111111;
}
.lightbox[hidden] { display: none; }
.lightbox-bar { display: flex; justify-content: flex-end; padding: 8px; }
.lightbox-close {
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #363833;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:focus-visible, .lightbox-scroll:focus-visible { outline: 3px solid #F0993A; outline-offset: 3px; }
.lightbox-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; padding: 0 8px 16px; }
.lightbox-scroll img { display: block; width: auto; max-width: none; height: auto; margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
body.lightbox-open { overflow: hidden; }

@media (max-width: 520px) {
  /* Name fills the header width; the tagline is exactly 0.45 of it so both lines match */
  .logo-name { font-size: clamp(26px, calc((100vw - 40px) / 9), 52px); }
  .logo-tagline { font-size: clamp(11.7px, calc((100vw - 40px) / 20), 23.4px); }

  /* Nothing below 16px on a phone, except the small uppercase labels at 14px */
  .section-label, .sample-tag { font-size: 14px !important; }
  .byline, .sample-meta, .email-field, .email-value, .screen-label, .exp-date,
  .client-card, .btn, .portfolio-nav .btn-outline, .tile a.tile-link, footer p, footer a, label, cite, h3 { font-size: 16px !important; }
}

/* ───────── Contact form in the closing band, and on the Contact page ───────── */
.cta-band .band-form { max-width: 560px; margin: 32px auto 0; text-align: left; }
.cta-band .form-group { margin-bottom: 20px; }
.cta-band label { color: var(--on-band, #111); font-weight: 700; }
.cta-band input, .cta-band textarea {
  background: #fff;
  color: #363833;
  border: 2px solid #111;
  border-radius: 12px;
}
.cta-band input:focus, .cta-band textarea:focus {
  border-color: #111;
  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.35);
}
.cta-band .form-submit {
  display: block;
  margin: 8px 0 0;
  min-height: 48px;
  min-width: 140px;
  padding: 12px 32px;
  background: var(--band-btn-bg, #111);
  color: var(--band-btn-fg, #fff);
  border: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.cta-band .form-submit:hover:not(:disabled) { filter: brightness(1.2); }
.cta-band .form-submit:disabled { opacity: 0.7; cursor: progress; }
.form-submit:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }

.form-thanks, .form-error { margin: 20px 0 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
.cta-band .form-thanks, .cta-band .form-error { max-width: none; text-align: center; margin: 0 auto; }
.contact-form .form-thanks { color: var(--text); }
.contact-form .form-error { color: var(--copper); }
.form-thanks[hidden], .form-error[hidden] { display: none; }
.form-thanks:focus { outline: none; }
.is-sent > *:not(.form-thanks) { display: none; }
.contact-form .form-submit { min-height: 48px; }

/* ───────── Overlapping document covers ("smattering") ───────── */
.cover-stack {
  position: relative;
  max-width: 760px;
  aspect-ratio: 16 / 10;
  margin: 28px 0 8px;
  border-radius: 18px;
  background: #F4F4F4;
  overflow: hidden;
  isolation: isolate;
}
.cover-stack::before {               /* brand circle behind the covers */
  content: '';
  position: absolute;
  z-index: -1;
  width: 46%;
  aspect-ratio: 1;
  right: -8%;
  top: -14%;
  border-radius: 50%;
  background: var(--cyan, #DD5B35);
}
.cover-stack::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 22%;
  aspect-ratio: 1;
  left: 6%;
  bottom: -9%;
  border-radius: 50%;
  background: var(--orange, #F0993A);
}
.cover-card {
  position: absolute;
  width: 58%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.cover-back  { left: 6%;  top: 9%;  transform: rotate(-4deg); }
.cover-front { right: 6%; top: 22%; transform: rotate(3deg); }
@media (prefers-reduced-motion: no-preference) {
  .cover-card { transition: transform 0.35s var(--ease); }
  .cover-stack:hover .cover-back  { transform: rotate(-6deg) translate(-6px, -4px); }
  .cover-stack:hover .cover-front { transform: rotate(4deg) translate(6px, 4px); }
}
@media (max-width: 520px) {
  .cover-stack { aspect-ratio: 4 / 3; }
  .cover-card { width: 66%; }
  .cover-back { left: 4%; top: 7%; }
  .cover-front { right: 4%; top: 28%; }
}

/* Single document cover on the same panel */
.cover-stack.cover-single { aspect-ratio: 16 / 9; }
.cover-single .cover-card { width: 78%; left: 11%; top: 50%; transform: translateY(-50%) rotate(-2deg); }
@media (prefers-reduced-motion: no-preference) {
  .cover-stack.cover-single:hover .cover-card { transform: translateY(-50%) rotate(-1deg) scale(1.02); }
}
@media (max-width: 520px) {
  .cover-stack.cover-single { aspect-ratio: 4 / 3; }
  .cover-single .cover-card { width: 86%; left: 7%; }
}

/* About page photo: larger, but still secondary to the text */
.about-hero { grid-template-columns: minmax(0, 1fr) 280px; }
.about-photo { max-width: 280px; }
@media (max-width: 768px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-photo { max-width: 220px; justify-self: center; }
}