/* WECAMP / STORYBOOK EDITION — art direction & extended spacing
   The original interaction logic and demo pages are retained from v6. */
:root {
  --forest: #202020;
  --deep: #202020;
  --pine: #202020;
  --gold: #A61028;
  --gold-light: #F5F0EA;
  --cream: #F5F0EA;
  --paper: #F5F0EA;
  --ink: #202020;
  --line: #F5F0EA;
}
body { letter-spacing: -.015em; }
/* A calm, editorial rhythm instead of tightly stacked landing-page blocks. */
.content-width { width:min(1390px, calc(100% - 144px)); }
.site-header { padding-top: 14px; }
.header-pill { box-shadow: 0 9px 35px rgba(32,32,32,.095); }
.wordmark-symbol { background: #202020; }
.hero { padding-inline: 21px; }
.hero-stage { height:min(95svh,920px); min-height:725px; border-radius: 0 0 20px 20px; }
.hero-host { background:#202020; }
.host-sheen { background:radial-gradient(ellipse at 66% 50%, #A6102838 0%, transparent 68%), repeating-linear-gradient(116deg, transparent 0, transparent 170px, #F5F0EA08 171px, transparent 172px); }
.hero-guest h1 { font-size:clamp(30px,2.9vw,52px); }
.host-statement { font-size: clamp(78px,7.8vw,149px); line-height:.98; letter-spacing:-.095em; margin-top:27px; margin-bottom:40px; }
.host-caption h2 { font-size:clamp(27px,2.3vw,40px); }
.hero-note, .hero-note-host { bottom:85px; }
.connector-ring { background:linear-gradient(140deg,#F5F0EA,#A61028); border:6px solid #F5F0EA; }
.connector-words { color:#F5F0EA; }
.hero-under { padding-block:20px 27px; }

/* Narrative / a little more room around the writing. */
.intro-section { padding:150px 0 154px; }
.intro-top { gap:100px; }
.intro-top h2 { font-size:clamp(34px,3.1vw,49px);line-height:1.56; }
.intro-top>p { max-width:470px;line-height:2.2; }
.process-track { margin-top:76px; }
.process-track article { padding-block:46px 45px; }
.intro-links { margin-top:36px; }

.experience-section { padding:148px 0 164px; background:#F5F0EA; }
.section-heading { margin-bottom:60px; gap:80px; }
.section-heading h2 { font-size:clamp(46px,4.2vw,65px); }
.experience-grid { gap:34px; }
.experience-card { display:block; }
.experience-visual { border:1px solid #F5F0EA8C; box-shadow:0 18px 45px #20202013; border-radius:3px; }
.experience-caption { margin-top:8px; }

/* Quiet book-archive theatre / original illustrations + real winter photography. */
.portfolio-section {
  min-height:335vh;
  background:#202020;
}
.portfolio-sticky {
  height:100svh;
  min-height:760px;
  max-height:1080px;
  background:
    radial-gradient(ellipse 67% 66% at 67% 49%, #A6102824 0%, transparent 72%),
    radial-gradient(ellipse 60% 85% at 10% 95%, #A6102838 0%, transparent 75%),
    linear-gradient(125deg,#202020,#202020 55%,#202020);
}
.portfolio-sticky::before {
  content:""; position:absolute;inset:0;pointer-events:none;opacity:.25;
  background: repeating-linear-gradient(90deg, transparent 0 203px, #F5F0EA0B 204px 205px, transparent 206px 412px);
}
.portfolio-sticky::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background: radial-gradient(ellipse at 50% 28%, transparent 45%, #20202074 100%);
}
.portfolio-layout { position:relative;z-index:1;grid-template-columns:272px minmax(0,1fr);gap:72px;max-width:1480px;align-items:center; }
.portfolio-intro { align-self:center; }
.portfolio-intro h2 { font-size:clamp(46px,4.75vw,74px);line-height:.96;letter-spacing:-.065em; margin:22px 0 23px; }
.portfolio-intro>p { font-size:13px;line-height:2.05; margin-bottom:20px; }
.portfolio-intro .portfolio-help { font-size:11px;color:#F5F0EA;line-height:2.0;margin-top:26px; }
.portfolio-flourish { display:block;margin-top:27px;letter-spacing:.35em;color:#A61028;font-family:var(--serif);font-size:17px;opacity:.85;white-space:nowrap; }
.portfolio-pagination { font-size:35px;margin-top:46px; }

.book-stage-wrap { position:relative; padding:27px 17px 24px 15px; min-width:0; }
.book-stage {
  display:flex;align-items:stretch;gap:9px;
  height:535px; width:100%; overflow:visible;max-width:none;
  box-shadow:none;perspective:1700px;
}
.project-book {
  display:flex; flex:0 0 54px; min-width:0;
  height:100%; overflow:hidden;
  position:relative; z-index:1;
  border:1px solid #F5F0EA31;
  border-radius:3px 8px 7px 3px;
  box-shadow:5px 12px 17px #20202077, inset -2px 0 4px #F5F0EA22;
  transform:translateY(8px);
  transition:flex-basis .82s cubic-bezier(.18,.83,.18,1),flex-grow .82s cubic-bezier(.18,.83,.18,1),transform .7s cubic-bezier(.18,.83,.18,1),box-shadow .65s ease;
}
.project-book:nth-child(2) { transform:translateY(14px); }
.project-book:nth-child(4) { transform:translateY(4px); }
.project-book:nth-child(5) { transform:translateY(11px); }
.project-book.is-active { flex:1 1 auto; z-index:6;transform:translateY(-9px);box-shadow:13px 19px 40px #20202099, 2px 0 2px #F5F0EA11; }
.project-book:after {
  content:"";position:absolute;top:5px;bottom:4px;right:0;width:5px;z-index:9;pointer-events:none;
  background:repeating-linear-gradient(90deg,#F5F0EA 0 1px,#F5F0EA 1px 2px,#F5F0EA 2px 3px);
  opacity:.72;
}
.book-spine {
  position:relative;z-index:3;
  width:54px;min-width:54px;height:100%;border:0;
  border-right:1px solid #20202058;
  background:
    linear-gradient(90deg,#20202055 0%,#F5F0EA22 11%,transparent 24%,transparent 78%,#20202055 100%),
    linear-gradient(180deg,#20202022 0%,transparent 17%,transparent 75%,#20202044 100%),var(--book);
  color:var(--foil,#A61028);padding:30px 0 29px;
  box-shadow:inset 1px 0 #F5F0EA3A,inset -3px 0 #2020206E;
}
.book-spine::before,
.book-spine::after {
  content:"";position:absolute;left:8px;right:8px;height:1px;background:var(--foil,#A61028);opacity:.67;
  box-shadow:0 7px 0 color-mix(in srgb, var(--foil,#A61028) 60%,transparent);
}
.book-spine::before{top:62px}
.book-spine::after{bottom:67px}
.book-spine span{font:500 14px/1 var(--serif)}
.book-spine strong{font:500 14px/1.15 var(--serif);letter-spacing:.09em;text-shadow:0 1px 1px #20202033}
.book-cover{
  position:relative;flex:1;min-width:0;height:100%;background:#202020;
  opacity:0;pointer-events:none;transition:opacity .45s ease .15s;
  isolation:isolate;
}
.book-cover::before {
  content:"";position:absolute;inset:15px;z-index:4;
  border:1px solid #F5F0EA5C;
  box-shadow:inset 0 0 0 6px #20202018;
  pointer-events:none;
}
.book-cover::after {
  content:"✦";position:absolute;right:39px;bottom:33px;z-index:3;
  font:400 27px var(--serif);color:#F5F0EAA6;
  pointer-events:none;
}
.book-cover img { width:100%;height:100%;object-fit:cover; }
.book-cover-shade { z-index:1;background:linear-gradient(0deg,#202020E6 0%,#2020209A 27%,#20202020 67%,#20202045 100%); }
.cover-ocean .book-cover-shade,.cover-hideaway .book-cover-shade,.cover-admin .book-cover-shade {background:linear-gradient(0deg,#202020D9,transparent 64%)}
.book-cover-number { position:absolute;z-index:3;left:33px;right:auto;top:31px;color:#F5F0EA;letter-spacing:.22em;font-size:9px; }
.book-cover-info { z-index:3;bottom:51px;left:36px;right:29px; }
.book-cover-info h3 { font-size:clamp(45px,4vw,65px); line-height:.95;font-weight:400; }
.book-cover-info p{color:#F5F0EA;font-size:12px;letter-spacing:-.02em;}
.book-cover-info a{font-size:11px;letter-spacing:.12em;border-color:#F5F0EA;padding-bottom:7px}
.project-book.is-active .book-cover{opacity:1;pointer-events:auto}
.project-book:not(.is-active):hover{transform:translateY(-6px);box-shadow:8px 17px 27px #20202088;}
.shelf-rule {
  height:18px;position:relative; margin:16px -13px 0; border-radius:2px 2px 14px 14px;
  background:linear-gradient(180deg,#A6102858,#202020 20%,#202020 61%,#202020 100%);
  box-shadow:0 20px 30px #20202099,0 3px 3px #20202099;
}
.shelf-rule:before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:#F5F0EA69}
.shelf-caption{display:block;margin-top:22px;text-align:right;color:#F5F0EA;font:600 9px var(--sans);letter-spacing:.23em}
.portfolio-trackline { position:relative;z-index:1;margin-top:44px;width:min(1050px,calc(100% - 80px)); }

.service-section { padding:152px 0 161px;background:#F5F0EA; }
.service-grid { margin-top:56px; }
.service-grid article { min-height:310px;padding-top:34px; }
.service-grid h3{margin-top:56px;}
.contact-section { padding:136px 0 151px;background:#F5F0EA; }
.contact-layout{gap:110px}
.footer-scene { padding:64px 28px 30px;background:linear-gradient(145deg,#202020,#202020 55%,#202020) }
.footer-card { min-height:650px;padding-top:94px; border-radius:100px 100px 28px 28px;background:linear-gradient(160deg,#202020,#202020);}
.footer-top{gap:66px}
.footer-type { font-size:min(20.2vw,360px);padding-top:108px;letter-spacing:-.095em; }
.quick-inquiry{background:#202020}

@media(max-width:1250px){
  .content-width{width:calc(100% - 92px)}
  .portfolio-layout{grid-template-columns:230px minmax(0,1fr);gap:42px}
  .book-stage{height:470px;gap:7px}
  .project-book{flex-basis:46px}
  .book-spine{width:46px;min-width:46px}
  .book-cover-info{left:26px;bottom:35px}
  .book-cover-number{left:26px}
  .footer-type{padding-top:88px}
}
@media(max-width:900px){
  .content-width{width:calc(100% - 68px)}
  .hero-stage{height:830px}
  .host-statement{font-size:clamp(54px,7.8vw,96px)}
  .intro-section{padding-block:105px}
  .experience-section{padding-block:110px}
  .portfolio-section{min-height:290vh}
  .portfolio-sticky{min-height:680px}
  .portfolio-layout{grid-template-columns:1fr;gap:18px}
  .portfolio-intro {display:grid;grid-template-columns:1fr auto;gap:0 20px;align-items:end}
  .portfolio-intro .section-label{grid-column:1/-1}
  .portfolio-flourish{display:none}
  .portfolio-intro h2{grid-row:2/4;grid-column:1;font-size:52px;margin:10px 0}
  .portfolio-intro>p{display:none}
  .portfolio-intro .portfolio-help{display:none}
  .portfolio-pagination{grid-column:2;grid-row:2/4;margin:0;font-size:30px}
  .book-stage{height:425px}
  .service-section{padding-block:110px}
  .contact-section{padding-block:110px}
  .footer-scene{padding:30px 15px 15px}
  .footer-card{border-radius:64px 64px 22px 22px;min-height:560px}
}
@media(max-width:640px){
  .content-width{width:calc(100% - 38px)}
  .hero{padding-inline:8px}
  .hero-stage{height:650px;min-height:0}
  .hero-guest h1{font-size:clamp(19px,4.7vw,29px)}
  .hero-content-host{left:36px}
  .host-statement{font-size:clamp(31px,8.1vw,48px);margin-bottom:43px}
  .connector-ring{width:75px;height:75px}
  .intro-section{padding:83px 0 97px}
  .intro-top{gap:21px}
  .intro-top h2{font-size:clamp(28px,6.8vw,37px)}
  .process-track{margin-top:49px}
  .experience-section{padding:96px 0 111px}
  .experience-grid{gap:14px}
  .section-heading{margin-bottom:37px}
  .portfolio-section{min-height:235vh}
  .portfolio-sticky{height:100svh;min-height:635px;max-height:none}
  .portfolio-layout{gap:25px}
  .portfolio-intro h2{font-size:clamp(38px,9.2vw,53px)}
  .portfolio-pagination{font-size:25px}
  .book-stage-wrap{padding:13px 8px 4px}
  .book-stage{height:355px;gap:4px}
  .project-book{flex-basis:25px;transform:translateY(5px)}
  .project-book.is-active{transform:translateY(-5px)}
  .book-spine{width:25px;min-width:25px;padding:13px 0}
  .book-spine span{font-size:9px}
  .book-spine strong{font-size:9px;letter-spacing:.025em}
  .book-spine::before,.book-spine::after{left:4px;right:4px;opacity:.4}
  .book-spine::before{top:39px}.book-spine::after{bottom:47px}
  .book-cover::before{inset:8px}
  .book-cover::after{right:15px;bottom:15px;font-size:17px}
  .book-cover-number{left:12px;right:8px;top:15px;font-size:6px;letter-spacing:.08em}
  .book-cover-info{bottom:31px;left:14px;right:10px}
  .book-cover-info h3{font-size:clamp(29px,8vw,44px)}
  .book-cover-info p{font-size:9px;margin-bottom:13px}
  .book-cover-info a{font-size:8px}
  .shelf-rule{margin:8px -3px 0;height:12px}
  .shelf-caption{font-size:7px;margin-top:10px}
  .portfolio-trackline{margin-top:21px}
  .service-section{padding:100px 0 114px}
  .service-grid{margin-top:30px}
  .service-grid article{min-height:248px}
  .service-grid h3{margin-top:28px}
  .contact-section{padding:100px 0 115px}
  .footer-scene{padding:19px 8px 9px}
  .footer-card{min-height:490px;padding:40px 20px 18px;border-radius:45px 45px 15px 15px}
  .footer-type{font-size:25vw;padding-top:52px}
}
@media(max-width:380px){
  .book-stage{height:332px}
  .book-spine{width:22px;min-width:22px}
  .project-book{flex-basis:22px}
  .book-cover-info h3{font-size:28px}
  .portfolio-sticky{min-height:600px}
}
@media(prefers-reduced-motion:reduce){
  .project-book,.book-cover{transition:none!important}
}
/* Display the new cover art immediately as a chapter opens; reveal its text after the spine expands. */
.book-cover { transition: opacity .22s ease .02s; }
.book-cover-info, .book-cover-number { opacity:0; transform:translateY(8px); transition:opacity .28s ease, transform .38s ease; }
.project-book.is-active .book-cover-info, .project-book.is-active .book-cover-number { opacity:1;transform:none;transition-delay:.38s; }