:root{
    --ink:#2f2b33; --ink-2:#5d565c; --gold:#8a6820; --gold-dot:#9a7524;
    --paper:#faf7f2; --white:#fff; --rule:#e3dcd1; --rule-2:#ddd5c8; --rule-3:#d6cdbe;
    --panel:#efe9de; --sakura:#f4e1e3; --plum:#f0edf0; --alert:#8a5a52; --alert-line:#b8736d;
    --ph-a:#eae6e0; --ph-b:#e5e0d9;
    --gutter:clamp(20px,6.93vw,30px);
    --max:480px;
    --page:min(100vw, 480px);        /* page column, scrollbar included */
    --fs-display:clamp(18px,5.07vw,20.5px);
    --fs-lead:clamp(16px,4.53vw,18.5px);
    --fs-md:clamp(14.5px,4vw,16px);
    --fs-16:clamp(15px,4.27vw,17.5px);   /* 16px @375 — maps, landing list, thanks */
    --fs-12:clamp(11px,3.2vw,13px);      /* 12px @375 — signoff date */
    --fs-head:clamp(14px,3.87vw,15.5px);
    --fs-sm:clamp(13px,3.6vw,14.5px);
    --fs-body:clamp(12.5px,3.47vw,14px);
    --fs-xs:clamp(12px,3.33vw,13.5px);
    --fs-label:clamp(11.5px,3.07vw,12.5px);
    --fs-mini:clamp(11px,2.93vw,12px);
    --fs-micro:clamp(11px,2.93vw,12px);
    --card:min(calc(var(--page) - 72px), 400px);
  }
  /* EB Garamond has a lower x-height than the Noto Serif faces: +8% on the English page */
  html[lang="en"]{
    --fs-display:clamp(19.5px,5.47vw,22px); --fs-lead:clamp(17.5px,4.93vw,20px);
    --fs-md:clamp(15.5px,4.27vw,17.5px); --fs-head:clamp(15px,4.13vw,16.5px);
    --fs-16:clamp(16px,4.61vw,19px); --fs-12:clamp(12px,3.47vw,14px);
    --fs-sm:clamp(14px,3.87vw,15.5px); --fs-body:clamp(13.5px,3.73vw,15px);
    --fs-xs:clamp(13px,3.6vw,14.5px); --fs-label:clamp(12.5px,3.33vw,13.5px);
    --fs-mini:clamp(12px,3.2vw,13px); --fs-micro:clamp(11px,2.93vw,12px);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{color-scheme:light}
  body{margin:0;background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;
    font-family:"Noto Serif JP",serif;font-weight:400;line-break:strict;}
  html[lang="ko"] body{font-family:"Noto Serif KR",serif;word-break:keep-all}
  html[lang="en"] body{font-family:"EB Garamond",serif}
  .en{font-family:"EB Garamond",serif}
  .ja{font-family:"Noto Serif JP",serif}
  .ko{font-family:"Noto Serif KR",serif}
  /* the landing carries all three languages at once, so it never inherits
     the document-level face chosen by html[lang] */
  #landing{font-family:"Noto Serif JP",serif}
  a{color:var(--ink);text-decoration:none}
  a:hover{color:var(--gold)}
  img{display:block;max-width:100%}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  [hidden]{display:none !important}

  /* ---- flowers ----------------------------------------------------------
     A <use> clone takes its paint from the definition it points at, not from
     the <use> element, so each line weight is its own group over the same
     geometry:  #sak / #plm  = 1.1px hairline at any size (small marks)
                #sakb / #plmb = stroke scales with the flower (large blooms) */
  #sak path,#plm path,#sakb path,#plmb path{stroke:var(--ink);stroke-linejoin:round}
  #sak path,#plm path{stroke-width:1.1;vector-effect:non-scaling-stroke}
  #sakb path,#plmb path{stroke-width:1.7}
  #sak path,#sakb path{fill:var(--sakura)}
  #plm path,#plmb path{fill:var(--plum)}
  .dot{fill:var(--gold-dot)}

  .shell{max-width:var(--max);margin-inline:auto;background:var(--white);min-height:100dvh;position:relative;overflow-x:clip}

  /* ---- landing ---- */
  /* gap is the floor, space-between spreads the surplus: the date can never
     touch the language list on a short screen */
  /* gap is the floor, space-between spreads the surplus: the date can never
     touch the language list on a short screen. 4b measured 166px above the
     names and 48px below the list on a 680px frame. */
  #landing{max-width:var(--max);margin-inline:auto;min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between;
    gap:clamp(32px,9vh,96px);padding:clamp(64px,24.4vh,180px) clamp(24px,8vw,34px) clamp(36px,7.06vh,56px);
    background:var(--paper);position:relative;overflow:hidden}
  /* the blooms hang off the name lockup, not off the viewport, so they can
     never drift into the type on a short screen */
  .cover{text-align:center;position:relative}
  .cover .bloom{position:absolute;bottom:100%;margin-bottom:10px;pointer-events:none}
  .cover .bloom.a{left:calc(-1 * clamp(95px,30.93vw,126px));width:clamp(180px,58.67vw,240px)}
  .cover .bloom.b{right:calc(-1 * clamp(80px,25.87vw,106px));width:clamp(148px,48vw,196px);margin-bottom:2px}
  .cover .nm{font-family:"EB Garamond",serif;font-size:clamp(20px,6.13vw,26px);letter-spacing:.14em;line-height:1.4}
  .cover .amp{font-family:"EB Garamond",serif;font-size:clamp(19px,5.87vw,25px);color:var(--gold);margin:14px 0}
  .cover .hr{width:30px;height:1px;background:var(--gold);margin:clamp(28px,9.6vw,42px) auto 0}
  .cover .dt{font-family:"EB Garamond",serif;font-size:clamp(13px,3.87vw,16px);letter-spacing:.42em;color:var(--ink-2);margin-top:clamp(24px,8.53vw,38px)}
  .pick{position:relative;margin-inline:4px}
  .pick a{display:flex;width:100%;min-height:60px;align-items:center;justify-content:space-between;
    border-top:1px solid var(--rule);font-size:clamp(15px,4.27vw,17.5px);text-align:left;color:var(--ink)}
  .pick a:last-child{border-bottom:1px solid var(--rule)}
  .pick .en{letter-spacing:.04em;font-size:clamp(16.5px,4.8vw,19.5px)}
  .pick .arw{font-size:var(--fs-body)}

  /* ---- masthead ---- */
  /* 3つの枠は文字の実幅ではなく、フォントサイズから計算した固定幅にする。
     内容依存にすると、Webフォントが届くまでの代替表示のあいだだけ枠が広がり、
     右寄せのため列全体が 8.7px 横に動いてから戻る。--lang-fs を単一の基準にして
     文字サイズと枠幅の両方を決めているので、片方だけ直して崩れることがない。
     18px は左右の padding、3.2 は代替フォントでも溢れない実測値。 */
  .masthead{--lang-fs:clamp(13.5px,3.73vw,15px);min-height:52px;border-bottom:1px solid #eee8de;display:flex;justify-content:flex-end;
    align-items:center;padding:0 18px 0 20px;position:sticky;top:0;background:var(--white);z-index:5}
  .masthead .lang{display:grid;
    grid-template-columns:repeat(3,calc(18px + var(--lang-fs) * 3.2))}
  .masthead a{min-height:44px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;
    white-space:nowrap;
    font-size:clamp(11.5px,3.33vw,13.5px);color:var(--ink-2)}
  .masthead a[aria-current="true"]{color:var(--ink);border-bottom:1px solid var(--ink)}
  .masthead .en{letter-spacing:.02em;font-size:var(--lang-fs)}

  /* ---- greeting ---- */
  .greeting{padding:clamp(44px,15vw,64px) clamp(18px,5.87vw,26px) clamp(54px,18.7vw,80px);text-align:center}
  .pair{display:flex;justify-content:center;gap:14px}
  .greeting .pair{margin-bottom:clamp(30px,10.7vw,46px)}
  .greeting p{margin:0;font-size:var(--fs-body);font-weight:300;line-height:2.3;text-wrap:pretty}
  html[lang="en"] .greeting p{line-height:1.95}
  html[lang="en"] .greeting p+p{margin-top:1.4em}
  .greeting .hr{width:30px;height:1px;background:var(--gold);margin:clamp(32px,12.27vw,48px) auto 0}
  .who{margin:clamp(28px,10.7vw,40px) 0 0;font-size:var(--fs-display);font-weight:400;letter-spacing:.07em}
  .who .amp{font-family:"EB Garamond",serif;font-size:.9em;vertical-align:.1em;margin:0 .5em}
  .parents{margin-top:20px;font-size:var(--fs-xs);line-height:2.1}

  /* ---- photos ---- */
  .strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-inline:calc((var(--page) - var(--card))/2)}
  .strip::-webkit-scrollbar{display:none}
  .slide{flex:0 0 var(--card);aspect-ratio:303/379;background:var(--ph-a);scroll-snap-align:center;position:relative}
  .slide:nth-child(even){background:var(--ph-b)}
  .slide img{width:100%;height:100%;object-fit:cover}
  .slide .n{position:absolute;left:16px;bottom:14px;font-family:"EB Garamond",serif;
    font-size:var(--fs-micro);letter-spacing:.24em;color:var(--ink)}
  .strip-foot{margin-top:14px;padding:0 calc((var(--page) - var(--card))/2);display:flex;align-items:center;justify-content:space-between}
  .dots{display:flex;gap:6px;align-items:center}
  .dots i{width:7px;height:1px;background:var(--ink);opacity:.22}
  .dots i.on{width:18px;opacity:1}
  .count{font-family:"EB Garamond",serif;font-size:var(--fs-micro);letter-spacing:.24em}

  /* ---- when & where ---- */
  .sec{padding:clamp(54px,20.3vw,86px) var(--gutter) clamp(34px,12.8vw,54px)}
  .head{font-size:var(--fs-head);font-weight:500;letter-spacing:.42em;color:var(--gold);text-align:center}
  .when{text-align:center}
  .when .d1{margin-top:clamp(22px,8vw,34px);font-size:var(--fs-display);letter-spacing:.02em;line-height:1.45}
  .when .d2{margin-top:10px;font-size:var(--fs-lead);font-weight:300;letter-spacing:.02em}
  .when .hr{width:30px;height:1px;background:var(--gold);margin:clamp(22px,8vw,34px) auto}
  .when .v1{font-size:var(--fs-display);line-height:1.55}
  .when .v2,.when .v3{margin-top:10px;font-size:var(--fs-sm);line-height:1.7}
  .when .v3{font-weight:300}
  .maps{margin-top:clamp(22px,8vw,34px);display:grid;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
  .maps a{min-height:52px;display:flex;align-items:center;justify-content:center;
    font-family:"EB Garamond",serif;font-size:var(--fs-16);letter-spacing:.03em}
  html[lang="ko"] .maps a{font-family:"Noto Serif KR",serif;letter-spacing:0}
  .maps a+a{border-left:1px solid var(--rule-2)}

  /* ---- gift (ko) ---- */
  .gift .note{margin-top:12px;font-size:var(--fs-xs);font-weight:300;line-height:1.85;color:var(--ink-2)}
  .acc{margin-top:24px;border-top:1px solid var(--rule)}
  .acc>div{border-bottom:1px solid var(--rule)}
  .acc .row{width:100%;min-height:58px;display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-md)}
  .acc .row .sign{color:var(--gold);font-size:var(--fs-sm)}
  .acc .body{background:var(--paper);padding:18px 16px 20px;display:none}
  .acc .body.open{display:block}
  .acc dl{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:10px;margin:0;font-size:var(--fs-sm)}
  .acc dt{font-size:var(--fs-label);color:var(--ink-2)}
  .acc dd{margin:0}
  .acc .num{font-family:"EB Garamond",serif;letter-spacing:.06em}
  .acc .copy{margin-top:12px;min-height:44px;display:inline-flex;align-items:center;text-align:left;
    font-size:var(--fs-xs);color:var(--gold);border-bottom:1px solid var(--gold)}
  .acc .copy.failed{color:var(--alert);border-bottom-color:var(--alert-line)}

  /* ---- rsvp ---- */
  .rsvp{background:var(--paper);padding:clamp(40px,14.4vw,60px) var(--gutter) clamp(34px,12.3vw,52px)}
  .rsvp .hr{width:30px;height:1px;background:var(--gold);margin:22px auto 0}
  .deadline{margin-top:22px;text-align:center}
  .rsvp>.note span{display:inline-block}
  .rsvp>.note{margin:16px auto 0;max-width:300px;text-align:center;font-size:var(--fs-xs);
    font-weight:300;line-height:1.85;color:var(--ink-2);text-wrap:pretty}
  .deadline b{font-weight:400;font-size:var(--fs-md)}
  .deadline span{font-size:var(--fs-xs);color:var(--ink-2)}
  .block{margin-top:30px;padding-top:22px;border-top:1px solid var(--rule-2)}
  .block>h3{margin:0;font-size:var(--fs-body);font-weight:400;letter-spacing:.28em}
  .fields{margin-top:20px;display:flex;flex-direction:column;gap:20px}
  .field>label,.field>span.lb{display:block;font-size:var(--fs-label);letter-spacing:.08em;color:var(--ink-2);margin-bottom:7px}
  .field input,.field textarea{width:100%;min-height:50px;background:var(--white);border:1px solid var(--rule-2);
    border-radius:0;padding:0 12px;font-size:16px;color:var(--ink);-webkit-appearance:none;
    font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif CJK JP",
      "Noto Serif CJK KR",AppleMyungjo,"Yu Mincho",YuMincho,"Times New Roman",serif}
  .field input::placeholder,.field textarea::placeholder{font-family:inherit}
  /* 英語ページはラテン文字しか入らず、サブセットで賄えるので本文と同じ書体にする */
  html[lang="en"] .field input,html[lang="en"] .field textarea{font-family:inherit}
  /* inline 要素のままだと、箱の位置が中身のベースラインに左右される。
     空のときと文字が入ったときで基準が変わる端末があり、入力した瞬間に
     箱がわずかに動く。ブロックにすると中身の影響を受けなくなる。
     textarea の下にあった 5px の隙間は inline 配置の副産物だが、
     見た目を変えないよう #f-message の padding として置き直してある。 */
  .field input,.field textarea{display:block}
  .field textarea{min-height:96px;padding:14px 12px;line-height:1.7;resize:vertical}
  .field input:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:-2px}
  .opts{display:grid;gap:9px;margin-top:1px}
  .opts.two{grid-template-columns:1fr 1fr}
  .opts.three{grid-template-columns:repeat(3,1fr)}
  .opts label{min-height:50px;display:flex;align-items:center;justify-content:center;text-align:center;
    padding:0 6px;background:var(--white);border:1px solid var(--rule-2);color:var(--ink-2);font-size:var(--fs-sm)}
  .opts.three label{min-height:46px;padding:0 2px;font-size:var(--fs-xs);line-height:1.35}
  .opts input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;
    padding:0;border:0;margin:0;pointer-events:none}
  .opts input:checked+label{background:var(--gold);border-color:var(--gold);color:var(--paper)}
  .opts input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}
  .err{margin-top:10px;font-size:var(--fs-xs);font-weight:300;line-height:1.8;color:var(--alert)}
  .field.bad input{border-color:var(--alert-line)}
  .opts.bad label{border-color:var(--alert-line)}
  .guests{margin:30px calc(var(--gutter) * -1) 0;padding:26px var(--gutter) 28px;background:var(--panel);
    border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
  .guests>h3{margin:0;font-size:var(--fs-body);font-weight:400;letter-spacing:.28em}
  /* 注意書きは「1要素＝1行」。各行は欄の幅いっぱいのブロックにする。
     以前は2行ぶんを1つの inline-block に入れて <br> で分けていた。その箱は1行目の
     文字幅ちょうどになり、箱の中の余裕がゼロになる。Chromium では収まるが、
     iPhone の Safari では1行目が途中で折り返した。行をブロックにしておけば、
     1行目が使える幅は欄の幅そのものになる。
     日本語の2行は切れ目が決まっているので、行の整え直し（text-wrap:pretty）は
     かけない。幅が足りないときも語の途中では折り返さず、i18n.js に置いた <wbr> の
     位置（語句の切れ目）でだけ折り返す。 */
  .guests .note>span{display:block}
  html[lang="ja"] .guests .note>span{word-break:keep-all;text-wrap:wrap}
  .guests .note{margin-top:10px;font-size:var(--fs-xs);font-weight:300;line-height:1.85;color:var(--ink-2);text-wrap:pretty}
  .guest{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule-3)}
  .guest .hd{display:flex;justify-content:space-between;align-items:center}
  .guest .hd span{font-size:var(--fs-label);letter-spacing:.24em;color:#6f5219}
  .guest .hd button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:flex-end;
    font-size:var(--fs-xs);color:var(--ink-2)}
  .addrow{margin-top:22px;min-height:54px;width:100%;border-top:1px solid var(--rule-3);border-bottom:1px solid var(--rule-3);
    display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-head)}
  .addrow .plus{color:#6f5219;font-size:var(--fs-md)}
  html[lang="en"] .addrow .plus{font-family:"Noto Serif JP",serif}
  .remain{margin-top:9px;font-size:var(--fs-mini);color:var(--ink-2)}
  .send{margin-top:26px;width:100%;min-height:56px;background:var(--gold);color:var(--paper);
    display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);letter-spacing:.2em;text-indent:.2em}
  .send.is-busy{background:var(--white);border:1px solid #b8a476;color:#6f5219;pointer-events:none}
  .sendnote{margin-top:12px;text-align:center;font-size:var(--fs-xs);font-weight:300;
    line-height:1.85;color:var(--ink-2)}
  .formerr{margin-top:18px;text-align:center;text-wrap:balance;font-size:var(--fs-xs);font-weight:300;line-height:1.9;color:var(--alert)}
  .formerr span{display:inline-block}
  .done{padding:clamp(28px,10vw,44px) 0 clamp(24px,8vw,40px);text-align:center}
  .done .pair{margin-bottom:26px}
  .done h3{margin:0;font-size:var(--fs-16);font-weight:400}
  .done p>span{display:block;text-wrap:pretty}
  .done p>span>span{display:inline-block}
  .done p>span+span{margin-top:12px}
  .done p{margin:26px auto 0;max-width:292px;font-size:var(--fs-xs);font-weight:300;line-height:1.85;color:var(--ink-2)}
  .signoff{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:18px}
  .done+.signoff{margin-top:clamp(28px,9vw,36px)}
  .signoff .dt{font-family:"EB Garamond",serif;font-size:var(--fs-12);letter-spacing:.42em;color:var(--ink-2)}

  /* ---- transition ---- */
  #veil{position:fixed;inset:0;background:var(--paper);display:grid;place-items:center;opacity:0;pointer-events:none;z-index:50}
  /* ページ分割にともない、元の veil/bloom（900ms）を前半と後半に分けた。
     430:470 の比率はそのままに、全体を 1.4 倍に伸ばしている。
     切れ目の 0.602s 時点で花は scale 6.478 / opacity 0.267、幕は不透明。 */
  #veil.go{animation:veil-in 0.602s ease forwards}
  #veil.go .pair{animation:bloom-in 0.602s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes veil-in{0%{opacity:0}46%{opacity:1}100%{opacity:1}}
  @keyframes bloom-in{0%{transform:scale(.45);opacity:0}69.8%{opacity:1}100%{transform:scale(6.478);opacity:.267}}
  html.arrive #veil{animation:veil-out 0.658s ease forwards}
  html.arrive #veil .pair{animation:bloom-out 0.658s linear forwards}
  @keyframes veil-out{0%{opacity:1}46.4%{opacity:1}100%{opacity:0}}
  @keyframes bloom-out{0%{transform:scale(6.478);opacity:.267}100%{transform:scale(7);opacity:0}}
  @media (prefers-reduced-motion:reduce){
    /* 動きを抑える設定の人には、幕の明滅だけを短く見せる。
       ここは意図的に伸ばしていない（速さではなく動きの量を減らすのが目的のため）。 */
    #veil.go{animation:veil-in .22s linear forwards}
    #veil.go .pair{animation:none;opacity:1}
    html.arrive #veil{animation:veil-out .23s linear forwards}
    html.arrive #veil .pair{animation:none;opacity:1}
    @keyframes veil-in{0%{opacity:0}45%{opacity:1}100%{opacity:1}}
    @keyframes veil-out{0%{opacity:1}45.2%{opacity:1}100%{opacity:0}}
    .strip{scroll-behavior:auto}
  }