/* Theme refresh (home page): keeps the KeroChan yellow and green, warmer paper, rounder headings,
   clearer buttons and softer cards. Loaded after every other stylesheet. */
:root{
 --ink:#1d3a2b;--muted:#566a5d;--paper:#fffbf0;--surface:#ffffff;
 --yellow:#ffe14a;--yellow-soft:#fff5c4;--green:#1d7446;--green-deep:#155a36;
 --pale:#edf5e6;--leaf:#9fd46a;--pink:#f490ad;--pink-soft:#fde4ec;--line:#e6e9dc;
 --rounded:"M PLUS Rounded 1c","Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
 --body:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
 --shadow:0 8px 24px rgba(29,58,43,.07);--radius:24px
}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:500;letter-spacing:.01em}
h1,h2,h3,.welcome-card h3,.board h3,.together h3{font-family:var(--rounded);letter-spacing:.01em}
h2{font-weight:800}
.demo{background:var(--green);color:#fff;font-weight:700}
.demo span{color:#fff}

/* Header + tabs */
body>header{background:var(--paper)}
@media(min-width:761px){body>header{border-bottom:1px solid var(--line)}}
.site-tabs a{font-family:var(--rounded);font-weight:800}
.site-tabs a[aria-current=page]{background:var(--yellow);box-shadow:inset 0 -3px 0 rgba(29,58,43,.12)}
@media(max-width:760px){
 body>header nav.site-tabs{background:rgba(255,251,240,.96);border-top:1px solid var(--line)}
 .site-tabs a[aria-current=page]{background:var(--yellow-soft);box-shadow:none}
 .site-tabs a[aria-current=page] svg{color:var(--green)}
}

/* Eyebrow labels become small rounded tags */
.eyebrow:not(.intro .eyebrow){display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;padding:4px 12px;border-radius:99px;background:var(--pale);color:var(--green);font:800 13px/1.5 var(--rounded);letter-spacing:.06em}
.intro .eyebrow{font-family:var(--rounded);font-weight:800;color:var(--green)}
.status-dot{background:var(--pink)!important;box-shadow:0 0 0 4px var(--pink-soft)!important}

/* Hero */
.intro h1{font:800 clamp(34px,5vw,56px)/1.4 var(--rounded);letter-spacing:-.01em}
.intro h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 92%,transparent 92%)}
.portrait-wrap{background:var(--yellow);box-shadow:var(--shadow)}
.handwritten{font-family:var(--rounded)}

/* Buttons */
.button.dark{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-deep);font-family:var(--rounded);font-weight:800}
.button.dark:hover{background:#1a6a40;transform:translateY(1px);box-shadow:0 3px 0 var(--green-deep)}
.button.dark:active{transform:translateY(4px);box-shadow:0 0 0 var(--green-deep)}
.button.outline{border:2px solid var(--green);background:var(--surface);font-family:var(--rounded);font-weight:800;box-shadow:0 3px 0 #cfe3c5}
.more-button{border:2px solid #cfe0c4;background:var(--surface);color:var(--green);font-family:var(--rounded);font-weight:800}
.more-button:hover{background:var(--pale);border-color:var(--green)}
a.reply-box-link{background:var(--green);color:#fff;border:0;box-shadow:0 4px 0 var(--green-deep);font-family:var(--rounded);font-weight:800}
#fan-art>.art-post>summary{box-shadow:0 4px 0 var(--green-deep);font-family:var(--rounded);font-weight:800}

/* Cards */
.welcome-card,.board,.inbox-gateway,.art-card,.video-card,.profile-card,.contact-work,.postal,.private-reply-intro,.reply-receipt{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.welcome-card:hover{border-color:var(--green);background:var(--surface);transform:translateY(-2px)}
.welcome-icon,.inbox-gateway-icon{background:var(--yellow)!important;color:var(--ink)!important}
.welcome-arrow{color:var(--green)}
.together{background:var(--yellow-soft);border-radius:var(--radius)}
.letter-wall .note{border-radius:20px;box-shadow:var(--shadow)}
.letter-wall .note:not(.blue){background:var(--yellow-soft)}
.letter-wall .note.blue{background:var(--pale)}
.letter-reply{border-left-color:var(--pink)!important}
.art-social{background:var(--pink-soft);border-radius:18px}
.art-social strong{color:#b8446a}

/* Forms */
#letter-form input:not([type=checkbox]):not([type=radio]),#letter-form textarea,#art-form input:not([type=checkbox]):not([type=radio]):not([type=file]),#art-form textarea{border:2px solid #d5dfcf;border-radius:14px;background:var(--surface)}
#letter-form input:focus,#letter-form textarea:focus,#art-form input:focus,#art-form textarea:focus{border-color:var(--green);outline:3px solid #cfe8bb;outline-offset:0}
.letter-visibility label{border-width:2px;border-color:#d5dfcf}

/* Sections */
section{border-bottom-color:var(--line)}
.site-footer{border-top:1px solid var(--line)}
.site-footer p{font-family:var(--rounded);font-weight:800}

/* Stronger identity: each tab opens with a soft title band, forms sit on white cards, faint polka dots. */
body{background-color:var(--paper);background-image:radial-gradient(rgba(159,212,106,.16) 1.6px,transparent 1.7px);background-size:26px 26px}
.has-tabs main>[data-panel].panel-first:not(.hero)>.section-top{position:relative;overflow:hidden;margin:0 0 26px;padding:26px 28px;border-radius:28px;background:var(--yellow-soft);border:1px solid #f3e39a}
.has-tabs main>[data-panel].panel-first:not(.hero)>.section-top::after{content:"";position:absolute;right:-34px;bottom:-46px;width:104px;height:104px;border-radius:50%;background:var(--yellow);opacity:.55}
.has-tabs main>[data-panel].panel-first:not(.hero)>.section-top>*{position:relative;z-index:1}
.has-tabs main>[data-panel].panel-first:not(.hero)>.section-top .eyebrow{background:#fff}
.has-tabs main>[data-panel].panel-first:not(.hero)>.section-top h2{font-size:clamp(26px,3.4vw,36px);line-height:1.45}
#letter-form{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.letter-wall{padding-top:8px}
main>section{border-bottom:0}
main>section+section:not(.panel-first){border-top:1px dashed #dfe4d4}
@media(max-width:760px){
 .has-tabs main>[data-panel].panel-first:not(.hero)>.section-top{padding:20px 20px 22px;border-radius:24px;margin-bottom:20px}
 #letter-form{padding:18px 16px}
}

/* Fixes from the review: keep the pink dot with the first word when the line wraps (e.g. English). */
.intro .eyebrow{display:block;text-wrap:balance}
.intro .eyebrow .status-dot{display:inline-block;vertical-align:middle;margin:0 8px 3px 0}
@media(max-width:760px){.intro .eyebrow{text-align:center}}