/* madoromi works — 春の昼下がりの窓 / 夕暮れの窓 */
/* Noto Sans JP の @font-face は assets/fonts.css（scripts/fetch-fonts.mjs が生成）にある */

:root{
  --sky-top:#BFE2F0; --sky-bot:#E7F4F9;
  --cloud:#FFFFFF; --cloud-a:.92;
  --ink:#42525E; --ink-soft:#75868F; --ink-faint:#9DAAB2;
  --brand:#A8D5E8; --brand-deep:#6FA8C6; --sun:#E0BE93;
  --glass:rgba(255,255,255,.46); --glass-2:rgba(255,255,255,.30);
  --glass-edge:rgba(255,255,255,.85); --glass-line:rgba(255,255,255,.55);
  --glass-shadow:rgba(70,110,135,.16);
  --plate:#FFFFFF; --grain:.055;

  --r:26px;   /* 全ボックス共通の角丸 */
  --ri:14px;  /* 入れ子の内側（同心円を保つ差分） */
  --pad:clamp(20px,3.4vw,34px);
  --maxw:1120px;

  --ja:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --en:"Avenir Next","Century Gothic","Futura","Trebuchet MS",var(--ja);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sky-top:#1B2A38; --sky-bot:#2E3F4C;
    --cloud:#8FA6B5; --cloud-a:.30;
    --ink:#DFE9EE; --ink-soft:#A7B8C2; --ink-faint:#7C8D97;
    --brand:#7FB4CE; --brand-deep:#A9D5E8; --sun:#C79E6E;
    --glass:rgba(139,166,184,.15); --glass-2:rgba(139,166,184,.09);
    --glass-edge:rgba(200,224,236,.30); --glass-line:rgba(200,224,236,.18);
    --glass-shadow:rgba(0,0,0,.34);
    --plate:#EDF3F6; --grain:.085;
  }
}
:root[data-theme="dark"]{
  --sky-top:#1B2A38; --sky-bot:#2E3F4C;
  --cloud:#8FA6B5; --cloud-a:.30;
  --ink:#DFE9EE; --ink-soft:#A7B8C2; --ink-faint:#7C8D97;
  --brand:#7FB4CE; --brand-deep:#A9D5E8; --sun:#C79E6E;
  --glass:rgba(139,166,184,.15); --glass-2:rgba(139,166,184,.09);
  --glass-edge:rgba(200,224,236,.30); --glass-line:rgba(200,224,236,.18);
  --glass-shadow:rgba(0,0,0,.34);
  --plate:#EDF3F6; --grain:.085;
}

*{box-sizing:border-box}
body{
  margin:0;font-family:var(--ja);font-weight:400;color:var(--ink);
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 62%,var(--sky-bot) 100%);
  background-attachment:fixed;
  line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.glass{
  position:relative;background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--glass-line);border-radius:var(--r);
  box-shadow:0 1px 0 var(--glass-edge) inset,0 18px 46px -18px var(--glass-shadow);
  overflow:hidden;
}
.glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glass>*{position:relative;z-index:1}

.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,28px)}

