:root{
  --about-ink:#f4efe5;
  --about-paper:#ead8ba;
  --about-red:#d92d2f;
  --about-black:#11100f;
  --about-muted:#c7beb2;
}

.about-page{
  margin:0;
  color:var(--about-ink);
  background:#11100f;
  font-family:Georgia,'Times New Roman',serif;
}
.about-page *{box-sizing:border-box}
.about-page main{overflow:hidden}

.about-hero{
  position:relative;
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(420px,.92fr) minmax(500px,1.08fr);
  align-items:center;
  gap:clamp(40px,6vw,100px);
  padding:132px clamp(34px,7vw,110px) 105px;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.025),transparent 24%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    #11100f;
}
.about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  background:url("/assets/hero-aged-edge.png?v=1") center/100% 100% no-repeat;
}
.about-hero-copy{position:relative;z-index:12;max-width:620px}
.about-kicker,.paper-kicker{
  margin:0 0 16px;
  color:var(--about-red);
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
}
.about-title{
  margin:0;
  font-size:clamp(54px,5.6vw,88px);
  line-height:.97;
  font-weight:500;
  letter-spacing:-.035em;
}
.about-title::after{
  content:"";
  display:block;
  width:min(305px,72%);
  height:4px;
  margin:14px 0 0 12px;
  background:var(--about-red);
  transform:rotate(-3deg);
}
.about-dek{
  max-width:570px;
  margin:28px 0 0;
  color:#ded5c7;
  font-size:21px;
  line-height:1.55;
}

.about-photo-stack{position:relative;min-height:510px;z-index:12}
.paper-layer{
  position:absolute;
  right:10%;
  width:410px;
  height:340px;
  background:#d3b98f;
  box-shadow:0 18px 28px rgba(0,0,0,.32);
}
.paper-layer-one{top:67px;transform:rotate(-7deg)}
.paper-layer-two{top:86px;right:4%;background:#c3a478;transform:rotate(6deg)}
.about-photo-button{
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  cursor:zoom-in;
}
.about-photo-button:focus-visible{outline:2px solid rgba(244,239,229,.78);outline-offset:5px}
.hero-main-photo{
  position:absolute;
  right:3%;
  top:22px;
  width:min(420px,69%);
  padding:12px 12px 20px;
  background:#e6d1aa;
  transform:rotate(4deg);
  box-shadow:0 24px 36px rgba(0,0,0,.48);
  transition:transform .3s ease,filter .3s ease;
}
.hero-main-photo:hover{transform:translateY(-8px) rotate(2.6deg) scale(1.015);filter:drop-shadow(0 16px 18px rgba(0,0,0,.28))}
.hero-main-photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.hero-note{
  position:absolute;
  right:-1%;
  bottom:24px;
  width:220px;
  padding:24px 20px;
  color:#302419;
  background:#e2caa2;
  box-shadow:0 11px 20px rgba(0,0,0,.28);
  transform:rotate(-4deg);
  font-family:'Segoe Print','Bradley Hand',cursive;
  font-size:18px;
  line-height:1.42;
}
.hero-note::before{
  content:"";
  position:absolute;
  width:72px;height:24px;
  top:-12px;left:72px;
  background:rgba(172,140,94,.72);
  transform:rotate(2deg);
}

.my-story-section{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(460px,.95fr);
  gap:60px;
  align-items:center;
  padding:86px clamp(34px,7vw,110px) 96px;
  color:#241e18;
  background:
    linear-gradient(rgba(245,229,200,.97),rgba(237,214,177,.98)),
    repeating-linear-gradient(0deg,rgba(94,65,30,.025) 0 1px,transparent 1px 4px);
}
.my-story-section::before,
.my-story-section::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:34px;
  background:inherit;
  z-index:3;
  pointer-events:none;
}
.my-story-section::before{
  top:-23px;
  clip-path:polygon(0 64%,4% 45%,9% 68%,14% 42%,20% 66%,26% 46%,33% 70%,39% 44%,46% 64%,53% 42%,60% 68%,67% 48%,74% 70%,81% 45%,88% 66%,94% 47%,100% 63%,100% 100%,0 100%);
}
.my-story-section::after{
  bottom:-23px;
  clip-path:polygon(0 0,100% 0,100% 38%,94% 55%,88% 34%,81% 60%,74% 37%,67% 56%,60% 32%,53% 58%,46% 35%,39% 61%,33% 38%,26% 57%,20% 34%,14% 60%,9% 37%,4% 56%,0 42%);
}
.my-story-copy{position:relative;z-index:4;max-width:700px}
.my-story-copy h2,.write-about-copy h2,.behind-book-copy h2,.stay-section h2{
  margin:0 0 18px;
  font-size:clamp(38px,3.8vw,58px);
  font-weight:500;
  line-height:1.03;
}
.my-story-copy h2::after,.write-about-copy h2::after,.behind-book-copy h2::after{
  content:"";
  display:block;
  width:52px;height:3px;
  margin-top:12px;
  background:var(--about-red);
  transform:rotate(-4deg);
}
.my-story-copy p{
  font-size:18px;
  line-height:1.58;
  margin:0 0 14px;
}
.story-signature-row{
  display:flex;
  align-items:flex-end;
  gap:45px;
  margin-top:32px;
}
.red-script{
  color:var(--about-red);
  font-family:'Segoe Print','Bradley Hand',cursive;
  font-size:30px;
  line-height:1.08;
  transform:rotate(-5deg);
}
.story-signature{width:155px;height:auto}

