:root{
    --paper:#f0ebe0;
    --paper-deep:#e8e1d3;
    --ink:#1a1c22;
    --ink-soft:#4a4c52;
    --ink-faint:#7a7c82;
    --rule:rgba(26,28,34,.18);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.8;
    overflow-x:hidden;
  }
  .mincho{font-family:"Hiragino Mincho ProN","Yu Mincho",serif}
  .wrap{max-width:880px;margin:0 auto;padding:0 28px}

  /* 滲み（署名要素）：各セクションに静かに置く */
  .bleed{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;pointer-events:none;z-index:0}

  /* 既定は可視。JS有効時のみ初期非表示にして、出現アニメを付ける */
  @media (prefers-reduced-motion: no-preference){
    .js .reveal{opacity:0;transform:translateY(16px);transition:opacity 1.1s ease,transform 1.1s ease}
    .js .reveal.in{opacity:1;transform:none}
  }

  /* ===== hero ===== */
  header{position:relative;min-height:88svh;display:flex;align-items:center;overflow:hidden}
  .b1{width:440px;height:440px;background:radial-gradient(circle,#9fb4ad,transparent 68%);top:-60px;left:18%}
  .b2{width:340px;height:340px;background:radial-gradient(circle,#b8a9c4,transparent 68%);top:120px;left:40%}
  .b3{width:300px;height:300px;background:radial-gradient(circle,#c98f86,transparent 68%);top:240px;left:24%;opacity:.4}
  header .wrap{position:relative;z-index:1;transform:translateY(6px)}
  .brand{font-size:14px;letter-spacing:.42em;color:var(--ink-soft);margin-bottom:30px}
  h1.title{font-size:clamp(27px,7vw,58px);font-weight:400;letter-spacing:.06em;line-height:1.5}
  .hero-rule{width:88px;height:1.4px;background:transparent;margin:30px 0 26px}
  .tagline{font-size:clamp(15px,2.2vw,18px);color:var(--ink-soft);letter-spacing:.08em}

  /* ===== section common ===== */
  section{position:relative;padding:96px 0;overflow:hidden}
  .eyebrow{font-size:12px;letter-spacing:.34em;color:var(--ink-faint);margin-bottom:22px}
  .lead{font-size:clamp(16px,2.4vw,19px);line-height:2.1;letter-spacing:.04em;max-width:30em}
  .lead.mincho{font-size:clamp(17px,2.6vw,21px)}
  #about .lead{max-width:none}

  /* ===== works ===== */
  .works{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
  .work{
    display:flex;gap:24px;align-items:baseline;
    padding:30px 4px;border-bottom:1px solid var(--rule);
    text-decoration:none;color:inherit;position:relative;
    transition:padding-left .4s ease;
  }
  .work:hover{padding-left:14px}
  .work .wname{font-size:clamp(20px,3vw,26px);letter-spacing:.04em;flex:0 0 auto;min-width:200px}
  .work .wdesc{font-size:14px;color:var(--ink-soft);line-height:1.7}
  .work .wstate{font-size:11.5px;letter-spacing:.2em;color:var(--ink-faint);margin-left:6px;white-space:nowrap}
  @media(max-width:620px){
    .work{flex-direction:column;gap:8px}
    .work .wname{min-width:0}
  }

  /* ===== contact ===== */
  .contact{background:var(--paper-deep)}
  .b4{width:360px;height:360px;background:radial-gradient(circle,#9fb4ad,transparent 70%);bottom:-80px;right:10%;opacity:.4}
  form{max-width:520px;margin-top:34px;position:relative;z-index:1}
  .field{margin-bottom:22px}
  label{display:block;font-size:12.5px;letter-spacing:.16em;color:var(--ink-soft);margin-bottom:9px}
  input,textarea{
    width:100%;background:transparent;border:none;border-bottom:1px solid var(--rule);
    padding:9px 2px;font-size:16px;color:var(--ink);font-family:inherit;
    transition:border-color .3s ease;
  }
  input:focus,textarea:focus{outline:none;border-bottom-color:var(--ink)}
  textarea{resize:vertical;min-height:96px}
  .send{
    margin-top:10px;background:none;border:1px solid var(--ink);color:var(--ink);
    font-family:inherit;font-size:14px;letter-spacing:.14em;
    padding:13px 36px;border-radius:2px;cursor:pointer;
    transition:background .3s ease,color .3s ease;
  }
  .send:hover{background:var(--ink);color:var(--paper)}
  .send:disabled{opacity:.5;cursor:default}
  .formnote{font-size:11.5px;color:var(--ink-faint);margin-top:18px;line-height:1.7}
  .formstatus{font-size:13px;margin-top:16px;min-height:1.4em}
  .formstatus.ok{color:#3f6b4f}
  .formstatus.error{color:#a9483a}
  /* ハニーポット: 人間には見えないが、botのスクリプトには見える位置に置く */
  .hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none}

  footer{padding:40px 0 56px;text-align:center}
  footer .f{font-size:12px;letter-spacing:.3em;color:var(--ink-faint)}