/* Kohana. design prototype (2026-10-31, not published) - story parts shared by S1 and S2.
   幸せの手紙 (letters) / 未来につながる物語 (episodes) / 案内人 (counselor label) / 招待 (closing LINE invitation).
   Uses the site's own tokens (base.css) and section classes; existing sections are not restyled here.
   Placeholders: any element with [data-placeholder] shows a small "仮" mark; removing the attribute removes the mark. */

/* placeholders: clearly temporary, but laid out at the size real text will take */
[data-placeholder]{color:rgba(92,74,64,.78)}
[data-placeholder]::before{content:"仮";display:inline-block;margin-right:.6em;padding:0 .5em;border-radius:4px;
 font:500 11px/1.7 var(--sans);letter-spacing:.08em;color:#6b4f2a;background:rgba(176,138,62,.16);vertical-align:.12em}
.ph-note{max-width:36em;margin:calc(var(--ma-3)*-1) auto var(--ma-5);text-align:center;font-size:13px;line-height:1.8;color:var(--cocoa);
 padding:10px 16px;border:1px dashed rgba(176,138,62,.5);border-radius:12px;background:rgba(255,253,248,.6)}

/* 幸せの手紙: letters on soft paper with a small mizuhiki seal */
.story-letters{background:linear-gradient(180deg,var(--washi),#f8efe6)}
.letters{list-style:none;padding:0;display:grid;gap:var(--ma-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.letter .paper{position:relative;height:100%;padding:44px 26px 26px;background:
  repeating-linear-gradient(180deg,rgba(176,138,62,0) 0 33px,rgba(176,138,62,.13) 33px 34px) 0 76px/100% calc(100% - 110px) no-repeat,
  linear-gradient(180deg,#fffdf8,#fdf8f0);
 border:1px solid rgba(176,138,62,.32);border-radius:6px;box-shadow:0 10px 26px rgba(92,74,64,.08),0 1px 0 rgba(255,255,255,.9) inset}
.letter .paper::before{content:"";position:absolute;left:50%;top:-18px;width:44px;height:36px;margin-left:-22px;
 background:url(../img/miz.webp) center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(92,74,64,.18))}
.letter .no{font:400 12px/1 var(--serif);letter-spacing:.3em;color:var(--gold-ink);text-align:center}
.letter .body{margin-top:22px;min-height:7.6em;font:400 15px/2.2 var(--serif);letter-spacing:.05em;color:var(--cocoa-ink)}
.letter .from{margin-top:18px;text-align:right;font-size:13px;letter-spacing:.06em;color:var(--cocoa)}

/* 未来につながる物語: a short story told in four small steps */
.story-episodes{background:var(--shiro)}
.episodes{display:grid;gap:var(--ma-5)}
.episode{display:grid;gap:0;background:#fffdf8;border:1px solid rgba(176,138,62,.3);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.ep-photo{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;width:100%;object-fit:cover;padding:16px;text-align:center;
 font-size:13px;line-height:1.7;background:linear-gradient(160deg,var(--sakura),var(--washi) 70%);border-bottom:1px dashed rgba(176,138,62,.45)}
.ep-b{padding:26px 22px 28px}
.episode .no{font:400 12px/1 var(--serif);letter-spacing:.3em;color:var(--gold-ink)}
.episode h3{margin-top:12px;font:400 1.1rem/1.7 var(--serif);letter-spacing:.06em}
.ep-steps{list-style:none;padding:0;margin-top:18px;display:grid;gap:14px;position:relative}
.ep-steps li{position:relative;padding-left:22px}
.ep-steps li::before{content:"";position:absolute;left:3px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--gold-line);opacity:.75}
.ep-steps li:not(:last-child)::after{content:"";position:absolute;left:6px;top:calc(.55em + 10px);bottom:-14px;width:1px;background:rgba(176,138,62,.35)}
.ep-steps .k{font:500 12px/1.6 var(--serif);letter-spacing:.2em;color:var(--gold-ink)}
.ep-steps p{margin-top:2px;font-size:14px;line-height:1.9;color:var(--cocoa-ink)}
.episode .from{margin-top:18px;text-align:right;font-size:13px;color:var(--cocoa)}
@media(min-width:48em){.episodes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64em){.ep-b{padding:30px 32px 34px}}

/* 案内人: a quiet label over the counselor heading; the counselor's own text is unchanged */
.guide-tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;font:400 13px/1.6 var(--serif);letter-spacing:.24em;color:var(--cocoa)}
.guide-tag::before{content:"";width:28px;height:1px;background:var(--gold-line)}

/* 招待: the closing consultation becomes an invitation card; text, link and button are the published ones */
.talk.invite{position:relative;max-width:680px;margin-inline:auto;padding:clamp(40px,7vw,64px) clamp(20px,5vw,56px);
 background:linear-gradient(180deg,#fffdf8,#fdf7ef);border:1px solid rgba(176,138,62,.5);border-radius:6px;
 box-shadow:0 0 0 7px #fffdf8,0 0 0 8px rgba(176,138,62,.28),0 22px 44px rgba(92,74,64,.12)}
.talk.invite::before{content:"";display:block;width:58px;aspect-ratio:325/266;margin:0 auto 18px;background:url(../img/miz.webp) center/contain no-repeat}
.inv-to{font:400 13px/1.6 var(--serif);letter-spacing:.3em;color:var(--gold-ink);margin-bottom:6px}
/* phones: narrow inner padding, so the published LINE button keeps its one-line width */
@media(max-width:37.49em){.talk.invite{margin-inline:2px;padding-inline:10px}}
@media(forced-colors:active){[data-placeholder]::before{border:1px solid CanvasText}.talk.invite{border:1px solid CanvasText}}