.story-photo-stack{position:relative;min-height:470px;z-index:4}
.story-photo{
  position:absolute;
  padding:9px 9px 15px;
  background:#e4cfa8;
  box-shadow:0 15px 24px rgba(77,50,24,.25);
  transition:transform .28s ease,filter .28s ease;
}
.story-photo:hover{filter:drop-shadow(0 12px 12px rgba(60,40,20,.25))}
.story-photo img{display:block;width:100%;height:100%;object-fit:cover}
.story-photo-main{
  z-index:4;
  left:4%;
  top:24px;
  width:235px;
  height:290px;
  transform:rotate(-3deg);
}
.story-photo-main:hover{transform:translateY(-6px) rotate(-1.8deg) scale(1.02)}
.story-tape{
  position:absolute;
  width:70px;height:24px;
  top:-12px;left:50%;
  transform:translateX(-50%) rotate(2deg);
  background:rgba(173,143,95,.72);
}
.story-photo-upper{
  z-index:2;
  right:6%;
  top:0;
  width:220px;
  height:176px;
  transform:rotate(5deg);
}
.story-photo-upper:hover{transform:translateY(-5px) rotate(3.5deg)}
.story-photo-lower{
  z-index:3;
  right:0;
  bottom:4px;
  width:290px;
  height:195px;
  transform:rotate(5deg);
}
.story-photo-lower:hover{transform:translateY(-5px) rotate(3.5deg)}

.write-about-section{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:70px;
  padding:90px clamp(34px,7vw,110px);
  background:
    radial-gradient(circle at 80% 20%,rgba(255,255,255,.025),transparent 24%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    #11100f;
}
.write-about-copy{max-width:720px}
.write-about-copy p:last-child{color:#ddd4c7;font-size:18px;line-height:1.62}
.topic-note{
  justify-self:end;
  width:min(360px,100%);
  padding:34px 42px 32px;
  color:#2a2118;
  background:#e3cca4;
  box-shadow:0 15px 28px rgba(0,0,0,.30);
  transform:rotate(3deg);
  font-family:'Segoe Print','Bradley Hand',cursive;
  font-size:22px;
  line-height:1.55;
}
.topic-note span{display:block}
.topic-note span::before{content:"• ";}

.behind-book-section{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:60px;
  padding:82px clamp(34px,7vw,110px);
  color:#241e18;
  background:linear-gradient(rgba(244,227,196,.98),rgba(236,210,170,.98));
}
.behind-book-section::before,
.behind-book-section::after{
  content:"";
  position:absolute;left:0;right:0;height:28px;background:inherit;z-index:3;pointer-events:none;
}
.behind-book-section::before{
  top:-19px;
  clip-path:polygon(0 64%,7% 42%,15% 65%,24% 39%,34% 68%,44% 44%,54% 66%,64% 40%,74% 65%,84% 43%,93% 67%,100% 50%,100% 100%,0 100%);
}
.behind-book-section::after{
  bottom:-19px;
  clip-path:polygon(0 0,100% 0,100% 40%,93% 60%,84% 39%,74% 63%,64% 41%,54% 66%,44% 42%,34% 61%,24% 40%,15% 64%,7% 43%,0 60%);
}
.behind-book-copy{position:relative;z-index:4}
.behind-book-copy p{font-size:18px;line-height:1.6}
.about-text-link{
  display:inline-flex;
  gap:10px;
  margin-top:12px;
  color:var(--about-red);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-decoration:none;
}
.behind-book-art{position:relative;min-height:390px;z-index:4}
.about-book-cover{
  position:absolute;
  right:4%;
  top:0;
  width:210px;
  height:310px;
  object-fit:cover;
  transform:rotate(5deg);
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.34));
}
.about-farm-photo{
  position:absolute;
  left:5%;
  top:48px;
  width:245px;
  padding:9px 9px 14px;
  background:#e0c69a;
  transform:rotate(-6deg);
  box-shadow:0 16px 24px rgba(0,0,0,.23);
}

