/* ============================================================
   Magister Logicae — 古典 × 技術
   ink / ivory / gold ・ 余白と質感で「言語化できない美しさ」
   ============================================================ */
:root{
  --ink:#0B0D11; --ink-2:#12151d; --panel:#141a26;
  --ivory:#ECE4D2; --ivory-2:#c9c2b1; --ivory-dim:#8f897b;
  --gold:#C9A24A; --gold-hi:#E7CC82; --gold-dim:#7d6a38;
  --line:rgba(201,162,74,.20);
  --line-soft:rgba(201,162,74,.12);
  --display:"Cormorant Garamond","Palatino Linotype",Georgia,serif;
  --serif:"EB Garamond","Palatino Linotype",Georgia,serif;
  --measure:40rem;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ivory); font-family:var(--serif);
  font-size:20px; line-height:1.72; letter-spacing:.15px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(130% 100% at 50% -10%, #171c28 0%, var(--ink-2) 34%, var(--ink) 78%);
  background-attachment:fixed;
}
/* paper grain — a whisper of texture */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:rgba(201,162,74,.28); color:var(--ivory)}
a{color:var(--ivory); text-decoration:none; transition:color .3s var(--ease)}
a:hover{color:var(--gold-hi)}
img{max-width:100%}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 1.5rem}
.wide{max-width:64rem}

/* labels & ornaments */
.label{font-family:var(--serif); font-size:.7rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold)}
.rule{height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.ornament{display:flex; align-items:center; gap:1.4rem; justify-content:center;
  color:var(--gold-dim); margin:0 auto}
.ornament::before,.ornament::after{content:""; height:1px; width:min(9rem,22vw);
  background:linear-gradient(90deg,transparent,var(--line))}
.ornament::after{background:linear-gradient(270deg,transparent,var(--line))}
.ornament span{font-family:var(--display); font-size:1.1rem; color:var(--gold); letter-spacing:.2em}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.05rem 1.7rem; max-width:74rem; margin:0 auto;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(11,13,17,.72),rgba(11,13,17,0));
}
header.site .seal{display:flex; align-items:center; gap:.72rem}
header.site .seal img{width:38px; height:38px; border-radius:50%;
  box-shadow:0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.4)}
header.site .seal b{font-family:var(--display); font-weight:600;
  letter-spacing:.18em; font-size:1.02rem; color:var(--ivory)}
nav a{position:relative; margin-left:1.7rem; font-size:.74rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-dim)}
nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-.35em;
  height:1px; background:var(--gold); transition:right .35s var(--ease)}
nav a:hover{color:var(--gold-hi)} nav a:hover::after{right:0}

/* ---------- hero ---------- */
.hero{position:relative; text-align:center; overflow:hidden;
  padding:min(20vh,9rem) 1rem min(12vh,5rem); isolation:isolate}
