:root{
      --ink:#1c1f26; --muted:#3a4152; --line:rgba(20,30,60,.12);
      --paper:#ffffff; --accent:#d2a74f; --accent-weak:#e6d4a3;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:var(--ink);
      background:var(--paper);
      font-family:"Noto Sans JP","Inter",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      letter-spacing:.02em; line-height:1.85;
    }
    .wrap{max-width:960px;margin-inline:auto;padding:clamp(20px,4vw,40px)}

    header.hero{
      min-height:72vh;
      display:grid; place-items:center; text-align:center;
      position:relative; overflow:hidden;
      border-bottom:1px solid var(--line);
      background-color:#0d141b;
      background-image:url('/assets/teaser.jpeg');
      background-size:cover;
      background-position:center 50%; 
      background-repeat:no-repeat;
      color:#eef2f5;
    }
    header.hero::before{
      content:"";
      position:absolute; inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45));
      pointer-events:none;
    }
    .hero .inner{position:relative; z-index:1}
    h1{
      font-size:clamp(28px,6vw,46px); line-height:1.25; margin:0 0 12px;
      font-family: Impact, "Arial Black", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
      letter-spacing:.02em; color:#f7f8fa;
      text-shadow:0 2px 10px rgba(0,0,0,.25);
    }
    .subtitle{color:#dfe5ee; margin:0 auto 16px; max-width:28em; text-shadow:0 2px 8px rgba(0,0,0,.25)}

    .social{margin-top:10px}
    .social a{
      display:inline-block; padding:8px 12px;
      border:1px solid rgba(255,255,255,.22); border-radius:999px;
      text-decoration:none; background:rgba(0,0,0,.5); color:#fff;
      backdrop-filter:saturate(120%) blur(2px);
    }

    section{padding:56px 0; border-bottom:1px solid var(--line)}
    h2{font-size:clamp(20px,3.6vw,28px); margin:0 0 10px}
    .lead{color:var(--muted); margin:0 0 18px}
    .panel{
      border:1px solid var(--line);
      background:#fff;
      padding:20px; box-shadow:0 10px 30px rgba(20,30,60,.06);
    }
    .blockquote{border-left:3px solid var(--accent); background:rgba(210,167,79,.06); padding:14px 16px; margin:14px 0}
    code.seira{
      display:block; white-space:pre-line; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
      background:#fff; border:1px dashed var(--line); border-radius:10px; padding:12px; line-height:1.6;
    }
    footer{padding:48px 0 70px; text-align:center; color:var(--muted)}
    small.note{display:block; margin-top:10px; opacity:.9}
    @media (max-width:560px){
      header.hero{min-height:64vh; background-position:center 60%}
      .panel{padding:16px} section{padding:40px 0}
    }