.about-quote-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:330px;
  background:#11100f;
}
.quote-typewriter{
  position:relative;
  height:100%;
  min-height:330px;
  background:
    radial-gradient(circle at 50% 70%,rgba(161,110,54,.18),transparent 35%),
    linear-gradient(135deg,#171511,#0e0d0c);
  overflow:hidden;
}
.quote-typewriter::before{
  content:"";
  position:absolute;
  left:14%;right:11%;bottom:56px;height:105px;
  border:3px solid rgba(187,142,84,.34);
  border-radius:18px 18px 6px 6px;
  transform:perspective(600px) rotateX(58deg);
  box-shadow:inset 0 0 20px rgba(0,0,0,.7),0 14px 28px rgba(0,0,0,.42);
}
.type-key{
  position:absolute;
  bottom:90px;
  width:28px;height:24px;
  border-radius:50%;
  border:2px solid rgba(216,183,135,.48);
}
.key-one{left:29%}.key-two{left:39%}.key-three{left:49%}.key-four{left:59%}.key-five{left:69%}
.about-quote-section blockquote{
  margin:0;
  padding:60px clamp(34px,7vw,110px) 60px 70px;
  color:#2a2118;
  background:#e4cba3;
  font-size:clamp(28px,3vw,44px);
  line-height:1.28;
  min-height:330px;
  display:flex;
  align-items:center;
  position:relative;
}
.about-quote-section blockquote::after{
  content:"";
  position:absolute;
  width:65px;height:3px;
  background:var(--about-red);
  right:18%;bottom:78px;
  transform:rotate(-7deg);
}

.stay-section{
  text-align:center;
  padding:72px 24px 86px;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    #11100f;
}
.stay-section h2{margin-bottom:9px}
.stay-red-line{display:block;width:58px;height:3px;background:var(--about-red);margin:0 auto 20px;transform:rotate(-4deg)}
.stay-section p{max-width:620px;margin:0 auto 25px;color:#d5cdc2;font-size:16px;line-height:1.5}
.stay-button{
  display:inline-flex;
  min-height:48px;
  padding:0 26px;
  align-items:center;
  justify-content:center;
  background:var(--about-red);
  color:white;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
}

.about-photo-dialog{
  width:min(900px,92vw);
  max-height:92vh;
  padding:18px;
  border:1px solid #9c7b56;
  background:#161412;
  box-shadow:0 30px 85px rgba(0,0,0,.72);
}
.about-photo-dialog::backdrop{background:rgba(0,0,0,.86)}
.about-photo-dialog img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;margin:auto}
.about-dialog-close{
  position:absolute;top:4px;right:9px;z-index:2;
  border:0;background:rgba(0,0,0,.35);color:#f4efe5;
  width:38px;height:38px;border-radius:50%;
  font-size:28px;cursor:pointer;
}

@media(max-width:1000px){
  .about-hero{grid-template-columns:1fr;min-height:auto;padding-top:150px}
  .about-hero-copy{text-align:center;margin:auto}
  .about-title::after{margin-left:auto;margin-right:auto}
  .about-dek{margin-left:auto;margin-right:auto}
  .about-photo-stack{width:min(700px,100%);margin:auto}
  .my-story-section{grid-template-columns:1fr}
  .story-photo-stack{width:min(620px,100%);margin:auto}
  .write-about-section{grid-template-columns:1fr}
  .topic-note{justify-self:center}
  .behind-book-section{grid-template-columns:1fr}
  .behind-book-art{width:min(620px,100%);margin:auto}
}
@media(max-width:720px){
  .about-hero{padding:125px 22px 80px}
  .about-title{font-size:clamp(48px,13vw,68px)}
  .about-dek{font-size:18px}
  .about-photo-stack{min-height:430px}
  .hero-main-photo{width:78%;right:4%}
  .paper-layer{width:75%;right:14%}
  .hero-note{width:180px;font-size:15px;right:0}
  .my-story-section{padding:72px 24px 80px}
  .story-signature-row{gap:20px;flex-wrap:wrap}
  .story-photo-stack{min-height:420px}
  .story-photo-main{width:190px;height:236px}
  .story-photo-upper{width:170px;height:136px}
  .story-photo-lower{width:225px;height:150px}
  .write-about-section,.behind-book-section{padding:72px 24px}
  .about-quote-section{grid-template-columns:1fr}
  .about-quote-section blockquote{padding:55px 28px;min-height:260px}
  .quote-typewriter{min-height:250px}
}
@media(max-width:520px){
  .about-photo-stack{min-height:350px}
  .hero-main-photo{width:82%;right:3%}
  .paper-layer{height:260px}
  .hero-note{display:none}
  .story-photo-stack{min-height:360px}
  .story-photo-main{left:0;width:165px;height:205px}
  .story-photo-upper{right:2%;width:145px;height:116px}
  .story-photo-lower{right:0;width:195px;height:132px}
  .red-script{font-size:24px}
  .story-signature{width:125px}
  .behind-book-art{min-height:315px}
  .about-book-cover{width:155px;height:230px}
  .about-farm-photo{width:190px}
}


/* About story photo cluster refinement */
.story-photo-stack{
  min-height:500px!important;
}

/* Main James 2 photo sits in front on the left */
.story-photo-main{
  z-index:6!important;
  left:2%!important;
  top:84px!important;
  width:250px!important;
  height:310px!important;
  transform:rotate(-3.5deg)!important;
}

/* James Light tucks behind the upper-right of the main photo */
.story-photo-upper{
  z-index:3!important;
  right:5%!important;
  top:26px!important;
  width:225px!important;
  height:180px!important;
  transform:rotate(5deg)!important;
}

/* TBC tucks behind the lower-right of the main photo */
.story-photo-lower{
  z-index:4!important;
  right:0!important;
  bottom:28px!important;
  width:300px!important;
  height:202px!important;
  transform:rotate(4.5deg)!important;
}

/* Tape every photo in the cluster */
.story-photo{
  overflow:visible!important;
}
.story-photo::before{
  content:""!important;
  position:absolute!important;
  top:-12px!important;
  left:50%!important;
  width:70px!important;
  height:24px!important;
  transform:translateX(-50%) rotate(2deg)!important;
  background:linear-gradient(90deg,rgba(158,126,80,.74),rgba(194,162,108,.76) 50%,rgba(154,121,74,.74))!important;
  opacity:.84!important;
  box-shadow:0 1px 1px rgba(0,0,0,.14),inset 0 1px rgba(255,244,214,.15)!important;
  z-index:8!important;
  pointer-events:none!important;
}

/* Existing main-photo tape is redundant once every photo has tape */
.story-tape{
  display:none!important;
}

/* Keep the main photo visually in front during interaction */
.story-photo-main:hover,
.story-photo-main:focus-visible{
  z-index:9!important;
  transform:translateY(-7px) rotate(-2deg) scale(1.025)!important;
}
.story-photo-upper:hover,
.story-photo-upper:focus-visible{
  z-index:8!important;
  transform:translateY(-6px) rotate(3.5deg) scale(1.02)!important;
}
.story-photo-lower:hover,
.story-photo-lower:focus-visible{
  z-index:8!important;
  transform:translateY(-6px) rotate(3deg) scale(1.02)!important;
}

@media(max-width:720px){
  .story-photo-stack{
    min-height:430px!important;
  }
  .story-photo-main{
    left:0!important;
    top:86px!important;
    width:205px!important;
    height:255px!important;
  }
  .story-photo-upper{
    right:1%!important;
    top:34px!important;
    width:175px!important;
    height:140px!important;
  }
  .story-photo-lower{
    right:0!important;
    bottom:24px!important;
    width:230px!important;
    height:155px!important;
  }
}

@media(max-width:520px){
  .story-photo-stack{
    min-height:380px!important;
  }
  .story-photo-main{
    left:0!important;
    top:82px!important;
    width:175px!important;
    height:218px!important;
  }
  .story-photo-upper{
    right:0!important;
    top:36px!important;
    width:145px!important;
    height:116px!important;
  }
  .story-photo-lower{
    right:0!important;
    bottom:24px!important;
    width:195px!important;
    height:132px!important;
  }
  .story-photo::before{
    width:58px!important;
    height:20px!important;
    top:-10px!important;
  }
}


/* 2026-09-30 author content update */
.my-story-copy p,.write-about-copy p{font-size:17px;line-height:1.7;}
.torn-topic-note{position:relative;overflow:visible!important;clip-path:polygon(3% 2%,97% 0,100% 8%,98% 16%,100% 25%,97% 34%,100% 45%,98% 57%,100% 69%,97% 78%,100% 90%,96% 100%,4% 98%,0 91%,2% 79%,0 67%,3% 55%,0 43%,2% 31%,0 18%);}
.torn-topic-note:before,.torn-topic-note:after{content:"";position:absolute;top:-13px;width:78px;height:28px;background:rgba(189,159,105,.7);box-shadow:0 2px 3px rgba(0,0,0,.15);z-index:3;}
.torn-topic-note:before{left:14%;transform:rotate(-6deg);}
.torn-topic-note:after{right:13%;transform:rotate(7deg);}
.torn-topic-note span{position:relative;z-index:2;}
.about-photo-carousel{padding:72px clamp(24px,8vw,120px) 86px;text-align:center;background:#151310;}
.photo-rotation{position:relative;width:min(900px,92vw);height:min(520px,58vw);min-height:320px;margin:0 auto 46px;overflow:hidden;border:10px solid #ddc49a;box-shadow:0 24px 55px rgba(0,0,0,.45);transform:rotate(-.6deg);}
.rotation-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease;}
.rotation-photo.active{opacity:1;}
.about-photo-carousel blockquote{max-width:920px;margin:0 auto;color:#f1e7d7;font-size:clamp(30px,4vw,58px);line-height:1.16;font-weight:400;}
@media(max-width:760px){
  .about-photo-carousel{padding:54px 20px 64px;}
  .photo-rotation{height:62vw;min-height:280px;border-width:7px;}
  .torn-topic-note:before,.torn-topic-note:after{width:58px;height:22px;top:-10px;}
}
@media(prefers-reduced-motion:reduce){.rotation-photo{transition:none;}}


/* 2026-09-30 About page photo layout correction */
.story-photo-stack{
  position:relative!important;
  min-height:0!important;
  z-index:4!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  grid-template-areas:
    "main main"
    "upper lower"!important;
  gap:24px!important;
  align-items:start!important;
  width:100%!important;
  max-width:660px!important;
  justify-self:end!important;
}
.story-photo{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:10px 10px 16px!important;
  display:block!important;
  background:#e4cfa8!important;
  box-shadow:0 15px 24px rgba(77,50,24,.22)!important;
  transition:transform .28s ease,filter .28s ease!important;
  overflow:visible!important;
}
.story-photo img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
}
.story-photo-main{
  grid-area:main!important;
  transform:rotate(-1.2deg)!important;
  z-index:3!important;
}
.story-photo-upper{
  grid-area:upper!important;
  transform:rotate(1.2deg)!important;
  z-index:2!important;
}
.story-photo-lower{
  grid-area:lower!important;
  transform:rotate(-.8deg)!important;
  z-index:2!important;
}
.story-photo-main:hover{
  transform:translateY(-4px) rotate(-.6deg) scale(1.008)!important;
}
.story-photo-upper:hover{
  transform:translateY(-4px) rotate(.6deg) scale(1.008)!important;
}
.story-photo-lower:hover{
  transform:translateY(-4px) rotate(-.3deg) scale(1.008)!important;
}
.story-tape{
  z-index:5!important;
}
@media(max-width:1050px){
  .my-story-section{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  .my-story-copy{
    max-width:820px!important;
  }
  .story-photo-stack{
    justify-self:start!important;
    max-width:760px!important;
    margin-top:18px!important;
  }
}
@media(max-width:620px){
  .story-photo-stack{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "main"
      "upper"
      "lower"!important;
    gap:18px!important;
    max-width:100%!important;
  }
  .story-photo,
  .story-photo-main,
  .story-photo-upper,
  .story-photo-lower{
    transform:none!important;
  }
}


/* 2026-10-01 preserve natural photo proportions in About rotation */
.photo-rotation{
  height:min(620px,66vw)!important;
  min-height:360px!important;
  background:#11100f!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.rotation-photo{
  object-fit:contain!important;
  object-position:center!important;
  background:#11100f!important;
}
@media(max-width:760px){
  .photo-rotation{
    height:72vw!important;
    min-height:300px!important;
  }
}