/*
Theme Name: Olivia Cotter
Theme URI: https://example.com
Author: Olivia Cotter Studio
Author URI: https://example.com
Description: A rounded, hand-built portfolio and commissions theme for illustrator Olivia Cotter, with a dark green hero, a black commissions card, and every piece of copy editable from the Customizer.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: olivia-cotter
*/

:root{
  --green-deep: #16311F;
  --green-deeper: #0F2417;
  --green-line: rgba(255,255,255,0.18);
  --white: #FFFFFF;
  --ink: #16311F;
  --ink-soft: #3E5847;
  --gold: #C9A24B;
  --gold-soft: #E6D19B;
  --clay: #B5714B;
  --black: #121212;
  --black-line: rgba(255,255,255,0.14);
  --side-space: clamp(20px, 6vw, 88px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  overflow-x: hidden;
}

img{ max-width: 100%; display:block; }

/* ---------- HERO CARD: rounded, dark green, padding all around ---------- */
.hero-card{
  position: relative;
  background: var(--green-deep);
  color: var(--white);
  border-radius: 28px;
  margin: clamp(16px, 3vw, 32px);
  overflow: hidden;
}

.hero-inner{
  position: relative;
  z-index: 2;
  padding: clamp(24px, 4vw, 40px) clamp(24px, 5vw, 64px) clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px);
}

/* Compact variant used on interior pages (no hero copy / no flying art) */
.hero-card--compact .hero-inner{
  padding: clamp(24px, 4vw, 40px) clamp(24px, 5vw, 64px) clamp(28px, 4vw, 48px) clamp(24px, 5vw, 64px);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: clamp(40px, 6vw, 72px);
}

.hero-card--compact .nav{ padding-bottom: clamp(16px, 3vw, 28px); }

.hero-text{ max-width: 560px; }

.nav .name{
  font-family:'Fraunces', serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight:500;
  letter-spacing:0.01em;
  color: var(--white);
  text-decoration: none;
}

.nav .links{ display:flex; gap:12px; }

.nav .links a{
  text-decoration:none;
  color: var(--white);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--green-line);
  transition: background 0.2s ease, color 0.2s ease, border-color .2s ease;
}

.nav .links a.primary{ background: var(--gold); border-color: var(--gold); color: var(--green-deeper); }
.nav .links a:hover{ border-color: var(--gold); color: var(--gold-soft); }
.nav .links a.primary:hover{ background: var(--gold-soft); color: var(--green-deeper); }

.eyebrow{
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: var(--gold-soft);
  font-weight:700;
  margin: 0 0 18px 0;
}

h1.headline{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size: clamp(34px, 5vw, 58px);
  line-height:1.06;
  margin:0 0 22px 0;
  max-width: 15ch;
  color: var(--white);
}

h1.headline.headline--compact{
  font-size: clamp(28px, 4vw, 42px);
  margin: 0;
  max-width: none;
}

.intro{
  font-size: 16.5px;
  line-height:1.65;
  color: rgba(255,255,255,0.78);
  max-width: 54ch;
  margin: 0 0 32px 0;
}

.cta-row{ display:flex; gap:14px; flex-wrap:wrap; position: relative; z-index: 2; }

.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  letter-spacing:0.03em;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid var(--white);
  color: var(--white);
  transition: all .2s ease;
  background: transparent;
  cursor: pointer;
}
.btn.solid{ background: var(--gold); border-color: var(--gold); color: var(--green-deeper); }
.btn:hover{ background: var(--white); color: var(--green-deep); }
.btn.solid:hover{ background: var(--gold-soft); border-color: var(--gold-soft); color: var(--green-deeper); }

