/* 獻實批 v1 — vintage journal style */
:root{
  --cream:#FAF6EF; --ink:#3B2F28; --bronze:#755B33; --wine:#7A2E3A; --gold:#C2A36B; --taupe:#B8A99A;
  --paper:#F3EAD9; --kraft:#C9AE86; --green:#2F4A3A;
  --serif:"Playfair Display","Noto Serif TC",serif;
  --sans:"Noto Sans TC",system-ui,sans-serif;
  --wrap:1180px;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .27  0 0 0 0 .16  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
html,body{overflow-x:clip}
body{margin:0;background:var(--cream) var(--noise);color:var(--ink);font:400 16px/1.75 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0;letter-spacing:.04em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:6px 10px}
.center{text-align:center}
:focus-visible{outline:2px dashed var(--wine);outline-offset:3px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.94) var(--noise);backdrop-filter:blur(4px);border-bottom:1px solid rgba(117,91,51,.25);box-shadow:0 2px 10px rgba(59,47,40,.06)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand img{height:54px;width:auto;mix-blend-mode:multiply}
.nav{display:flex;gap:10px}
.tag{font:700 17px/1 var(--serif);text-decoration:none;padding:12px 16px 11px;letter-spacing:.06em;position:relative;transition:transform .2s}
.tag--paper{background:#E9DBC0 var(--noise);box-shadow:1px 2px 4px rgba(59,47,40,.18);clip-path:polygon(0 4%,100% 0,98% 100%,2% 96%)}
.tag--paper:nth-child(2){transform:rotate(-1.2deg)}
.tag--label{background:#E7CDB8;border:2px solid var(--bronze);border-radius:6px;box-shadow:inset 0 0 0 3px #F2E2D2,1px 2px 4px rgba(59,47,40,.2)}
.tag:hover{transform:translateY(-2px) rotate(-1deg)}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;padding:48px 0 96px;background:
  radial-gradient(closest-side,rgba(194,163,107,.22),transparent) 88% 8%/300px 220px no-repeat,
  radial-gradient(closest-side,rgba(117,91,51,.18),transparent 70%) 94% 92%/320px 200px no-repeat,
  linear-gradient(180deg,#EFE2CB,#F2E7D4 60%,#EDE0C8) ;}
.hero::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.9;pointer-events:none}
.hero__in{position:relative;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:32px}
.hero__filigree{position:absolute;left:0;top:70px;width:70px;mix-blend-mode:multiply;opacity:.85;-webkit-mask:linear-gradient(90deg,#000 60%,transparent),linear-gradient(180deg,transparent,#000 15% 85%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#000 60%,transparent) intersect,linear-gradient(180deg,transparent,#000 15% 85%,transparent)}
.hero__arrow{position:absolute;right:calc(50% - 520px);top:4px;width:40px;opacity:.85}
.hero__text{position:relative;padding-left:72px}
.hero__brand{display:flex;align-items:center;gap:6px}
.hero__bird{flex:none;width:200px;height:auto;margin:-30px 0 0 -40px;transform:rotate(-6deg);filter:drop-shadow(0 6px 8px rgba(59,47,40,.12))}
.hero__title{font-size:clamp(56px,7.4vw,104px);color:#1E3550;letter-spacing:.14em;line-height:1.1;white-space:nowrap;margin-top:30px}
.hero__tag{font:700 clamp(24px,2.6vw,36px)/1.4 var(--serif);margin:14px 0 0;letter-spacing:.08em}
.hero__lead{margin:18px 0 0;max-width:30em;color:var(--bronze);font-size:17px;border-left:3px solid var(--gold);padding-left:14px}
.hero__photo{display:flex;justify-content:center}
.hero__ring{width:min(440px,100%);aspect-ratio:1;border-radius:50%;padding:12px;background:conic-gradient(from 30deg,#C2A36B,#E6CF9C,#9C7C45,#E6CF9C,#C2A36B);box-shadow:0 10px 30px rgba(59,47,40,.25)}
.hero__ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;object-position:40% 60%;border:3px solid #5b4423}
.hero__stamps{position:absolute;left:24px;bottom:22px;display:flex;align-items:flex-end;gap:12px}
.stamp-css{display:inline-block;padding:6px;background:#fff8ec;transform:rotate(-6deg);box-shadow:0 2px 5px rgba(0,0,0,.2);
  -webkit-mask:radial-gradient(circle 4px at 4px 4px,transparent 98%,#000) -4px -4px/10px 10px;mask:radial-gradient(circle 4px at 4px 4px,transparent 98%,#000) -4px -4px/10px 10px}
.stamp-css img{width:70px}
.hero__cta{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);z-index:5}

/* wax seal button */
.seal{--s:#7A2E3A;display:inline-grid;place-items:center;min-width:190px;height:78px;padding:0 34px;color:#F6E7DA;text-decoration:none;font:700 24px/1 var(--serif);letter-spacing:.1em;border:none;cursor:pointer;
  background:radial-gradient(ellipse at 35% 30%,#a3485a,#7A2E3A 45%,#4f1823 100%);
  border-radius:46% 54% 50% 50%/58% 50% 52% 44%;
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.12),inset 0 0 0 9px rgba(255,220,220,.14),inset 0 -6px 12px rgba(0,0,0,.35),0 6px 14px rgba(59,47,40,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.4);transition:transform .2s,filter .2s}
.seal:hover{transform:translateY(-2px) rotate(-1deg);filter:brightness(1.08)}
.seal:disabled{filter:grayscale(.5) brightness(.9);cursor:wait}
.seal--wide{min-width:230px;height:74px;font-size:26px}
.seal--static{min-width:84px;width:84px;height:84px;padding:0;font-size:32px;margin:0 auto 10px}

/* ---------- sheet: the big paper the content sits on ---------- */
.sheet{position:relative;max-width:1260px;margin:0 auto;background:#FBF8F2 var(--noise);box-shadow:0 0 0 1px rgba(117,91,51,.12),0 18px 40px rgba(59,47,40,.10);padding:80px 0 40px}
.deco{position:absolute;mix-blend-mode:multiply;pointer-events:none}
.deco--pressed{left:-150px;top:110px;width:170px;z-index:0;transform:rotate(-6deg);-webkit-mask:radial-gradient(closest-side,#000 70%,transparent);mask:radial-gradient(closest-side,#000 70%,transparent)}
.service{position:relative}
.book{z-index:1}
.block{position:relative;max-width:var(--wrap);margin:0 auto;padding:30px 24px 50px}
.h2{font-size:clamp(28px,3vw,38px);text-align:center;margin-bottom:22px;letter-spacing:.08em}
.h2--left{text-align:left}

/* occasion chips */
.block--occasion{padding-bottom:10px}
.chips{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0}
.chip span{display:block;padding:12px 44px;font:700 22px/1.2 var(--serif);letter-spacing:.08em;background:#E8D7B9 var(--noise);box-shadow:1px 3px 6px rgba(59,47,40,.18);
  clip-path:polygon(0 6%,4% 0,9% 5%,14% 1%,20% 4%,27% 0,34% 4%,41% 1%,48% 5%,55% 0,62% 4%,69% 1%,76% 5%,83% 0,90% 4%,96% 1%,100% 6%,99% 94%,95% 100%,89% 96%,82% 100%,75% 95%,68% 100%,61% 96%,54% 100%,47% 95%,40% 100%,33% 96%,26% 100%,19% 95%,12% 100%,6% 96%,0 100%);transition:transform .2s,background .2s}
.chip:nth-child(1) span{transform:rotate(-1.5deg)}.chip:nth-child(3) span{transform:rotate(1.2deg)}
.chip::before{content:"";position:absolute;z-index:2;top:-12px;left:-14px;width:70px;height:22px;background:rgba(117,91,51,.55);transform:rotate(-14deg);pointer-events:none}
.chip:nth-child(3)::before{left:auto;right:-14px;top:auto;bottom:-10px;transform:rotate(-16deg);background:rgba(59,47,40,.55)}
.chip:nth-child(2)::before{display:none}
.chip input:checked+span{background:#7A2E3A;color:#F6E7DA}
.chip input:focus-visible+span{outline:2px dashed var(--wine);outline-offset:4px}

/* write grid */
.write-grid{display:grid;grid-template-columns:270px 1fr 1fr;gap:28px;align-items:start}
.tape{position:absolute;display:block;background:rgba(201,174,134,.7);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.notebook{position:relative;background:#5a3a25;border-radius:10px;padding:10px 10px 10px 28px;box-shadow:0 8px 18px rgba(59,47,40,.25)}
.notebook::before{content:"";position:absolute;left:8px;top:22px;bottom:22px;width:22px;background:repeating-linear-gradient(180deg,transparent 0 12px,#b39a6f 12px 15px,#6e5634 15px 17px,transparent 17px 28px)}
.tape--nb{width:120px;height:30px;top:-14px;left:60px;transform:rotate(-3deg);z-index:2}
.notebook__page{background:#FBF6EA;border-radius:3px;padding:30px 20px 22px;min-height:540px;
  background-image:linear-gradient(rgba(117,91,51,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(117,91,51,.13) 1px,transparent 1px);background-size:18px 18px}
.notebook__title{font-size:24px;text-align:center;margin-bottom:8px}
.notebook__hint{font-size:15px;margin:0 0 10px;font-weight:500}
.notebook__list{margin:0;padding-left:1.3em;font-size:15px;line-height:1.75}
.notebook__list li{margin-bottom:6px}
.notebook__small{font-size:13px;color:var(--bronze);margin:6px 0 0}
.link-btn{background:none;border:none;padding:0;color:var(--wine);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.notebook .link-btn{margin-top:10px;font-size:15px}

.paper-card{position:relative;background:#F1E6D2 var(--noise);padding:22px 26px 18px;box-shadow:0 8px 18px rgba(59,47,40,.18);transform:rotate(.4deg)}
.paper-card__label{font:700 15px/1 var(--serif);color:var(--bronze);letter-spacing:.1em}
.paper-card__ta{display:block;width:100%;height:500px;margin-top:10px;resize:vertical;border:none;background:transparent;color:var(--ink);font:400 17px/34px var(--sans);
  background-image:repeating-linear-gradient(180deg,transparent 0 33px,rgba(117,91,51,.35) 33px 34px);background-attachment:local;padding:0 2px}
.paper-card__ta::placeholder{color:#8a7a66}
.paper-card__ta:focus{outline:none}
.paper-card:focus-within{box-shadow:0 0 0 2px rgba(122,46,58,.35),0 8px 18px rgba(59,47,40,.18)}
.paper-card__foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap-reverse;gap:6px 12px;margin-top:8px}
.pageinfo{font-size:14px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.55);border:1.5px solid var(--taupe);border-radius:999px;padding:3px 12px}
.pageinfo.extra{border-color:var(--wine);color:var(--wine)}
.pageinfo.over{background:var(--wine);color:#fff;border-color:var(--wine)}
.count{font-size:14px;color:var(--bronze)}.count.over{color:var(--wine);font-weight:700}

.preview{position:relative;margin:0}
.deco--sprig{width:110px;right:-74px;top:-118px;z-index:3;transform:rotate(6deg);-webkit-mask:radial-gradient(closest-side,#000 75%,transparent);mask:radial-gradient(closest-side,#000 75%,transparent)}
.clip{position:absolute;z-index:4;top:-18px;left:36px;width:18px;height:58px;border:3px solid #8f8a84;border-radius:10px;border-bottom-color:#7d7872}
.preview__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.preview__title{font-size:19px;padding-left:66px}
.toggle{display:inline-flex;border:1.5px solid var(--bronze);border-radius:999px;overflow:hidden;background:#fff8ee}
.toggle label{cursor:pointer}.toggle input{position:absolute;opacity:0}
.toggle span{display:block;padding:5px 14px;font-size:14px;font-weight:700}
.toggle input:checked+span{background:var(--bronze);color:#fff}
.toggle input:focus-visible+span{outline:2px dashed var(--wine)}
.preview__paper{--pc:#FBF7EE;--rule:rgba(117,91,51,.22);position:relative;aspect-ratio:210/297;background:var(--pc) var(--noise);box-shadow:0 10px 22px rgba(59,47,40,.22);overflow:hidden;transform:rotate(-.6deg);
  padding:9% 8% 8%;container-type:inline-size}
.preview__paper[data-paper="lined"]{--pc:#F6EEDC}
.preview__paper[data-paper="lined"] .preview__text{background-image:repeating-linear-gradient(180deg,transparent 0 calc(var(--lh) - 1px),var(--rule) calc(var(--lh) - 1px) var(--lh));background-attachment:local}
.preview__paper[data-paper="rose"]{--pc:#F2D9D9}
.preview__paper[data-paper="kraft"]{--pc:#D8BE95}
.preview__paper[data-paper="mineral"]{--pc:#EEEAE2;background-image:radial-gradient(ellipse at 20% 30%,rgba(140,130,120,.18),transparent 40%),radial-gradient(ellipse at 80% 70%,rgba(140,130,120,.15),transparent 45%),var(--noise)}
.preview__paper[data-paper="floral"]{--pc:#FAF4EA;background-image:radial-gradient(circle at 92% 6%,rgba(122,46,58,.22) 0 14px,transparent 15px),radial-gradient(circle at 86% 10%,rgba(117,91,51,.25) 0 9px,transparent 10px),radial-gradient(circle at 6% 95%,rgba(122,46,58,.18) 0 16px,transparent 17px),var(--noise)}
.preview__paper{--lh:6.2cqw}
.preview__text{height:calc(var(--lh) * 20);font-size:4.1cqw;line-height:var(--lh);white-space:pre-wrap;word-break:break-all;color:#2a2622;overflow:hidden;font-family:"XSP Casual","ChenYuluoyan Full","Noto Serif TC",serif}
.preview__text.neat{font-family:"XSP Neat","JasonHandwriting5p Full","Noto Serif TC",serif}
.preview__text.loading{opacity:.35}
.preview__flow{transition:transform .35s ease}
.preview__text span{display:inline-block;white-space:pre}
.preview__text .br{display:block;height:0}
.preview__empty{position:absolute;inset:40% 12% auto;text-align:center;color:#9b8b76;font-size:15px;margin:0}
.preview__pageno{position:absolute;right:7%;bottom:3.5%;font:500 12px/1 "Playfair Display",serif;color:var(--bronze)}
.pv-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;font-size:14px;font-weight:700}
.pv-nav[hidden]{display:none}
.pv-nav__btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--bronze);background:#fff8ee;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.pv-nav__btn:disabled{opacity:.35;cursor:default}
.preview__cap{font-size:13px;color:var(--bronze);margin-top:12px;line-height:1.6}
.warn{color:var(--wine);font-weight:700}

.ribbon{display:inline-block;margin-top:34px;padding:14px 46px;font:700 22px/1 var(--serif);letter-spacing:.08em;color:var(--ink);text-decoration:none;background:#C9A57D var(--noise);
  clip-path:polygon(0 0,100% 6%,94% 50%,100% 94%,0 100%,5% 50%);transform:rotate(-2deg);transition:transform .2s}
.ribbon:hover{transform:rotate(0) translateY(-2px)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:20px;padding:0 10px}
.polaroid{position:relative;display:block;cursor:pointer;background:#FDFBF6;padding:16px 16px 12px;box-shadow:0 10px 20px rgba(59,47,40,.22);transition:transform .25s,box-shadow .25s}
.polaroid input{position:absolute;opacity:0}
.polaroid--l{transform:rotate(-3deg)}.polaroid--r{transform:rotate(2.5deg)}
.polaroid:hover{transform:rotate(0) translateY(-4px)}
.polaroid:has(input:checked){box-shadow:0 0 0 4px var(--wine),0 14px 26px rgba(59,47,40,.28)}
.polaroid:has(input:focus-visible){outline:2px dashed var(--wine);outline-offset:8px}
.polaroid__photo{display:block;aspect-ratio:1/1;overflow:hidden;background:#3b2f28}
.polaroid__photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.polaroid__name{display:block;text-align:center;font:700 22px/1.3 var(--serif);margin-top:12px;letter-spacing:.04em}
.polaroid__name b{font-family:"Playfair Display",serif;color:var(--wine)}
.polaroid__desc{display:block;text-align:center;font-size:14px;line-height:1.6;color:var(--bronze);margin-top:4px;min-height:4.8em}
.polaroid:has(input:checked) .polaroid__name::after{content:"已選";display:inline-block;margin-left:8px;font:700 12px/1 var(--sans);color:#fff;background:var(--wine);padding:4px 7px;border-radius:3px;vertical-align:4px}
.kraft{position:absolute;inset:-14px -18px 30px -12px;background:#B89262 var(--noise);z-index:-1;transform:rotate(4deg)}
.polaroid--m::before{content:"";position:absolute;z-index:3;top:-22px;left:50%;margin-left:-14px;width:28px;height:62px;border:4px solid var(--gold);border-radius:14px;border-bottom-width:5px}

.swatches{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;margin-top:46px;padding:0 10px}
.swatches__group--env{border-left:1px solid rgba(117,91,51,.3);padding-left:30px}
.swatches__label{font-weight:700;margin:0 0 12px;font-size:17px}
.swatches__label .sel{font-style:normal;color:var(--wine)}
.swatches__row{display:flex;flex-wrap:wrap;gap:16px}
.sw{position:relative;cursor:pointer;width:96px;text-align:center;font-size:13px;line-height:1.4}
.sw input{position:absolute;opacity:0}
.sw__chip{display:block;height:84px;margin-bottom:6px;border:1px solid rgba(59,47,40,.15);box-shadow:0 3px 6px rgba(59,47,40,.15);transition:transform .2s}
.sw--env .sw__chip{height:64px;position:relative;overflow:hidden}
.sw--env .sw__chip::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49.5%,rgba(0,0,0,.14) 50%,transparent 51.5%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49.5%,rgba(0,0,0,.14) 50%,transparent 51.5%) right/50% 100% no-repeat;height:62%}
.sw input:checked+.sw__chip{outline:3px solid var(--wine);outline-offset:3px;transform:translateY(-3px)}
.sw input:focus-visible+.sw__chip{outline:2px dashed var(--wine);outline-offset:4px}
.sw input:disabled+.sw__chip{opacity:.35;cursor:not-allowed}
.sw input:disabled~.sw__name{opacity:.55}
.sw--soon .sw__chip{background:repeating-linear-gradient(45deg,#efe6d6 0 8px,#e6dac4 8px 16px)!important}
.swatches__note{margin:18px 10px 0;font-size:14px;color:var(--bronze)}

/* order */
.block--order{padding-top:60px}
.order-grid{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:start}
.leather{position:relative;margin-left:-60px;padding-bottom:70px!important;background:linear-gradient(160deg,#3c5a47,#2a4334 60%,#22372b) ;border-radius:0 18px 18px 0;padding:34px 30px 40px 60px;box-shadow:0 14px 28px rgba(30,40,32,.35),inset 0 0 0 2px rgba(255,255,255,.06),inset 0 0 40px rgba(0,0,0,.25);position:sticky;top:100px}
.leather::before{content:"";position:absolute;inset:10px 10px 10px 18px;border:1.5px dashed rgba(220,210,180,.35);border-radius:0 12px 12px 0;pointer-events:none}
.leather::after{content:"";position:absolute;left:-26px;top:0;bottom:0;width:30px;background:linear-gradient(90deg,#5b3d27,#7b5435);border-radius:6px 0 0 6px}
.leather__slip{position:relative;z-index:1;background:#EFE1C4 var(--noise);padding:26px 24px 34px;transform:rotate(-1.2deg);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.leather__title{font-size:32px;letter-spacing:.08em;margin-bottom:10px}
.sum{margin:0;font-size:15px}
.sum dt{font-weight:700;color:var(--bronze);font-size:13px;margin-top:10px;letter-spacing:.06em}
.sum dd{margin:0;font-weight:500}
.sum__opening{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.sum--money{margin-top:0}
.sum__break{margin:12px 0 0;font-size:13px;color:var(--bronze);border-top:1px dashed rgba(117,91,51,.45);padding-top:8px}
.sum__price{font:700 34px/1 "Playfair Display",serif;color:var(--wine);margin:16px 0 0}
.leather__pocket{position:absolute;z-index:2;left:22px;right:22px;bottom:16px;height:64px;background:linear-gradient(180deg,#355241,#2a4334);border-radius:0 0 10px 10px;box-shadow:0 -3px 8px rgba(0,0,0,.25);border-top:1.5px dashed rgba(220,210,180,.35)}

.form{position:relative}
.form__head{position:relative;margin-bottom:10px}
.form__stamp{position:absolute;right:0;top:-24px;width:72px;transform:rotate(4deg);box-shadow:0 2px 5px rgba(0,0,0,.2)}
fieldset{border:none;margin:0 0 6px;padding:0}
legend{font:700 18px/1.4 var(--serif);margin-bottom:8px;letter-spacing:.06em}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:12px}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:4px}
.field input{width:100%;padding:11px 14px;border:1.5px solid #9d8a72;border-radius:8px;background:rgba(255,255,255,.55);font:400 16px/1.4 var(--sans);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(122,46,58,.15)}
.field input[aria-invalid="true"]{border-color:var(--wine);background:#fbeeee}
.field-err{min-height:0;margin:4px 0 0;font-size:13px;color:var(--wine);font-weight:700}
.field-err:empty{display:none}
.sample{color:var(--wine);font-weight:700}
.form__note{font-size:14px;background:rgba(194,163,107,.15);border-left:3px solid var(--gold);padding:10px 14px;margin:4px 0 18px}
.form__foot{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--wine)}
.pay{position:relative;text-align:right}
.pay__amount{font:700 24px/1.3 var(--serif);margin:0}
.pay__amount b{font-family:"Playfair Display",serif;color:var(--wine)}
.pay{max-width:360px}
.pay__method{display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;font-weight:700;font-size:15px;color:var(--ink)}
.pay__method svg{width:22px;height:22px;color:var(--wine)}
.pay__break{margin:2px 0 0;font-size:13px;color:var(--bronze)}
.pay__note{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--bronze)}
.pay__status{display:inline-block;margin:8px 0 0;padding:3px 12px;font-size:13px;font-weight:700;color:var(--wine);border:1.5px dashed var(--wine);border-radius:4px;transform:rotate(-1.5deg)}
.pay__status[hidden]{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.form__submit{display:flex;flex-direction:column;align-items:flex-end;margin-top:18px}
.form__err{margin:0 0 10px;color:var(--wine);font-weight:700;font-size:14px}
.form__err:empty{display:none}

/* postmarks (pure CSS) */
.postmark{position:absolute;display:grid;place-items:center;width:92px;height:92px;border:2.5px solid currentColor;border-radius:50%;color:rgba(40,60,110,.55);font-family:var(--serif);text-align:center;line-height:1.1;transform:rotate(-14deg);pointer-events:none}
.postmark::before{content:"";position:absolute;inset:6px;border:1.2px solid currentColor;border-radius:50%}
.postmark::after{content:"";position:absolute;left:84%;top:30%;width:90px;height:34px;background:repeating-linear-gradient(180deg,currentColor 0 2px,transparent 2px 8px);-webkit-mask:linear-gradient(90deg,#000,transparent);mask:linear-gradient(90deg,#000,transparent);border-radius:40%}
.postmark b{font-size:15px;letter-spacing:.1em;display:block}.postmark i{font-style:normal;font-size:11px;letter-spacing:.2em;display:block;border-top:1px solid currentColor;margin-top:3px;padding-top:2px}
.postmark--hero{position:relative;color:rgba(117,91,51,.55)}
.postmark--slip{right:12px;top:56px;width:78px;height:78px;color:rgba(117,91,51,.5)}.postmark--slip::after{display:none}
.postmark--form{right:96px;top:-34px;color:rgba(40,60,110,.45)}
.postmark--pay{right:auto;left:-40px;top:-26px;width:110px;height:110px;color:rgba(59,47,40,.22);z-index:-1}.postmark--pay::after{display:none}
.postmark--social1{left:14%;top:30px;width:120px;height:120px;color:rgba(40,60,110,.45)}
.postmark--social2{left:calc(14% + 90px);top:110px;width:100px;height:100px;color:rgba(40,60,110,.4);transform:rotate(12deg)}.postmark--social2::after{display:none}

/* service + faq */
.service-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:48px;align-items:start}
.book{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#4a3423;padding:10px;border-radius:6px;box-shadow:0 14px 26px rgba(59,47,40,.3)}
.book__page{position:relative;background:#FCF8F0 var(--noise);padding:26px 24px;min-height:400px;background-image:repeating-linear-gradient(180deg,transparent 0 29px,rgba(117,91,51,.14) 29px 30px);background-position:0 12px}
.book__page--l{border-radius:3px 0 0 3px;box-shadow:inset -14px 0 18px -12px rgba(0,0,0,.25)}
.book__page--r{border-radius:0 3px 3px 0;box-shadow:inset 14px 0 18px -12px rgba(0,0,0,.25)}
.book h3{font-size:19px;margin:0 0 6px;letter-spacing:.06em}
.book p{font-size:15px;line-height:30px;margin:0 0 18px}
.steps{margin:0;padding-left:1.4em;font-size:15px;line-height:30px}
.book__stamp{position:absolute;right:14px;top:14px;width:56px;transform:rotate(5deg);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.book__vase{width:96px;mix-blend-mode:multiply;margin:4px 0 0 auto;-webkit-mask:radial-gradient(closest-side,#000 70%,transparent);mask:radial-gradient(closest-side,#000 70%,transparent)}
.pen{position:absolute;right:-22px;top:20px;width:14px;height:300px;border-radius:7px 7px 3px 3px;background:linear-gradient(90deg,#3a1118,#7A2E3A 45%,#4a1a22);transform:rotate(6deg);box-shadow:2px 3px 6px rgba(0,0,0,.3)}
.pen::before{content:"";position:absolute;left:-1px;right:-1px;top:70px;height:10px;background:linear-gradient(90deg,#9c7c45,#e6cf9c,#9c7c45)}
.pen::after{content:"";position:absolute;left:2px;bottom:-26px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:28px solid #C2A36B}
.faq details{border-bottom:1px solid rgba(117,91,51,.35)}
.faq details:first-of-type{border-top:1px solid rgba(117,91,51,.35)}
.faq summary{list-style:none;cursor:pointer;padding:14px 34px 14px 0;font-weight:700;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 16px;font-size:15px;color:#4d3f35}
.deco--green-book{right:-70px;bottom:-250px;width:250px;opacity:.95;transform:rotate(-2deg);z-index:0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%),linear-gradient(180deg,transparent,#000 10%);mask:linear-gradient(90deg,transparent,#000 12%) intersect,linear-gradient(180deg,transparent,#000 10%);-webkit-mask-composite:source-in}

/* social */
.block--social{text-align:center;padding-bottom:20px;min-height:260px}
.social{display:flex;justify-content:center;gap:48px}
.social__item{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:700;font-size:15px;line-height:1.3;color:var(--ink)}
.social__item svg{width:62px;height:62px}
.social__item small{font-weight:500;color:var(--bronze)}
.social__item--dark svg{color:#1d1b1a}

/* footer */
.footer{text-align:center;padding:24px 20px 40px;position:relative}
.footer__mark{width:64px;margin:0 auto;mix-blend-mode:multiply}
.footer__brand{font:700 26px/1.3 var(--serif);letter-spacing:.12em;margin:4px 0 0}
.footer__copy{margin:4px 0 0;font-size:15px}
.footer__contact{margin:4px 0 0;font-size:13px;color:var(--bronze)}
.footer__fonts{margin:6px 0 0;font-size:13px}
.footer__fonts .link-btn{color:var(--bronze);font-weight:500}

/* dialogs */
.dlg{max-width:min(520px,92vw);border:none;padding:28px 30px 22px;background:#FBF6EA var(--noise);color:var(--ink);box-shadow:0 20px 50px rgba(0,0,0,.35);border-radius:4px}
.dlg::backdrop{background:rgba(42,32,26,.55)}
.dlg h3{font-size:24px;margin-bottom:10px}
.dlg p{margin:0 0 10px;font-size:15px}
.dlg--done{text-align:center}
.dlg__pay{color:var(--wine);font-weight:700;border:1.5px dashed var(--wine);padding:8px 10px;border-radius:4px}
.dlg__pay[hidden]{display:none}
.dlg__demo{color:var(--wine);font-size:13px!important}
.btn-plain{margin-top:8px;padding:9px 26px;border:1.5px solid var(--bronze);background:transparent;color:var(--ink);font:700 15px/1 var(--sans);border-radius:999px;cursor:pointer}
.btn-plain:hover{background:var(--bronze);color:#fff}

/* ---------- responsive ---------- */
.plans-hint{display:none;text-align:center;font-size:13px;color:var(--bronze);margin:0}
@media (max-width:1180px){
  .write-grid{grid-template-columns:1fr 1fr}
  .notebook{grid-column:1/-1}
  .notebook__page{min-height:0}
  .deco--sprig{right:-20px}
  .leather{margin-left:0;border-radius:18px}
  .leather::after{display:none}
  .hero__arrow{display:none}
}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;text-align:center}
  .hero__text{padding-left:0}
  .hero__brand{justify-content:center}
  .hero__bird{margin:0 auto -10px;width:150px}
  .hero__title{padding-left:0;margin-top:0}
  .hero__lead{margin-left:auto;margin-right:auto;border-left:none;padding-left:0;border-top:2px solid var(--gold);padding-top:12px}
  .hero__ring{width:min(340px,80vw)}
  .hero__filigree{display:none}
  .hero__stamps{display:none}
  .plans{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto;gap:34px}
  .swatches{grid-template-columns:1fr}
  .swatches__group--env{border-left:none;padding-left:0;border-top:1px solid rgba(117,91,51,.3);padding-top:20px}
  .order-grid{grid-template-columns:1fr;gap:36px}
  .leather{position:relative;top:0}
  .service-grid{grid-template-columns:1fr}
  .deco--green-book{display:none}
}
@media (max-width:640px){
  body{font-size:15px}
  .topbar__in{height:64px;padding:0 14px}
  .brand img{height:40px}
  .nav{gap:5px}
  .tag{font-size:14px;padding:9px 9px 8px}
  .tag--paper:first-child{display:none}
  .hero{padding:28px 0 84px}
  .sheet{padding-top:64px}
  .block{padding:24px 16px 40px}
  .chips{gap:14px}
  .chip span{padding:10px 22px;font-size:18px}
  .write-grid{grid-template-columns:1fr;gap:30px}
  .paper-card{transform:none}
  .paper-card__ta{height:340px}
  .deco--sprig{width:70px;right:auto;left:-10px;top:auto;bottom:24px;transform:rotate(-8deg)}
  .row2{grid-template-columns:1fr;gap:0}
  .leather{padding:22px 16px 32px}
  .leather__pocket{left:12px;right:12px}
  .book{grid-template-columns:1fr}
  .book__page{min-height:0}
  .book__page--l,.book__page--r{border-radius:3px;box-shadow:none}
  .pen{display:none}
  .form__foot{flex-direction:column}
  .pay{text-align:left}
  .postmark--pay{left:auto;right:4px}
  .form__submit{align-items:stretch}
  .seal--wide{width:100%;max-width:320px;align-self:center}
  .form__stamp{width:54px;top:-14px}
  .postmark--form{display:none}
  .sw{width:calc((100% - 36px)/4);font-size:12px}
  .sw__chip{height:62px}
  .plans{display:flex;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding:30px 20px 26px;margin:0 -16px}
  .polaroid{flex:0 0 76%;scroll-snap-align:center;padding:12px 12px 10px}
  .polaroid--l,.polaroid--r{transform:none}
  .polaroid__name{font-size:19px}
  .kraft{display:none}
  .plans-hint{display:block}
  .postmark--social1,.postmark--social2{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}