:root{
  --paper:#fbf8ef;
  --ruled:#d9e3ee;
  --ink:#1f2a44;
  --ink-soft:#4a5570;
  --pencil:#2b3a67;
  --red:#d6303a;
  --red-soft:#fbe4e2;
  --navy-deep:#16203a;
  --line:#e8e1cf;
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans JP",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.95;font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.hand{font-family:"Klee One","Noto Sans JP",cursive}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* red pen progress line */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:var(--red);z-index:50}

.demo{background:var(--navy-deep);color:#e9edf7;font-size:12px;text-align:center;padding:8px 12px;line-height:1.6}

header{position:sticky;top:0;z-index:40;background:rgba(251,248,239,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{display:flex;flex-direction:column;line-height:1.2;text-decoration:none}
.logo b{font-family:"Zen Old Mincho",serif;font-weight:900;font-size:20px;letter-spacing:.12em}
.logo small{font-size:10px;letter-spacing:.2em;color:var(--ink-soft)}
nav{display:flex;gap:22px;font-size:14px}
nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--red)}
.tel-btn{font-weight:700;font-size:14px;background:var(--red);color:#fff;text-decoration:none;padding:9px 16px;border-radius:999px;white-space:nowrap}

/* ===== hero ===== */
.hero{
  position:relative;padding:64px 0 96px;border-bottom:1px solid var(--line);overflow:hidden;
  background:
    linear-gradient(90deg,transparent 0,transparent 71px,rgba(214,48,58,.45) 71px,rgba(214,48,58,.45) 73px,transparent 73px),
    repeating-linear-gradient(180deg,transparent 0,transparent 39px,var(--ruled) 39px,var(--ruled) 40px);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding-left:max(20px,88px)}
.eyebrow{font-size:13px;letter-spacing:.25em;color:var(--ink-soft);margin-bottom:18px}
h1{font-family:"Zen Old Mincho",serif;font-weight:900;font-size:clamp(28px,4.2vw,54px);line-height:1.5;letter-spacing:.04em}
h1 .ln{display:block;white-space:nowrap}
h1 .circle{position:relative;display:inline-block;padding:0 .12em}
h1 .circle svg{position:absolute;left:-12%;top:-18%;width:124%;height:136%;overflow:visible;pointer-events:none}
.pen{fill:none;stroke:var(--red);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.in .pen,.go .pen{animation:draw var(--d,.9s) var(--delay,0s) cubic-bezier(.5,.1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.lead{margin-top:24px;font-size:17px;max-width:28em;color:var(--ink-soft)}
.hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:15px 28px;border-radius:6px;background:var(--navy-deep);color:#fff;font-size:16px;box-shadow:4px 4px 0 var(--red);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--red)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:2px solid var(--ink)}
.note-hand{font-size:14px;color:var(--ink-soft);margin-top:18px}

/* answer sheet */
.sheet-wrap{position:relative;padding:8px}
.sheet{
  position:relative;background:#fff;border:1px solid #e3dcc8;padding:22px 22px 26px;transform:rotate(2.2deg);
  box-shadow:0 2px 0 #ece6d2,0 18px 34px -14px rgba(31,42,68,.35);
  background-image:repeating-linear-gradient(180deg,transparent 0,transparent 35px,#eef2f8 35px,#eef2f8 36px);
}
.sheet .sh{font-family:"Klee One",cursive;font-weight:600;font-size:15px;color:var(--pencil);display:flex;justify-content:space-between;border-bottom:2px solid var(--pencil);padding-bottom:6px;margin-bottom:10px}
.q{position:relative;font-family:"Klee One",cursive;font-size:19px;color:var(--pencil);line-height:36px;padding-left:46px}
.q .n{position:absolute;left:4px;font-size:15px}
.q .ans{display:inline-block;position:relative;padding:0 6px}
.q svg{position:absolute;overflow:visible;pointer-events:none}
.q .ok{left:-8px;top:-4px;width:calc(100% + 16px);height:44px}
.q .wrong{position:relative;display:inline-block}
.q .fix{left:-8px;top:-4px;width:calc(100% + 16px);height:44px}
.fixtext{position:absolute;left:18%;top:-26px;font-family:"Klee One",cursive;font-weight:600;color:var(--red);font-size:18px;transform:rotate(-6deg);opacity:0;white-space:nowrap}
.go .fixtext{animation:fadein .4s 2.6s forwards}
@keyframes fadein{to{opacity:1}}
.comment{margin-top:10px;font-family:"Klee One",cursive;font-weight:600;color:var(--red);font-size:15px;line-height:1.7;transform:rotate(-1.5deg);clip-path:inset(0 100% 0 0);padding:2px 0}
.go .comment{animation:write 1.6s 3.1s linear forwards}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
.score{position:absolute;right:16px;bottom:14px;width:92px;height:70px}
.sample-tag{position:absolute;left:14px;bottom:-26px;font-size:11px;color:var(--ink-soft);transform:rotate(2.2deg)}
.stamp{position:absolute;right:-14px;top:-22px;z-index:2;width:104px;height:104px;border:3px solid var(--red);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--red);transform:rotate(-12deg) scale(1.6);opacity:0;font-family:"Zen Old Mincho",serif;font-weight:900;line-height:1.1;text-align:center;background:rgba(251,248,239,.88)}
.go .stamp{animation:thump .45s 4.4s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes thump{to{transform:rotate(-12deg) scale(1);opacity:1}}
.stamp b{font-size:38px}.stamp span{font-size:12px;letter-spacing:.1em}

/* ===== sections ===== */
section{padding:88px 0}
.sec-h{display:flex;align-items:baseline;gap:16px;margin-bottom:38px;flex-wrap:wrap}
.sec-h h2{font-family:"Zen Old Mincho",serif;font-weight:900;font-size:clamp(26px,4vw,38px);letter-spacing:.06em;line-height:1.4}
.sec-h .en{font-family:"Klee One",cursive;color:var(--red);font-size:15px;transform:rotate(-2deg)}

.phil{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.phil p+p{margin-top:1.2em}
.big{font-family:"Zen Old Mincho",serif;font-weight:900;font-size:clamp(24px,3.2vw,34px);line-height:1.65;margin-bottom:22px}
.ul{position:relative;display:inline-block;white-space:nowrap}
.ul svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.5em;overflow:visible;pointer-events:none}
.quote{position:relative;background:#fff;border:1px solid var(--line);padding:26px 26px 26px 30px;box-shadow:6px 6px 0 var(--red-soft)}
.quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red)}
.quote small{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:8px;letter-spacing:.1em}
.quote p{font-family:"Zen Old Mincho",serif;font-weight:600;font-size:17px;line-height:1.95}

.photo{position:relative;transform:rotate(-2deg);background:#fff;padding:10px 10px 32px;box-shadow:0 14px 30px -12px rgba(31,42,68,.4);margin-bottom:-6px;z-index:1}
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.photo::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;background:rgba(214,48,58,.3);transform:translateX(-50%) rotate(3deg)}
.photo figcaption{position:absolute;left:12px;bottom:8px;font-size:11px;color:var(--ink-soft)}
.phil .quote{position:relative;z-index:2;margin-left:26px}

.band{position:relative;min-height:min(72vh,580px);padding:0;display:flex;align-items:flex-end;color:#fff;
  background:linear-gradient(180deg,rgba(22,32,58,0) 25%,rgba(22,32,58,.78)),url(img/classroom.webp) center/cover fixed}
.band .wrap{width:100%;padding-bottom:46px}
.band h2{font-family:"Zen Old Mincho",serif;font-weight:900;font-size:clamp(44px,9vw,104px);line-height:1.15;letter-spacing:.04em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.band-eyebrow{font-size:15px;letter-spacing:.2em;margin-bottom:8px}
.band-sub{margin-top:14px;font-size:clamp(14px,1.8vw,18px);color:#f0e9d8}
.band-cap{position:absolute;right:14px;top:12px;font-size:11px;color:rgba(255,255,255,.75)}

#classes{background:linear-gradient(rgba(22,32,58,.58),rgba(22,32,58,.58)),url(img/desk.webp) center/cover}
#classes .sec-h h2{color:#fff}
#classes .sec-h .en{color:#ffd0d0}

.facts{background:var(--navy-deep);color:#f2f4fa}
.facts .sec-h h2{color:#fff}
.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fact{border-top:2px solid var(--red);padding-top:16px}
.fact b{display:block;font-family:"Zen Old Mincho",serif;font-weight:900;font-size:clamp(28px,3.6vw,42px);line-height:1.2}
.fact > span{font-size:14px;color:#c4cbe0;display:block;margin-top:6px}
.fact b span{display:inline}

.faq{background:#fff;border-top:1px solid var(--line)}
.faq-list{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:baseline;padding:18px 4px;font-weight:700;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:"Klee One",cursive;font-weight:600;color:var(--red);font-size:20px}
.faq summary::after{content:"+";margin-left:auto;color:var(--ink-soft);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq summary:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.faq .a{padding:0 4px 20px 38px;color:var(--ink-soft);font-size:15px}

/* notebook classes */
.notebook{display:grid;grid-template-columns:170px 1fr;position:relative}
.tabs{display:flex;flex-direction:column;gap:8px;padding-top:26px;position:relative;z-index:2}
.tab{appearance:none;border:1px solid var(--line);border-right:none;background:#efe8d3;color:var(--ink);font:inherit;font-size:14px;font-weight:700;text-align:left;padding:14px 14px 14px 16px;border-radius:10px 0 0 10px;cursor:pointer;transform:translateX(8px);transition:transform .2s,background .2s;position:relative}
.tab small{display:block;font-weight:400;font-size:11px;color:var(--ink-soft)}
.tab:hover{transform:translateX(3px)}
.tab[aria-selected="true"]{background:#fff;transform:translateX(0);box-shadow:-3px 0 0 var(--red) inset}
.tab:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.page{position:relative;background:#fff;border:1px solid var(--line);min-height:340px;padding:34px 38px 36px 70px;box-shadow:0 18px 30px -18px rgba(31,42,68,.3);
  background-image:linear-gradient(90deg,transparent 0,transparent 47px,rgba(214,48,58,.4) 47px,rgba(214,48,58,.4) 49px,transparent 49px),repeating-linear-gradient(180deg,transparent 0,transparent 33px,#eef2f8 33px,#eef2f8 34px)}
.panel{transform-origin:left center}
.panel[hidden]{display:none}
.panel.flip{animation:flip .55s cubic-bezier(.3,.7,.3,1)}
@keyframes flip{from{transform:perspective(1400px) rotateY(-80deg);opacity:0}to{transform:perspective(1400px) rotateY(0);opacity:1}}
.panel .grade{display:inline-block;font-family:"Zen Old Mincho",serif;font-weight:900;font-size:26px;border-bottom:3px solid var(--red);margin-bottom:10px}
.panel .sub{font-size:14px;color:var(--ink-soft);margin-bottom:12px}
.panel p.body{font-size:16px;line-height:34px;max-width:34em}
.panel .penc{margin-top:18px;font-family:"Klee One",cursive;font-weight:600;color:var(--red);font-size:17px;line-height:1.8;transform:rotate(-1deg);clip-path:inset(0 100% 0 0);max-width:30em}
.panel.flip .penc,.panel.show .penc{animation:write 1.5s .45s linear forwards}

/* fee */
.fee{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fee-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px;list-style:none}
.fee-list li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);background:var(--paper);font-weight:500}
.fee-list svg{flex:none;width:30px;height:30px;overflow:visible;margin-top:3px}
.fee-list li:nth-child(2) .pen{--delay:.2s}.fee-list li:nth-child(3) .pen{--delay:.4s}.fee-list li:nth-child(4) .pen{--delay:.6s}
.todo{margin-top:24px;border:2px dashed #c9bfa4;padding:18px 20px;font-size:14px;color:var(--ink-soft);background:repeating-linear-gradient(135deg,#faf6ea 0,#faf6ea 10px,#f6f0de 10px,#f6f0de 20px)}
.todo b{color:var(--ink)}
.sakura{text-align:center}
.sakura .todo{max-width:640px;margin:0 auto;text-align:left}

.access{display:grid;grid-template-columns:1fr 1fr;gap:40px}
dl.info{display:grid;grid-template-columns:7em 1fr;gap:14px 12px;font-size:15px}
dl.info dt{font-weight:700;border-bottom:1px solid var(--line);padding-bottom:8px}
dl.info dd{border-bottom:1px solid var(--line);padding-bottom:8px}
.telbox{background:var(--navy-deep);color:#fff;padding:32px;border-radius:6px;box-shadow:6px 6px 0 var(--red)}
.telbox h3,.telbox h2{font-family:"Zen Old Mincho",serif;font-weight:900;font-size:24px;line-height:1.5;margin-bottom:10px}
.telbox .num{display:block;font-family:"Zen Old Mincho",serif;font-weight:900;font-size:clamp(30px,5vw,44px);color:#fff;text-decoration:none;letter-spacing:.04em;margin:12px 0 4px}
.telbox small{color:#c4cbe0;font-size:13px;display:block}
footer{background:var(--navy-deep);color:#aab3cc;font-size:12px;padding:26px 0;text-align:center}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  nav{display:none}
  .hero{padding:44px 0 72px;background:
    linear-gradient(90deg,transparent 0,transparent 23px,rgba(214,48,58,.45) 23px,rgba(214,48,58,.45) 25px,transparent 25px),
    repeating-linear-gradient(180deg,transparent 0,transparent 39px,var(--ruled) 39px,var(--ruled) 40px)}
  .hero-grid{grid-template-columns:1fr;padding-left:40px;padding-right:12px}
  .sheet-wrap{max-width:420px;margin:12px auto 24px 0}
  .phil,.access{grid-template-columns:1fr}
  .band{background-attachment:scroll;min-height:420px}
  .phil .quote{margin-left:10px}
  .fee-list{grid-template-columns:1fr}
  .fact-grid{grid-template-columns:repeat(2,1fr)}
  section{padding:60px 0}
  .notebook{grid-template-columns:1fr}
  .tabs{flex-direction:row;overflow-x:auto;padding:0;gap:6px}
  .tab{border-right:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;transform:none;flex:none;min-width:104px}
  .tab:hover{transform:none}
  .tab[aria-selected="true"]{box-shadow:0 -3px 0 var(--red) inset}
  .page{padding:26px 18px 30px 44px;min-height:0;background-image:linear-gradient(90deg,transparent 0,transparent 27px,rgba(214,48,58,.4) 27px,rgba(214,48,58,.4) 29px,transparent 29px),repeating-linear-gradient(180deg,transparent 0,transparent 33px,#eef2f8 33px,#eef2f8 34px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pen{stroke-dashoffset:0;animation:none!important}
  .fixtext,.stamp{opacity:1;transform:rotate(-12deg);animation:none!important}
  .fixtext{transform:rotate(-6deg)}
  .comment,.panel .penc{clip-path:none;animation:none!important}
  .rv{opacity:1;transform:none;transition:none}
  .panel.flip{animation:none}
}

/* ===== multi-page additions ===== */
.hd .tel-btn .long{display:inline}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;font-size:13px;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:6px 12px;white-space:nowrap}
.mnav summary::-webkit-details-marker{display:none}
.mnav-list{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 28px -12px rgba(31,42,68,.35);padding:8px;min-width:200px;display:flex;flex-direction:column;z-index:60}
.mnav-list a{padding:12px 14px;text-decoration:none;font-weight:500;border-bottom:1px solid var(--line)}
.mnav-list a:last-child{border-bottom:none}
nav a[aria-current="page"]{border-color:var(--red);font-weight:700}

.pagehead{
  padding:48px 0 44px;border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg,transparent 0,transparent 71px,rgba(214,48,58,.45) 71px,rgba(214,48,58,.45) 73px,transparent 73px),
    repeating-linear-gradient(180deg,transparent 0,transparent 39px,var(--ruled) 39px,var(--ruled) 40px);
}
.pagehead .wrap{padding-left:max(20px,88px)}
.crumbs{display:block;font-size:12px;color:var(--ink-soft);letter-spacing:.08em;margin-bottom:14px}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(30px,4.6vw,50px)}
.ph-lead{margin-top:14px;color:var(--ink-soft);max-width:34em}
.ph-lead .hand{color:var(--red)}

.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hub-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);padding:24px 22px 22px;position:relative;
  background-image:repeating-linear-gradient(180deg,transparent 0,transparent 31px,#eef1f6 31px,#eef1f6 32px);transition:transform .2s,box-shadow .2s}
.hub-card:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:6px 6px 0 var(--red-soft)}
.hub-card b{display:inline-block;font-family:"Zen Old Mincho",serif;font-weight:900;font-size:21px;border-bottom:3px solid var(--red);margin-bottom:10px}
.hub-card span{display:block;font-size:14px;color:var(--ink-soft);line-height:1.8}
.hub-card::after{content:"→";position:absolute;right:18px;bottom:14px;color:var(--red);font-weight:700}
.cta-sec{padding-top:0}

.news-list{list-style:none;max-width:760px}
.news-list li{display:flex;gap:16px;align-items:baseline;padding:16px 4px;border-bottom:1px solid var(--line);font-weight:500}
.news-list time{flex:none;font-family:"Klee One",cursive;font-size:14px;color:var(--ink-soft);min-width:9em}
.page-note{padding-top:30px;padding-bottom:30px}

.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-bottom:14px;font-size:13px}
.foot-nav a{color:#d6dcee}
footer .small{font-size:12px;line-height:1.8}

@media (max-width:900px){
  .mnav{display:block}
  .pagehead{padding:34px 0 32px;background:
    linear-gradient(90deg,transparent 0,transparent 23px,rgba(214,48,58,.45) 23px,rgba(214,48,58,.45) 25px,transparent 25px),
    repeating-linear-gradient(180deg,transparent 0,transparent 39px,var(--ruled) 39px,var(--ruled) 40px)}
  .pagehead .wrap{padding-left:40px}
  .hub-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hd{gap:8px}
  .hd .tel-btn .long{display:none}
  .tel-btn{padding:8px 12px;font-size:13px}
  .logo b{font-size:18px}
}

/* ===== round 2: page-turn, newspaper, sakura, tables ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pgOut .32s ease both}
::view-transition-new(root){animation:pgIn .55s cubic-bezier(.3,.7,.3,1) both}
@keyframes pgOut{to{opacity:0;transform:translateX(-22px)}}
@keyframes pgIn{from{opacity:0;transform:translateX(34px)}}

.gloss{font-size:.82em;color:var(--ink-soft)}
.sheet-wrap{cursor:pointer}
.pagehead{position:relative;overflow:hidden}

/* sakura petals (results) */
.petal{position:absolute;top:-24px;left:var(--x);width:var(--s);height:calc(var(--s) * .8);
  background:radial-gradient(circle at 30% 30%,#fff3f5,#f4a9bb);border-radius:75% 0 75% 0;opacity:.8;
  animation:petalFall var(--d) linear infinite;animation-delay:var(--dl);pointer-events:none}
@keyframes petalFall{to{transform:translate(90px,330px) rotate(420deg)}}

/* newspaper (news) */
.paper{background:#fff;border:1px solid var(--line);padding:28px 34px 34px;max-width:900px;margin:0 auto;box-shadow:8px 8px 0 var(--red-soft)}
.paper-head{text-align:center;border-bottom:4px double var(--ink);padding-bottom:14px;margin-bottom:22px}
.paper-head .hand{font-size:13px;color:var(--ink-soft);letter-spacing:.2em}
.paper-title{font-family:"Zen Old Mincho",serif;font-weight:900;font-size:clamp(34px,6vw,60px);letter-spacing:.5em;padding-left:.5em;line-height:1.3}
.paper-date{font-size:13px;color:var(--ink-soft);letter-spacing:.1em}
.paper-cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
.paper-cols section{padding:18px 22px}
.paper-cols section:nth-child(odd){border-right:1px solid var(--line)}
.paper-cols section:nth-child(-n+2){border-bottom:1px solid var(--line)}
.paper-cols h3{font-family:"Zen Old Mincho",serif;font-weight:900;font-size:20px;line-height:1.5;margin-bottom:10px;border-bottom:3px solid var(--red);display:inline-block}
.ghost{font-size:13px;color:var(--ink-soft);background:repeating-linear-gradient(180deg,transparent 0,transparent 20px,#eef1f6 20px,#eef1f6 21px);padding-top:4px;min-height:84px}

/* fee table */
.ftable{width:100%;max-width:860px;border-collapse:collapse;background:#fff;font-size:15px}
.ftable caption{caption-side:bottom;text-align:left;padding-top:10px;font-size:13px;color:var(--ink-soft)}
.ftable th,.ftable td{border:1px solid var(--line);padding:14px 16px;text-align:left}
.ftable thead th{background:var(--navy-deep);color:#fff;font-weight:700}
.ftable tbody th{font-family:"Zen Old Mincho",serif;font-weight:900;white-space:nowrap}
.ftable td.blank{color:var(--ink-soft);background:repeating-linear-gradient(135deg,#faf6ea 0,#faf6ea 10px,#f6f0de 10px,#f6f0de 20px)}
.fee-table-sec{padding-top:20px}

/* results ghost cards */
.vow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vow{position:relative;background:#fff;border:2px dashed #c9bfa4;padding:34px 22px 24px;min-height:190px}
.vow .ribbon{position:absolute;left:-2px;top:-2px;background:var(--red);color:#fff;font-size:11px;padding:3px 10px;letter-spacing:.1em}
.vow-year{font-family:"Klee One",cursive;color:var(--ink-soft);font-size:14px}
.vow h3{font-family:"Zen Old Mincho",serif;font-weight:900;font-size:22px;color:#b9b19a;border-bottom:3px dotted #d8cfb8;display:inline-block;margin:4px 0 10px}
.vow-note{font-size:13px;color:var(--ink-soft)}

/* access strip */
.strip{max-width:var(--maxw);margin:0 auto;padding:44px 20px 0}
.strip figure{position:relative}
.strip img{display:block;width:100%;height:clamp(180px,30vw,320px);object-fit:cover;object-position:50% 62%;border:1px solid var(--line)}
.strip figcaption{position:absolute;right:10px;top:8px;font-size:11px;color:rgba(255,255,255,.85)}

@media (max-width:900px){
  .paper{padding:20px 16px 24px}
  .paper-cols{grid-template-columns:1fr}
  .paper-cols section:nth-child(odd){border-right:none}
  .paper-cols section{border-bottom:1px solid var(--line);padding:16px 6px}
  .vow-grid{grid-template-columns:1fr}
  .ftable{font-size:14px}
  .ftable th,.ftable td{padding:12px 10px}
  .ftable tbody th{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .petal{animation:none;opacity:.5}
}

.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.form-sec{background:#fff;border-top:1px solid var(--line)}
.form-note{max-width:760px;margin-bottom:22px;font-size:14px;color:var(--ink-soft);border-left:4px solid var(--red);padding:6px 0 6px 14px}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;max-width:820px}
.cform label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.cform .full{grid-column:1/-1}
.cform input,.cform select,.cform textarea{font:inherit;font-weight:400;padding:12px 14px;border:1px solid #cfc7b0;border-radius:4px;background:var(--paper);color:var(--ink)}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{outline:3px solid var(--red);outline-offset:1px}
.cform button{cursor:pointer;border:none;font-family:inherit}
.form-result{margin-top:12px;font-size:14px;color:var(--red);font-weight:700}
@media (max-width:900px){.cform{grid-template-columns:1fr}}