/* ---------- FLYING ARTWORK: contained within the hero card, looping up-left ---------- */
.flight-layer{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.flight-layer .art{
  position: absolute;
  border: 5px solid var(--white);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  background-size: cover;
  background-position: center;
}

.art .tag{
  position:absolute;
  bottom:-1px; left:-1px;
  background:var(--white);
  color:var(--ink-soft);
  font-size:9px;
  letter-spacing:0.08em;
  padding:3px 7px;
  font-weight:600;
  text-transform: uppercase;
}

@keyframes riseLeft{
  0%   { transform: translate(0, 0) rotate(var(--r)); opacity: 0; }
  6%   { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
}

.flight-layer .art{
  animation-name: riseLeft;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.art-1{ width:92px;  height:116px; top: 108%; left: 84%; --r:-12deg; --dx:-90px;  --dy:-760px; background: repeating-linear-gradient(135deg, #E9DEC1 0 14px, #DFCE9E 14px 28px); animation-duration: 20s; animation-delay: 0s; }
.art-2{ width:76px;  height:98px;  top: 128%; left: 68%; --r:-8deg;  --dx:-70px;  --dy:-820px; background: linear-gradient(160deg, #C9A24B, #8E6A2E); animation-duration: 22s; animation-delay: -6s; }
.art-3{ width:104px; height:84px;  top: 150%; left: 90%; --r:-15deg; --dx:-110px; --dy:-880px; background: linear-gradient(135deg, #6E8E76, #294331); animation-duration: 24s; animation-delay: -13s; }
.art-4{ width:82px;  height:106px; top: 118%; left: 60%; --r:-6deg;  --dx:-60px;  --dy:-780px; background: repeating-linear-gradient(45deg, #B5714B 0 10px, #935A3B 10px 20px); animation-duration: 21s; animation-delay: -17s; }

@media (prefers-reduced-motion: reduce){
  .flight-layer .art{ animation: none !important; transform: rotate(var(--r)); opacity: 0.9; top: 60%; }
}
@media (max-width: 900px){
  .flight-layer .art{ transform: scale(0.75) rotate(var(--r)); }
  .art-3{ display:none; }
}
@media (max-width: 700px){
  .flight-layer{ display:none; }
}

/* ---------- COMMISSIONS CARD: rounded, black, matches header shape ---------- */
.commissions-card{
  background: var(--black);
  color: var(--white);
  border-radius: 28px;
  margin: clamp(16px, 3vw, 32px);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
}

.commissions-card h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size: clamp(28px, 3.4vw, 38px);
  margin: 0 0 10px 0;
  color: var(--white);
}

.commissions-card .section-sub{ color: rgba(255,255,255,0.68); }

.commissions-card .price-note{ color: var(--gold-soft); }

.commissions-card .tiers{
  border-top: 1px solid var(--black-line);
  border-left: 1px solid var(--black-line);
}

.commissions-card .tier{
  background: transparent;
  border-right: 1px solid var(--black-line);
  border-bottom: 1px solid var(--black-line);
}

.commissions-card .tier .price{ color: var(--white); }
.commissions-card .tier .label{ color: var(--white); }
.commissions-card .tier .desc{ color: rgba(255,255,255,0.6); }

.commissions-card .commission-footnote{ color: rgba(255,255,255,0.55); }

.commissions-card .btn{ border-color: var(--white); color: var(--white); }
.commissions-card .btn:hover{ background: var(--white); color: var(--black); }
.commissions-card .btn.solid{ background: var(--gold); border-color: var(--gold); color: var(--black); }
.commissions-card .btn.solid:hover{ background: var(--gold-soft); border-color: var(--gold-soft); color: var(--black); }

/* ---------- VENMO BLOCK (Commissions page only) ---------- */
.venmo-block{
  text-align: center;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.venmo-block h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size: clamp(28px, 3.4vw, 38px);
  margin: 0 0 10px 0;
  color: var(--ink);
}
.venmo-block .section-sub{ margin-left:auto; margin-right:auto; }
.venmo-qr{
  display:inline-block;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #EAE5D8;
  border-radius: 20px;
}
.venmo-qr img{ width: 220px; height: 220px; object-fit: contain; }
.venmo-qr--placeholder{
  width: 220px;
  height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 20px;
}

/* ---------- WHITE BODY CONTENT ---------- */
.body-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--side-space) clamp(56px, 7vw, 96px) var(--side-space);
}

hr.rule{ border:none; border-top: 1px solid #E7E2D6; margin: 64px 0; }

.section-heading{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size: clamp(28px, 3.4vw, 38px);
  margin: 0 0 10px 0;
  color: var(--ink);
}

.section-sub{ color: var(--ink-soft); font-size:15px; margin: 0 0 36px 0; max-width: 50ch; }

.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 700px){ .grid{ grid-template-columns: repeat(2,1fr);} }

.thumb{
  aspect-ratio: 4/5;
  border: 1px solid #EAE5D8;
  position:relative;
  background-size: cover;
  background-position:center;
  overflow: hidden;
}
.thumb img{ width:100%; height:100%; object-fit: cover; }
.thumb span{
  position:absolute; bottom:10px; left:10px;
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  background: var(--white); padding:4px 8px; color: var(--ink-soft); font-weight:600;
}
.thumb.t1{ background: repeating-linear-gradient(135deg, #E9DEC1 0 14px, #DFCE9E 14px 28px);}
.thumb.t2{ background: linear-gradient(160deg, #C9A24B, #8E6A2E);}
.thumb.t3{ background: linear-gradient(135deg, #6E8E76, #294331);}
.thumb.t4{ background: repeating-linear-gradient(45deg, #B5714B 0 10px, #935A3B 10px 20px);}
.thumb.t5{ background: linear-gradient(200deg, #E6D19B, #C9A24B);}
.thumb.t6{ background: linear-gradient(150deg, #294331, #6E8E76);}

.price-note{
  display:inline-block;
  font-family:'Fraunces', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--clay);
  margin-bottom: 36px;
}

.tiers{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid #EAE5D8;
}
@media (max-width: 800px){ .tiers{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 460px){ .tiers{ grid-template-columns: 1fr;} }

.tier{ padding: 28px 22px; border-right: 1px solid #EAE5D8; border-bottom: 1px solid #EAE5D8; background: var(--white); }

.tier .price{ font-family:'Fraunces', serif; font-size: 34px; color: var(--ink); margin: 0 0 6px 0; }
.tier .price sup{ font-size:16px; top:-0.9em; }
.tier .label{ font-weight:600; font-size:14px; margin: 0 0 10px 0; color: var(--ink); }
.tier .desc{ font-size: 13.5px; color: var(--ink-soft); line-height:1.5; margin:0; }

.commission-footnote{ margin-top: 30px; font-size: 13.5px; color: var(--ink-soft); }

.page-extra-content{ margin-top: 56px; max-width: 70ch; line-height: 1.7; }

.site-footer{
  border-top: 1px solid #E7E2D6;
  margin-top: clamp(24px, 4vw, 48px);
  padding: 44px var(--side-space) 32px var(--side-space);
}

.footer-inner{
  max-width: 1180px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-name{
  font-family:'Fraunces', serif;
  font-size: 20px;
  font-weight:500;
  color: var(--ink);
  text-decoration: none;
}

.footer-links{ display:flex; gap:26px; }

.footer-links a{
  text-decoration:none;
  color: var(--ink);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  transition: color .2s ease;
}
.footer-links a:hover{ color: var(--clay); }

.footer-copy{
  max-width: 1180px;
  margin: 24px auto 0 auto;
  font-size:12.5px;
  color: var(--ink-soft);
  letter-spacing:0.02em;
}