header.bar{
  position:sticky;top:14px;z-index:30;margin:14px auto 0;max-width:var(--maxw);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;
}
.mark{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.mark .win{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(180deg,#B4DCEC,#9CCFE4);position:relative;overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.7)
}
.mark .win i{position:absolute;background:#fff;border-radius:999px;display:block}
.mark .win i:nth-child(1){width:22px;height:11px;left:-3px;top:11px}
.mark .win i:nth-child(2){width:15px;height:8px;right:-2px;bottom:4px}
.mark b{font:500 15px/1.25 var(--en);letter-spacing:.1em;color:var(--ink);white-space:nowrap}
.mark b span{display:block;font-size:9.5px;letter-spacing:.24em;color:var(--ink-faint);font-weight:500}

nav{display:flex;gap:6px;align-items:center}
nav a,.tbtn{
  font:500 11.5px/1 var(--en);letter-spacing:.18em;color:var(--ink-soft);text-decoration:none;
  padding:9px 13px;border-radius:999px;border:1px solid transparent;background:none;cursor:pointer;transition:.22s;
}
nav a:hover,.tbtn:hover{color:var(--ink);background:var(--glass-2);border-color:var(--glass-line)}
:focus-visible{outline:2px solid var(--brand-deep);outline-offset:3px}
@media(max-width:640px){nav a.hide-sm{display:none}}

.hero{padding:clamp(64px,13vh,132px) 0 clamp(40px,7vh,72px)}
.hero-in{padding:var(--pad);display:grid;gap:26px}
.eyebrow{font:500 10.5px/1 var(--en);letter-spacing:.36em;color:var(--ink-faint);text-transform:uppercase}
h1{margin:0;font-weight:200;font-size:clamp(28px,5.6vw,54px);line-height:1.48;letter-spacing:.055em;text-wrap:balance}
h1 em{font-style:normal;color:var(--brand-deep);font-weight:400}
.lede{margin:0;max-width:44ch;color:var(--ink-soft);font-weight:300;font-size:clamp(14px,1.6vw,15.5px);line-height:2.25;letter-spacing:.07em}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chip{font:400 11.5px/1 var(--ja);letter-spacing:.12em;color:var(--ink-soft);padding:9px 15px;border-radius:999px;background:var(--glass-2);border:1px solid var(--glass-line)}

.sec{padding:clamp(34px,6vh,58px) 0}
.sec-head{display:flex;align-items:baseline;gap:16px;margin:0 4px 20px}
.sec-head h2{margin:0;font:500 12px/1 var(--en);letter-spacing:.32em;color:var(--ink);text-transform:uppercase}
.sec-head span{font-size:11px;font-weight:300;color:var(--ink-faint);letter-spacing:.14em}
.sec-head:after{content:"";flex:1;height:1px;background:var(--glass-line)}

/* WORKS */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:clamp(14px,2vw,22px)}
.card{display:block;text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.card .frame{padding:10px}
.plate{position:relative;aspect-ratio:1/1;border-radius:var(--ri);background:var(--plate);overflow:hidden;display:grid;place-items:center;box-shadow:0 1px 2px rgba(60,100,125,.10)}
.plate img{width:100%;height:100%;object-fit:contain}
.ph{text-align:center;padding:18px}
.ph b{display:block;font:300 12.5px/1.75 var(--ja);color:#5E7280;letter-spacing:.08em}
.ph i{display:block;font:500 9px/1 var(--en);letter-spacing:.22em;margin-top:10px;color:#B4C4CC;font-style:normal}
.cap{padding:12px 14px 15px;display:grid;gap:7px}
.cap h3{margin:0;font-weight:400;font-size:13.5px;line-height:1.7;letter-spacing:.055em}
.cap p{margin:0;font-size:10.5px;font-weight:300;color:var(--ink-faint);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.tags.vars{margin:18px 0 0}
.tag{font:400 10px/1 var(--ja);letter-spacing:.08em;padding:5px 9px;border-radius:999px;background:var(--glass-2);border:1px solid var(--glass-line);color:var(--ink-soft)}
.tag.k{color:var(--brand-deep);border-color:color-mix(in srgb,var(--brand-deep) 34%,transparent)}
.card:hover{transform:translateY(-4px)}
.card:hover .plate{box-shadow:0 8px 22px -8px rgba(60,100,125,.34)}

/* 透かし（CSS層は補助。実体はビルド時に焼き込み済み） */
.shield{position:absolute;inset:0;pointer-events:none;z-index:2}
.shield::after{content:"";position:absolute;inset:-40%;background:repeating-linear-gradient(-30deg,transparent 0 78px,rgba(90,125,145,.04) 78px 79px)}
.wm{position:absolute;inset:0;display:grid;place-items:center;font:500 9.5px/1 var(--en);letter-spacing:.3em;color:rgba(90,125,145,.16);transform:rotate(-30deg) scale(1.4)}
.noselect{-webkit-user-select:none;user-select:none}
.noselect img{-webkit-user-drag:none;pointer-events:none}

/* 詳細 */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(30,52,66,.30);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);padding:clamp(10px,3vh,40px) clamp(10px,3vw,28px);overflow:auto}
.sheet-bg[hidden]{display:none}
.sheet{max-width:980px;margin:0 auto;padding:var(--pad)}
.detail-page{padding-top:clamp(40px,9vh,90px)}
.sheet-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:6px}
.sheet h3{margin:0 0 7px;font-weight:300;font-size:clamp(18px,2.7vw,25px);line-height:1.6;letter-spacing:.05em}
.sheet .sub{margin:0;font-size:10.5px;font-weight:300;color:var(--ink-faint);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.x{flex:none;width:38px;height:38px;border-radius:999px;cursor:pointer;border:1px solid var(--glass-line);background:var(--glass-2);color:var(--ink-soft);font-size:17px;line-height:1;display:grid;place-items:center;transition:.2s;text-decoration:none}
.x:hover{color:var(--ink);background:var(--glass)}
.prose{max-width:60ch;font-size:13.5px;font-weight:300;line-height:2.2;color:var(--ink-soft);margin:16px 0 0;letter-spacing:.05em}
.prose strong{color:var(--ink);font-weight:500}
.lbl{font:500 9.5px/1 var(--en);letter-spacing:.28em;color:var(--ink-faint);text-transform:uppercase;margin:28px 0 12px;display:block}

.hero-img{position:relative;width:100%;border-radius:var(--ri);background:var(--plate);overflow:hidden;display:grid;place-items:center;aspect-ratio:3/2;box-shadow:0 1px 3px rgba(60,100,125,.12)}
.hero-img img{width:100%;height:100%;object-fit:contain}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;grid-auto-rows:6px}
@media(max-width:720px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.gal{grid-template-columns:1fr}}
.tile{position:relative;overflow:hidden;border-radius:var(--ri);background:var(--plate);display:grid;place-items:center;box-shadow:0 1px 2px rgba(60,100,125,.10)}
.tile img{width:100%;height:100%;object-fit:contain}
.tile.w{grid-column:span 2}
@media(max-width:420px){.tile.w{grid-column:span 1}}

/* ABOUT / CONTACT */
.two{display:grid;gap:clamp(14px,2vw,20px);grid-template-columns:1fr}
@media(min-width:820px){.two{grid-template-columns:1.35fr .95fr}}
.pane{padding:var(--pad)}
.pane h3{margin:0 0 14px;font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--ink)}
.quote{margin:0;font-weight:200;font-size:clamp(15px,2.2vw,20px);line-height:2.1;letter-spacing:.06em;color:var(--ink);text-wrap:balance}
.quote small{display:block;margin-top:18px;font:500 10px/1 var(--en);letter-spacing:.28em;color:var(--ink-faint)}
.field{display:grid;gap:7px;margin-bottom:13px}
.field label{font:500 10px/1 var(--en);letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase}
.field input,.field select,.field textarea{font:300 13px/1.7 var(--ja);color:var(--ink);letter-spacing:.05em;background:var(--glass-2);border:1px solid var(--glass-line);border-radius:var(--ri);padding:11px 14px;width:100%}
.field textarea{resize:vertical;min-height:88px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.send{margin-top:6px;width:100%;padding:13px;border-radius:var(--ri);cursor:pointer;font:500 11.5px/1 var(--en);letter-spacing:.22em;color:var(--ink);background:var(--glass);border:1px solid var(--glass-edge);transition:.22s}
.send:hover:not(:disabled){background:var(--glass-edge);color:#33454F}
.send:disabled{opacity:.55;cursor:default}
.note{margin:12px 0 0;font-size:10.5px;font-weight:300;line-height:1.95;color:var(--ink-faint);letter-spacing:.06em}

footer{padding:44px 0 56px;text-align:center}
footer p{margin:0;font:500 9.5px/2 var(--en);letter-spacing:.26em;color:var(--ink-faint)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}