.hero .halo{position:absolute; z-index:-1; top:46%; left:50%;
  width:min(74vh,720px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:center/contain no-repeat url("assets/rosette.svg");
  opacity:.10; -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);
  mask-image:radial-gradient(closest-side,#000 55%,transparent);
  animation:spin 240s linear infinite}
.hero h1{font-family:var(--display); font-weight:600; color:var(--ivory);
  font-size:clamp(2.6rem,8.5vw,6rem); line-height:1.02; letter-spacing:.16em;
  margin:0; text-shadow:0 1px 30px rgba(0,0,0,.5)}
.hero h1 .amp{color:var(--gold); font-style:italic; font-weight:500;
  padding:0 .12em; opacity:.9}
.hero .motto{font-family:var(--display); font-style:italic; color:var(--gold);
  letter-spacing:.3em; font-size:clamp(1rem,2.6vw,1.35rem); margin:1.1rem 0 0}
.hero .creed{max-width:34rem; margin:1.9rem auto 0; color:var(--ivory-2);
  font-size:1.06rem}
.wavewrap{max-width:56rem; margin:2.6rem auto 0; padding:0 1rem}
.wavewrap svg{width:100%; height:78px; display:block; overflow:visible}
.wave-main{stroke-dasharray:2600; stroke-dashoffset:2600;
  animation:draw 2.6s var(--ease) .3s forwards}
.scrollcue{display:inline-block; margin-top:2.4rem; color:var(--gold-dim);
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; animation:bob 2.6s ease-in-out infinite}

/* ---------- sections ---------- */
main{position:relative; z-index:2}
section{padding:3.6rem 0}
.sec-head{display:flex; align-items:baseline; gap:1.1rem; margin-bottom:2rem}
.sec-head .label:last-child{color:var(--ivory-dim)}
.sec-head h2{margin:0}
.sec-head .rule{flex:1}

/* opera (works) list */
.opera{list-style:none; margin:0; padding:0}
.opera li{border-top:1px solid var(--line-soft)}
.opera li:last-child{border-bottom:1px solid var(--line-soft)}
.opera a{display:grid; grid-template-columns:2.4rem 1fr auto; gap:1.4rem;
  align-items:baseline; padding:1.35rem .4rem; transition:padding .35s var(--ease)}
.opera a:hover{padding-left:1rem; padding-right:0;
  background:linear-gradient(90deg,rgba(201,162,74,.06),transparent 70%)}
.opera .op-no{font-family:var(--display); font-style:italic; color:var(--gold);
  font-size:1.4rem; font-variant-numeric:tabular-nums}
.opera .op-t{font-family:var(--display); font-size:1.5rem; color:var(--ivory);
  letter-spacing:.01em; transition:color .3s var(--ease)}
.opera .op-s{display:block; color:var(--ivory-dim); font-size:.92rem;
  font-style:italic; margin-top:.15rem}
.opera .op-meta{color:var(--ivory-dim); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; white-space:nowrap; align-self:center}
.opera .op-meta::after{content:"  →"; color:var(--gold); opacity:0;
  transition:opacity .3s var(--ease)}
.opera a:hover .op-t{color:var(--gold-hi)}
.opera a:hover .op-meta::after{opacity:1}

/* cogitatio (aphorism) */
.aphorism{max-width:36rem; font-family:var(--display); font-size:1.5rem;
  line-height:1.5; color:var(--ivory)}
.aphorism .by{display:block; margin-top:1.2rem; font-size:.95rem;
  font-style:italic; color:var(--ivory-dim); font-family:var(--serif)}

/* prose (work / about) */
.prose{max-width:38rem; padding-top:1.5rem}
.prose .label{display:block; margin-bottom:.6rem}
.prose h1{font-family:var(--display); font-weight:600; font-size:clamp(2.2rem,6vw,3rem);
  letter-spacing:.03em; line-height:1.08; margin:.1rem 0 .35rem}
.prose .sub{color:var(--gold); font-style:italic; font-family:var(--display);
  font-size:1.3rem; margin:0 0 2.2rem}
.prose p{margin:0 0 1.3rem}
.prose p.lead::first-letter{
  font-family:var(--display); float:left; font-size:3.6rem; line-height:.82;
  padding:.06em .12em 0 0; color:var(--gold)}
.prose audio{width:100%; margin:1.6rem 0; border-radius:6px;
  filter:sepia(.35) saturate(.85) hue-rotate(3deg)}
.backlink{display:inline-block; margin-top:2.8rem; font-size:.74rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-dim)}
.backlink:hover{color:var(--gold-hi)}

/* footer */
footer{border-top:1px solid var(--line-soft); margin-top:3.5rem;
  padding:3rem 1.5rem 3.6rem; text-align:center}
footer .fseal{width:44px; height:44px; border-radius:50%; opacity:.9;
  box-shadow:0 0 0 1px var(--line); margin-bottom:1rem}
footer .cap{font-family:var(--display); letter-spacing:.26em; color:var(--gold);
  font-size:.95rem}
footer .fine{color:var(--ivory-dim); font-size:.76rem; margin-top:.8rem; letter-spacing:.08em}
footer a{color:var(--ivory-2)} footer a:hover{color:var(--gold-hi)}

/* entrance animations */
[data-rise]{opacity:0; transform:translateY(14px);
  animation:rise .9s var(--ease) forwards}
[data-rise="2"]{animation-delay:.12s}[data-rise="3"]{animation-delay:.24s}
[data-rise="4"]{animation-delay:.36s}[data-rise="5"]{animation-delay:.5s}

@keyframes rise{to{opacity:1; transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  [data-rise]{opacity:1; transform:none}
  .wave-main{stroke-dashoffset:0}
}
@media (max-width:600px){
  body{font-size:18px}
  header.site{padding:.9rem 1.1rem}
  header.site .seal b{font-size:.9rem; letter-spacing:.12em}
  nav{display:none}
  .opera a{grid-template-columns:1.8rem 1fr; gap:.9rem}
  .opera .op-meta{grid-column:2; align-self:start; margin-top:.3rem}
}