/*
Theme Name: WanderOften
Theme URI: https://wanderoften.com
Author: WanderOften
Description: Custom editorial scrapbook theme for WanderOften.
Version: 0.1.0
Text Domain: wanderoften
*/

:root {
  --ink:#36372f;
  --olive:#6f795e;
  --olive-deep:#4f5942;
  --rose:#bc766d;
  --cream:#f7f1e7;
  --paper:#fffdf8;
  --line:rgba(70,62,48,.13);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font-family:Georgia,"Times New Roman",serif;
  overflow-x:hidden;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--rose); outline-offset:5px; }

.site-header {
  min-height:82px;
  padding:0 clamp(26px,5vw,78px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:42px;
  position:relative;
  z-index:30;
  background:rgba(250,246,239,.97);
  border-bottom:1px solid rgba(84,73,55,.11);
}
.wordmark {
  color:var(--olive-deep);
  font-size:clamp(1.85rem,2.7vw,2.75rem);
  line-height:1;
  letter-spacing:-.045em;
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:clamp(24px,3.1vw,48px);
  font-size:.93rem;
}
.site-header nav a { position:relative; padding:31px 0 27px; }
.site-header nav a::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:19px;
  width:0;
  height:1px;
  background:var(--rose);
  transform:translateX(-50%);
  transition:width .2s ease;
}
.site-header nav a:hover { color:var(--rose); }
.site-header nav a:hover::after { width:28px; }

.eyebrow {
  color:var(--rose);
  font:600 .68rem Arial,sans-serif;
  letter-spacing:.2em;
}
.leaf-divider {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:138px;
  margin:0 auto;
  color:var(--olive);
}
.leaf-divider i {
  width:42px;
  height:1px;
  background:rgba(92,104,73,.38);
}
.leaf-divider svg {
  width:24px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
}
.kicker {
  margin:9px 0 18px;
  color:var(--rose);
  font:600 .7rem Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
}

