:root {
  --paper:#f4f0e7;
  --ink:#263b27;
  --olive:#50583a;
  --gold:#bd8938;
  --line:rgba(66,71,48,.22);
  --header-h:76px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  min-width:320px;
  margin:0;
  background:var(--paper) url("assets/paper-texture.webp") center top / 740px auto repeat;
  color:var(--ink);
  font:500 20px/1.25 "Cormorant Garamond", Georgia, serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a { color:inherit; }
button { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible {outline:2px solid #b68a42;outline-offset:4px;}
.skip-link {
  position:absolute; z-index:1000; left:12px; top:-90px;
  background:#fff; padding:12px 18px; border-radius:10px;
}
.skip-link:focus {top:12px;}

/* Header: mobile first */
.site-header {
  position:relative;
  z-index:30;
  width:100%;
  height:var(--header-h);
  border-bottom:1px solid rgba(68,65,42,.26);
  background:rgba(246,242,233,.95);
}
.header-inner {
  width:100%;height:100%;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
  padding:0 16px 0 12px;
}
.brand { display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto;}
.brand img {
  display:block;width:122px;height:auto;max-height:73px;object-fit:contain;
  mix-blend-mode:multiply;
}
.header-actions {display:flex;align-items:center;gap:11px;margin-left:auto;}
.socials {display:flex;align-items:center;gap:10px;}
.socials a {display:grid;place-items:center;width:32px;height:40px;text-decoration:none;}
.socials img {display:block;width:27px;height:27px;object-fit:contain;}
.socials a:hover img {transform:translateY(-1px);filter:brightness(.85);}
.menu-toggle {
  width:43px;height:43px;flex:0 0 43px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;border:1px solid #737956;border-radius:50%;background:transparent;
  padding:0;cursor:pointer;color:var(--ink);
}
.menu-toggle span {
  display:block;width:22px;height:1.6px;border-radius:2px;background:currentColor;
  transition:transform .22s ease,opacity .22s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}
.desktop-nav {display:none;}
.site-menu {
  position:absolute;right:13px;top:calc(100% + 8px);
  width:min(350px,calc(100vw - 26px));
  border:1px solid rgba(66,71,48,.22);
  border-radius:18px;
  background:#f7f3ea url("assets/paper-texture.webp") center / cover no-repeat;
  box-shadow:0 16px 45px rgba(24,35,17,.17);
  padding:11px;
}
.site-menu[hidden] {display:none!important;}
.site-menu a {
  display:block;text-decoration:none;
  font-size:23px;line-height:1.12;
  min-height:49px;padding:12px 16px;
  border-radius:10px;
}
.site-menu a:hover,.site-menu a:focus-visible {background:rgba(77,92,57,.09);}
.site-menu a:last-child {color:#fff;background:#304b31;margin-top:5px;text-align:center;}

/* First fold */
.hero {
  position:relative;
  isolation:isolate;
  min-height:max(700px,calc(100svh - var(--header-h)));
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,250,239,.22),rgba(255,250,239,.05)),
    url("assets/paper-texture.webp") center top / 750px auto repeat;
}
.hero-inner {position:relative;z-index:4;width:100%;max-width:1440px;margin:0 auto;padding:19px 23px 365px;}
.hero-content {position:relative;max-width:345px;}
.hero h1 {
  display:flex;flex-direction:column;align-items:flex-start;
  margin:0;
  color:#203723;
  font-size:clamp(67px,18.3vw,85px);
  font-weight:500;
  letter-spacing:-.059em;
  line-height:.81;
}
.hero h1 span {display:block;white-space:nowrap;}
.hero h1 span + span {margin-top:7px;}
.gold-line {width:43px;height:2px;margin:27px 0 14px 7px;background:#c18e37;}
.hero-description {
  max-width:292px;
  padding:0 0 0 7px;
  margin:0;
  font-size:clamp(21px,5.55vw,24px);
  line-height:1.09;
  font-weight:500;
  letter-spacing:-.006em;
  text-wrap:pretty;
}
.hero-actions {
  display:flex;flex-direction:column;align-items:flex-start;
  gap:12px;
  margin-top:26px;
}
.join-button {
  display:flex;align-items:center;justify-content:space-between;gap:17px;
  min-height:53px;
  max-width:100%;width:238px;
  padding:9px 20px 10px 27px;
  border-radius:999px;
  background:linear-gradient(105deg,#2d4a32,#304d33 65%,#1e3927);
  color:#fbf6ed;text-decoration:none;
  font-size:27px;line-height:1;font-weight:500;white-space:nowrap;
  box-shadow:0 3px 0 rgba(18,35,18,.03);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.join-button svg {flex:0 0 auto;width:24px;height:24px;}
.join-button:hover {transform:translateY(-2px);box-shadow:0 6px 19px rgba(25,52,31,.18);}
.hero-price {
  margin:0 0 0 7px;
  font-size:26px;line-height:1.05;letter-spacing:.025em;font-weight:500;
}
.hero-price span {font-weight:400;}
.hero-art {position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.author-art {
  position:absolute;z-index:2;
  top:325px;
  left:50%;
  height:610px;width:auto;max-width:none;
  transform:translateX(-42%);
}
.gold-disc {
  position:absolute;z-index:1;
  width:160px;height:160px;border-radius:50%;
  left:34%;top:390px;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,236,177,.72),transparent 40%),
    radial-gradient(circle at 77% 79%,rgba(130,84,19,.2),transparent 50%),
    url("assets/paper-texture.webp") center / 330px auto;
  background-color:#d6a855;
  background-blend-mode:screen,multiply,multiply;
  box-shadow:inset 0 0 0 1px rgba(122,79,22,.11);
  opacity:.95;
}
.rust-paper {
  position:absolute;z-index:0;
  top:335px;right:-70px;width:205px;height:480px;
  background:#9b553e;
  clip-path:polygon(28% 0,100% 8%,100% 100%,13% 89%,3% 69%,19% 53%,0 28%);
  opacity:.84;
}
.flowers-art {
  position:absolute;z-index:3;
  left:-112px;bottom:-18px;
  width:570px;height:auto;max-width:none;
}

/* Narrower phones */
@media(max-width:370px) {
  .header-inner {padding:0 12px 0 8px;}
  .brand img {width:108px;}
  .header-actions {gap:7px;}
  .socials {gap:5px;}
  .socials a {width:30px;}
  .socials img {width:25px;height:25px;}
  .hero {min-height:760px;}
  .hero-inner {padding:20px 18px 355px;}
  .hero h1 {font-size:clamp(60px,18.1vw,69px);}
  .hero-description {font-size:21px;max-width:268px;}
  .hero-actions {margin-top:23px;}
  .author-art {top:365px;height:615px;}
  .gold-disc {top:440px;left:28%;}
  .flowers-art {width:535px;left:-112px;}
}

/* Wider phones */
@media(min-width:431px) and (max-width:760px) {
  .hero-inner {padding-left:clamp(28px,6vw,46px);padding-top:26px;}
  .hero-content {max-width:440px;}
  .hero h1 {font-size:clamp(80px,16.5vw,110px);}
  .hero-description {font-size:clamp(24px,4.6vw,29px);max-width:350px;}
  .join-button {width:270px;font-size:29px;min-height:57px;}
  .hero-art .author-art {height:clamp(690px,120vw,900px);top:330px;left:55%;}
  .hero {min-height:max(860px,calc(100svh - 76px));}
  .flowers-art {width:660px;left:-120px;}
  .gold-disc {top:445px;width:190px;height:190px;}
}

/* Tablet */
@media(min-width:761px) {
  :root{--header-h:92px;}
  .header-inner {padding:0 clamp(25px,4vw,72px);}
  .brand img {width:145px;max-height:85px;}
  .socials {gap:12px;}
  .socials img {width:30px;height:30px;}
  .hero {min-height:750px;}
  .hero-inner {padding:90px clamp(38px,6vw,95px) 170px;}
  .hero-content {max-width:610px;}
  .hero h1 {font-size:clamp(100px,10vw,150px);line-height:.83;}
  .gold-line {width:70px;margin:37px 0 22px 10px;}
  .hero-description {font-size:clamp(30px,3vw,40px);max-width:540px;padding-left:10px;line-height:1.08;}
  .hero-actions {margin-top:35px;gap:20px;}
  .join-button {width:315px;min-height:68px;font-size:36px;padding-inline:36px 23px;}
  .hero-price {font-size:34px;margin-left:10px;}
  .author-art {top:-35px;left:auto;right:-450px;transform:none;height:820px;}
  .gold-disc {top:135px;left:auto;right:32%;width:230px;height:230px;}
  .rust-paper {top:25px;right:0;width:280px;height:690px;}
  .flowers-art {bottom:-15px;left:-160px;width:670px;}
}
@media(min-width:1130px) {
  .desktop-nav {display:flex;align-items:center;gap:clamp(18px,2.8vw,45px);margin-left:auto;margin-right:32px;}
  .desktop-nav a {text-transform:uppercase;text-decoration:none;font-size:17px;letter-spacing:.015em;}
  .desktop-nav a:hover {color:#7b6e48;}
  .menu-toggle {display:none;}
  .header-actions {margin-left:0;}
  .hero {min-height:max(770px,calc(100svh - 92px));}
  .hero-inner {padding-top:110px;}
  .hero h1 {font-size:clamp(130px,10vw,171px);}
  .hero-description {max-width:510px;font-size:38px;}
  .author-art {right:-370px;height:920px;top:-25px;}
  .gold-disc {right:28%;width:280px;height:280px;top:130px;}
  .rust-paper {width:370px;right:0;top:0;}
  .flowers-art {width:800px;left:-185px;}
}
@media(min-width:1550px) {
  .author-art {right:-310px;}
  .hero-art {max-width:1920px;left:50%;right:auto;width:100%;transform:translateX(-50%);}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;transition-duration:0.01ms!important;animation-duration:0.01ms!important;}
}
/* Refinement against the supplied 375px mobile reference:
   keep the membership offer legible above the portrait. */
@media(max-width:430px) {
  .hero {min-height:max(645px,calc(100svh - var(--header-h)));}
  .hero-inner {padding-top:6px;padding-bottom:310px;}
  .hero h1 {font-size:clamp(55px,16.8vw,70px);line-height:.80;}
  .hero h1 span + span {margin-top:3px;}
  .gold-line {margin-top:13px;margin-bottom:13px;}
  .hero-description {max-width:283px;font-size:21px;line-height:1.015;}
  .hero-actions {margin-top:17px;gap:9px;}
  .join-button {min-height:50px;padding-top:8px;padding-bottom:9px;}
  .hero-price {font-size:25px;}
  .author-art {
    top:auto;
    bottom:-73px;
    left:50%;
    height:490px;
    transform:translateX(-42%);
    -webkit-mask-image:linear-gradient(to right,transparent 8%,rgba(0,0,0,.3) 23%,black 41%);
    mask-image:linear-gradient(to right,transparent 8%,rgba(0,0,0,.3) 23%,black 41%);
  }
  .gold-disc {top:auto;bottom:265px;left:36%;width:155px;height:155px;}
  .rust-paper {top:auto;bottom:0;height:480px;}
  .flowers-art {width:540px;left:-118px;bottom:-12px;}
}
@media(max-width:370px) {
  .hero-inner {padding:10px 18px 325px;}
  .hero h1 {font-size:clamp(54px,16.7vw,61px);}
  .hero-description {max-width:270px;font-size:20px;}
  .author-art {height:470px;bottom:-75px;}
  .gold-disc {bottom:245px;left:34%;}
}

/* Final mobile artwork balance: recognizable portrait, readable offer, no visual seam on the left. */
html {scrollbar-width:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar {display:none;width:0;}
@media(max-width:430px) {
  .author-art {
    top:auto;
    bottom:-25px;
    height:390px;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 30%,rgba(0,0,0,.65) 46%,#000 56%);
    mask-image:linear-gradient(to right,transparent 0%,transparent 30%,rgba(0,0,0,.65) 46%,#000 56%);
  }
  .rust-paper {display:none;}
  .gold-disc {opacity:.72;}
}
@media(max-width:370px) {
  .author-art {height:355px;bottom:-25px;}
}

/* Desktop: keep the copy on paper and the portrait on the right. */
@media(min-width:761px) {
  .hero::before {
    content:"";
    position:absolute;
    z-index:2;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,
      rgba(246,243,234,.98) 0%,
      rgba(246,243,234,.96) 27%,
      rgba(246,243,234,.83) 37%,
      rgba(246,243,234,.18) 60%,
      transparent 78%);
  }
  .hero .author-art {
    position:absolute;
    top:auto;
    bottom:-45px;
    left:auto;
    right:-570px;
    height:760px;
    transform:none;
  }
  .hero .gold-disc {opacity:.45;left:auto;right:32%;}
  .hero .hero-content {max-width:590px;}
  .hero .hero-inner {z-index:4;}
}
@media(min-width:761px) and (max-width:1129px) {
  .hero .author-art {right:-565px;height:680px;bottom:-50px;}
  .hero .hero-inner {padding-top:86px;}
  .hero .hero-content {max-width:500px;}
  .hero h1 {font-size:clamp(91px,9.4vw,112px);}
  .hero-description {font-size:clamp(27px,3vw,34px);max-width:450px;}
}
@media(min-width:1130px) {
  .hero .author-art {right:-630px;height:840px;bottom:-45px;}
  .hero .hero-content {max-width:640px;}
  .hero .hero-description {max-width:490px;}
}

/* Desktop uses the original finished collage to preserve its natural torn-paper edges. */
@media(min-width:761px) {
  .hero .hero-art {
    background:url("assets/collage-hero.webp") center center / cover no-repeat;
  }
  .hero .hero-art > * {display:none!important;}
  .hero::before {
    background:linear-gradient(90deg,
      rgba(246,243,234,.68) 0%,
      rgba(246,243,234,.48) 28%,
      rgba(246,243,234,.18) 46%,
      transparent 64%);
  }
}

/* Keep the face fully opaque even on narrow 320px devices. */
@media(max-width:370px) {
  .hero .author-art {
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 14%,#000 39%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 14%,#000 39%);
  }
}