.scrapbook-hero {
  min-height:585px;
  position:relative;
  display:grid;
  grid-template-columns:minmax(300px,1fr) minmax(430px,1.06fr) minmax(310px,1fr);
  align-items:center;
  padding:22px clamp(8px,2vw,32px) 42px;
  overflow:hidden;
  background:
    radial-gradient(circle at 13% 15%,rgba(206,184,148,.17),transparent 24%),
    radial-gradient(circle at 86% 80%,rgba(188,118,109,.08),transparent 24%),
    repeating-linear-gradient(0deg,rgba(88,72,52,.013) 0 1px,transparent 1px 5px),
    #faf6ee;
}
.scrapbook-hero::after {
  content:"";
  position:absolute;
  z-index:1;
  left:-2%;
  right:-2%;
  bottom:-16px;
  height:38px;
  background:var(--cream);
  clip-path:polygon(0 48%,5% 63%,11% 43%,17% 65%,23% 48%,31% 64%,38% 44%,46% 67%,54% 49%,63% 65%,71% 45%,79% 66%,87% 47%,94% 63%,100% 44%,100% 100%,0 100%);
}
.hero-collage {
  position:relative;
  z-index:4;
  pointer-events:none;
}
.hero-collage img {
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 22px 26px rgba(73,56,33,.10));
}
.hero-collage-left {
  width:clamp(440px,39vw,620px);
  justify-self:start;
  margin-left:clamp(-125px,-5vw,-52px);
  margin-top:4px;
  transform:rotate(-.7deg);
}
.hero-collage-right {
  width:clamp(460px,40vw,640px);
  justify-self:end;
  margin-right:clamp(-115px,-4vw,-46px);
  margin-top:-4px;
  transform:rotate(.6deg);
}
.hero-babys-breath {
  position:absolute;
  z-index:2;
  left:-26px;
  top:-18px;
  width:clamp(180px,15vw,250px);
  opacity:.92;
  pointer-events:none;
  transform:rotate(-8deg);
  filter:drop-shadow(0 12px 16px rgba(80,59,37,.08));
}
.hero-center {
  position:relative;
  z-index:8;
  text-align:center;
  padding:0 8px;
}
.hero-center .leaf-divider { margin-bottom:20px; }
.hero-center h1 {
  margin:0;
  color:var(--olive-deep);
  font-size:clamp(4rem,6vw,6.8rem);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.058em;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.hero-tagline {
  margin:28px auto 0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:.18em .42em;
  color:var(--rose);
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:clamp(1.35rem,1.9vw,1.95rem);
  line-height:1.45;
  transform:rotate(-.3deg);
}
.typewriter-tail {
  color:var(--ink);
  font-family:"Courier New",Courier,monospace;
  font-size:.7em;
  font-weight:600;
  letter-spacing:.045em;
  transform:rotate(.8deg);
}

.preface-section {
  width:min(1200px,91vw);
  margin:0 auto;
  padding:78px 0 96px;
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:38px;
  align-items:center;
}
.preface-heading {
  position:relative;
  z-index:3;
  text-align:left;
}
.preface-heading h2 {
  margin:10px 0 18px;
  color:var(--olive-deep);
  font-size:clamp(2.8rem,4vw,4.1rem);
  font-weight:400;
  letter-spacing:-.04em;
}
.preface-heading .leaf-divider {
  width:108px;
  margin:0;
  justify-content:flex-start;
}
.preface-heading .leaf-divider i:first-child { display:none; }
.preface-leaf {
  width:150px;
  margin:18px 0 -34px 4px;
  transform:rotate(-9deg);
  filter:drop-shadow(0 11px 13px rgba(77,58,35,.08));
}
.preface-note {
  position:relative;
  min-height:255px;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 18px 22px rgba(72,55,34,.09));
}
.preface-paper {
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
}
.preface-copy {
  position:relative;
  z-index:3;
  width:82%;
  padding:36px 20px 34px 76px;
  font-size:clamp(1.03rem,1.26vw,1.18rem);
  line-height:1.68;
}
.preface-copy p { margin:0 0 13px; }
.preface-copy p:last-child { margin-bottom:0; }
.preface-polaroid {
  position:absolute;
  z-index:2;
  left:-72px;
  bottom:-34px;
  width:150px;
  transform:rotate(-7deg);
  filter:drop-shadow(0 16px 18px rgba(68,50,31,.12));
  pointer-events:none;
}

.volumes-section {
  position:relative;
  padding:84px clamp(24px,4.5vw,70px) 118px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 20%,rgba(188,118,109,.06),transparent 18%),
    radial-gradient(circle at 92% 83%,rgba(111,121,94,.07),transparent 20%),
    linear-gradient(rgba(239,226,207,.86),rgba(247,240,229,.94));
  border-block:1px solid rgba(83,67,47,.1);
}
.volume-floral-accent {
  position:absolute;
  z-index:1;
  left:-50px;
  bottom:-72px;
  width:260px;
  opacity:.72;
  transform:rotate(16deg);
  pointer-events:none;
}
.volume-heading {
  position:relative;
  z-index:3;
  text-align:center;
  margin-bottom:52px;
}
.volume-heading h2 {
  margin:9px 0 14px;
  color:var(--olive-deep);
  font-size:clamp(2.9rem,4.5vw,4.55rem);
  font-weight:400;
  letter-spacing:-.045em;
}
.volume-grid {
  position:relative;
  z-index:2;
  width:min(1250px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px;
}
.volume-card {
  min-width:0;
  min-height:350px;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(250px,.94fr);
  align-items:center;
  position:relative;
  transition:transform .25s ease,filter .25s ease;
}
.volume-card:hover {
  transform:translateY(-6px);
  filter:drop-shadow(0 18px 22px rgba(72,55,34,.11));
}
.volume-photo {
  position:relative;
  z-index:2;
  padding:10px;
  background:#f4ecdf;
  box-shadow:0 17px 30px rgba(68,51,31,.14);
  overflow:visible;
}
.volume-photo-waterfront {
  margin:17px -28px 17px 0;
  transform:rotate(-1deg);
}
.volume-photo img {
  width:100%;
  height:100%;
  min-height:310px;
  object-fit:cover;
}
.photo-tape {
  position:absolute;
  z-index:6;
  top:-11px;
  left:50%;
  width:78px;
  height:22px;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(210,188,151,.47);
  border:1px solid rgba(166,142,105,.11);
  box-shadow:0 2px 3px rgba(81,60,35,.06);
}
.volume-copy {
  min-width:0;
  min-height:300px;
  position:relative;
  z-index:4;
  display:grid;
  place-items:center;
}
.volume-card-wanderings .volume-copy { margin-left:-10px; }
.volume-card-wonderings .volume-copy { margin-right:-18px; }
.volume-paper {
  position:absolute;
  z-index:1;
  inset:-22px -20px;
  width:calc(100% + 40px);
  height:calc(100% + 44px);
  object-fit:fill;
  filter:drop-shadow(0 14px 23px rgba(73,55,34,.09));
}
.volume-copy-inner {
  position:relative;
  z-index:4;
  width:100%;
  padding:38px 24px;
  text-align:center;
}
.volume-copy-inner-wanderings { transform:translateX(-12px); }
.volume-copy h3 {
  margin:0;
  white-space:nowrap;
  color:var(--olive-deep);
  font-size:clamp(2.15rem,2.9vw,3.15rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.045em;
}
.volume-card-wonderings .volume-copy h3 { color:var(--rose); }
.volume-copy .leaf-divider {
  width:70px;
  margin:17px auto 19px;
}
.volume-copy .leaf-divider i { display:none; }
.volume-description {
  max-width:190px;
  margin:7px auto 18px;
  color:rgba(76,70,58,.67);
  font-size:.82rem;
  line-height:1.55;
  font-style:italic;
  letter-spacing:.01em;
}
.volume-link {
  display:inline-block;
  padding-bottom:6px;
  border-bottom:1px solid rgba(79,89,66,.53);
  color:var(--olive-deep);
  font:600 .63rem Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.155em;
}
.volume-card-wonderings .volume-link {
  color:var(--rose);
  border-color:rgba(188,118,109,.52);
}
.volume-leaf {
  position:absolute;
  z-index:3;
  width:118px;
  pointer-events:none;
  filter:drop-shadow(0 9px 11px rgba(72,54,34,.06));
}
.volume-leaf-wanderings {
  right:-38px;
  bottom:-28px;
  transform:rotate(19deg);
}
.volume-leaf-wonderings {
  left:-36px;
  top:-26px;
  transform:rotate(-18deg);
}
.volume-collage-media {
  position:relative;
  z-index:2;
  margin-left:-28px;
  min-width:0;
  transform:rotate(.7deg);
}
.volume-collage-media img {
  width:112%;
  max-width:none;
  margin-left:-4%;
  object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(70,52,31,.11));
}

.about-section {
  width:min(1180px,91vw);
  margin:0 auto;
  padding:112px 0 122px;
  display:grid;
  grid-template-columns:minmax(290px,.72fr) minmax(0,1.35fr);
  gap:clamp(68px,8vw,118px);
  align-items:center;
}
.about-portrait-wrap {
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-paper {
  position:absolute;
  z-index:1;
  width:116%;
  height:108%;
  object-fit:fill;
  transform:rotate(-2.5deg);
  filter:drop-shadow(0 18px 28px rgba(73,55,34,.1));
}
.about-botanical {
  position:absolute;
  z-index:2;
  left:-42px;
  top:48px;
  width:160px;
  transform:rotate(-28deg);
  filter:drop-shadow(0 10px 13px rgba(72,54,34,.07));
}
.about-portrait {
  position:relative;
  z-index:3;
  width:85%;
  padding:13px;
  background:#efe4d4;
  transform:rotate(-2deg);
  box-shadow:0 22px 40px rgba(67,52,34,.15);
}
.about-portrait img {
  width:100%;
  max-height:455px;
  object-fit:cover;
  object-position:center top;
  filter:saturate(.88) sepia(.04);
}
.portrait-tape {
  position:absolute;
  top:-12px;
  left:50%;
  width:82px;
  height:22px;
  transform:translateX(-50%) rotate(3deg);
  background:rgba(207,184,145,.45);
  z-index:4;
}
.photo-caption {
  position:absolute;
  z-index:5;
  bottom:4%;
  left:50%;
  transform:translateX(-50%) rotate(-2deg);
  color:var(--olive-deep);
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:1.2rem;
  white-space:nowrap;
}
.about-copy h2 {
  max-width:760px;
  margin:0 0 18px;
  color:var(--ink);
  font-size:clamp(2rem,3.15vw,3.35rem);
  line-height:1.12;
  font-weight:400;
  letter-spacing:-.035em;
}
.about-copy .leaf-divider {
  width:110px;
  margin:0 0 25px;
  justify-content:flex-start;
}
.about-copy .leaf-divider i:first-child { display:none; }
.about-copy>p:not(.kicker) {
  margin:0 0 15px;
  font-size:1rem;
  line-height:1.7;
}

.invite {
  position:relative;
  overflow:hidden;
  padding:72px max(7vw,42px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:54px;
  background:
    radial-gradient(circle at 8% 20%,rgba(255,255,255,.06),transparent 19%),
    radial-gradient(circle at 92% 78%,rgba(255,255,255,.05),transparent 21%),
    var(--olive-deep);
  color:#fffaf1;
}
.invite::before,
.invite::after {
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:46% 54% 60% 40%;
  transform:rotate(28deg);
}
.invite::before { left:-130px; top:-90px; }
.invite::after { right:-120px; bottom:-110px; }
.invite .kicker { color:#e8b4ac; margin-top:0; }
.invite h2 {
  max-width:790px;
  margin:0;
  font-size:clamp(2rem,3.6vw,3.65rem);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.03em;
}
.button-link {
  flex:none;
  display:inline-flex;
  gap:24px;
  align-items:center;
  padding:17px 22px;
  border-bottom:1px solid rgba(255,255,255,.66);
  font:600 .7rem Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.17em;
}
footer {
  padding:64px max(6vw,42px) 32px;
  display:grid;
  grid-template-columns:1.25fr .8fr .8fr;
  gap:42px;
  align-items:start;
  background:#f4ecdf;
  border-top:1px solid var(--line);
}
.footer-mark span {
  color:var(--olive-deep);
  font-size:2.55rem;
  letter-spacing:-.05em;
}
.footer-mark p {
  margin:12px 0 0;
  color:var(--rose);
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:1.02rem;
}
.footer-label {
  margin:5px 0 14px;
  color:var(--olive);
  font:600 .67rem Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
}
footer a {
  font-size:.96rem;
  border-bottom:1px solid rgba(52,53,46,.32);
}
.copyright {
  grid-column:1/-1;
  margin:40px 0 0;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:rgba(52,53,46,.58);
  font:500 .68rem Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.archivePagination { margin-top:56px; }
.archivePagination .nav-links {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.archivePagination a,
.archivePagination span {
  display:inline-block;
  padding:8px 11px;
  font:600 .68rem Arial,sans-serif;
  letter-spacing:.08em;
}
.archivePagination .current { color:var(--rose); }

@media (max-width:1180px) {
  .scrapbook-hero {
    grid-template-columns:minmax(250px,.92fr) minmax(370px,1fr) minmax(260px,.92fr);
  }
  .hero-collage-left { width:470px; margin-left:-115px; }
  .hero-collage-right { width:490px; margin-right:-108px; }
  .hero-center h1 { font-size:clamp(3.7rem,6vw,5.7rem); }
  .volume-card { grid-template-columns:minmax(0,1fr) minmax(220px,.95fr); }
  .volume-copy h3 { font-size:clamp(2rem,2.8vw,2.7rem); }
}

@media (max-width:960px) {
  .site-header {
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
    padding-top:20px;
    padding-bottom:14px;
  }
  .site-header nav {
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
  }
  .site-header nav a { flex:none; padding:4px 0 8px; }
  .site-header nav a::after { bottom:0; }

  .scrapbook-hero {
    min-height:720px;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto 1fr;
    padding-top:40px;
  }
  .hero-center {
    grid-column:1/-1;
    grid-row:1;
    width:min(620px,90vw);
    justify-self:center;
    padding-bottom:10px;
  }
  .hero-collage-left,
  .hero-collage-right {
    grid-row:2;
    width:min(470px,59vw);
    margin:0;
  }
  .hero-collage-left { grid-column:1; justify-self:start; transform:translateX(-14%) rotate(-1deg); }
  .hero-collage-right { grid-column:2; justify-self:end; transform:translateX(14%) rotate(1deg); }
  .hero-babys-breath { width:190px; }

  .preface-section {
    grid-template-columns:1fr;
    gap:16px;
    width:min(820px,88vw);
  }
  .preface-heading { text-align:center; }
  .preface-heading .leaf-divider { margin:auto; justify-content:center; }
  .preface-heading .leaf-divider i:first-child { display:block; }
  .preface-leaf { margin:16px auto -12px; width:130px; }
  .preface-polaroid { left:-32px; width:130px; }
  .preface-copy { padding-left:65px; }

  .volume-grid { grid-template-columns:1fr; max-width:780px; gap:58px; }
  .volume-card { min-height:390px; }
  .volume-copy h3 { font-size:clamp(2.5rem,5vw,3.5rem); }

  .about-section {
    grid-template-columns:1fr;
    max-width:760px;
    gap:50px;
  }
  .about-portrait-wrap { min-height:520px; max-width:500px; width:100%; margin:auto; }
  .invite { align-items:flex-start; flex-direction:column; }
}

@media (max-width:640px) {
  .site-header { padding-inline:6vw; }
  .wordmark { font-size:2rem; }
  .site-header nav { display:grid; grid-template-columns:repeat(2,max-content); gap:10px 30px; overflow:visible; font-size:.85rem; }

  .scrapbook-hero {
    min-height:730px;
    display:flex;
    flex-direction:column;
    padding:48px 0 30px;
  }
  .hero-center {
    width:92vw;
    order:1;
    padding:0 5vw 18px;
  }
  .hero-center h1 { font-size:clamp(3.1rem,14vw,4.35rem); }
  .hero-tagline { font-size:1.25rem; }
  .hero-collage-left,
  .hero-collage-right {
    position:absolute;
    width:330px;
    margin:0;
  }
  .hero-collage-left { left:-118px; bottom:18px; transform:rotate(-2deg); }
  .hero-collage-right { right:-116px; bottom:42px; transform:rotate(2deg); }
  .hero-babys-breath { left:-58px; top:235px; width:160px; }

  .preface-section { padding:68px 0 82px; width:91vw; }
  .preface-note { min-height:390px; }
  .preface-copy { width:78%; padding:46px 8px 38px; font-size:1rem; }
  .preface-polaroid { display:none; }

  .volumes-section { padding:70px 5vw 88px; }
  .volume-heading h2 { font-size:2.75rem; }
  .volume-floral-accent { width:190px; left:-70px; }
  .volume-card,
  .volume-card-wonderings {
    grid-template-columns:1fr;
    min-height:0;
  }
  .volume-card-wanderings .volume-copy { margin:0; }
  .volume-card-wonderings .volume-copy { order:2; margin:0; }
  .volume-card-wonderings .volume-collage-media { order:1; }
  .volume-photo-waterfront {
    margin:0 8vw -20px;
    min-height:250px;
  }
  .volume-photo img { min-height:250px; }
  .volume-copy { min-height:250px; }
  .volume-paper { inset:-18px 5vw; width:calc(100% - 10vw); height:calc(100% + 36px); }
  .volume-copy h3 { font-size:clamp(2.35rem,11vw,3.25rem); }
  .volume-collage-media { margin:-10px 4vw -18px; transform:none; }
  .volume-collage-media img { width:100%; margin:0; }
  .volume-leaf-wanderings { right:2vw; }
  .volume-leaf-wonderings { left:2vw; }

  .about-section { width:88vw; padding:88px 0 94px; }
  .about-portrait-wrap { min-height:440px; }
  .about-copy h2 { font-size:2.25rem; }
  .about-botanical { left:-22px; width:135px; }

  .invite { padding:58px 7vw; }
  footer { grid-template-columns:1fr; padding-inline:7vw; }
  .copyright { grid-column:1; }
}

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