/*
Theme Name: Aurelius
Theme URI: https://example.com/aurelius
Author: Custom
Description: Champagne-modern editorial theme for stock/FX/NISA blogs. Light cream + ink + champagne-gold. Cormorant Garamond + Schibsted Grotesk + Noto Sans JP.
Version: 1.0.0
License: GPL v2 or later
Text Domain: aurelius
*/

/* ============================================================
   Aurelius — full theme stylesheet
   Mirror of styles/aurelius.css from the design canvas, but
   wrapped at :root so the WP front-end picks it up directly.
   Class structure aligns with the PHP templates (no .au wrapper
   needed inside templates).
   ============================================================ */

:root {
  --au-bg: #f6f1e7;
  --au-paper: #faf6ec;
  --au-cream: #efe7d4;
  --au-ink: #1a1410;
  --au-ink-2: #3b322a;
  --au-mute: #8a7e6c;
  --au-line: #d8cdb4;
  --au-line-soft: #e7dec8;
  --au-gold: #a07d3a;
  --au-gold-2: #c8a35a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: "Schibsted Grotesk", "Noto Sans JP", system-ui, sans-serif;
  background: var(--au-bg); color: var(--au-ink);
  font-feature-settings: "ss01","tnum","case";
  letter-spacing: -0.005em; line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }

.display { font-family: "Cormorant Garamond","Noto Serif JP",serif; font-weight: 400; letter-spacing: -0.025em; line-height: 0.92; }
.eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--au-gold); }
.num { font-family: "Cormorant Garamond",serif; font-weight: 400; letter-spacing: -0.02em; }
.jp { font-family: "Noto Sans JP",sans-serif; letter-spacing: 0.04em; }

/* Header / Nav */
.site-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 28px 64px; position: sticky; top: 0;
  background: rgba(246,241,231,0.85); backdrop-filter: blur(12px);
  z-index: 5; border-bottom: 1px solid var(--au-line-soft);
}
.site-header .links { display: flex; gap: 36px; font-size: 13px; letter-spacing: 0.04em; list-style: none; padding: 0; margin: 0; }
.site-header .links a { padding: 6px 0; position: relative; transition: color .25s; }
.site-header .links a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--au-gold); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.site-header .links a:hover::after { transform: scaleX(1); }
.site-header .brand { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.site-header .brand .word { font-family: "Cormorant Garamond",serif; font-size: 26px; letter-spacing: 0.16em; font-weight: 500; }
.site-header .brand .sub { font-size: 9px; letter-spacing: 0.4em; color: var(--au-gold); text-transform: uppercase; }
.site-header .right { display: flex; justify-content: flex-end; gap: 16px; align-items: center; }
.site-header .cta { border: 1px solid var(--au-ink); padding: 10px 22px; font-size: 12px; background: transparent; color: var(--au-ink); letter-spacing: 0.14em; text-transform: uppercase; transition: background .3s, color .3s; }
.site-header .cta:hover { background: var(--au-ink); color: var(--au-paper); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--au-ink); color: var(--au-paper); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--au-ink); position: relative; overflow: hidden; transition: color .35s; }
.btn::before { content:""; position:absolute; inset:0; background: var(--au-gold); transform: translateY(101%); transition: transform .4s cubic-bezier(.7,0,.3,1); }
.btn:hover::before { transform: translateY(0); }
.btn span { position: relative; z-index: 1; }
.btn.ghost { background: transparent; color: var(--au-ink); }
.btn.ghost:hover { color: var(--au-paper); }

/* Hero (front page) */
.hero { position: relative; padding: 120px 64px 96px; overflow: hidden; }
.hero::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 80% 20%, rgba(200,163,90,.18), transparent 50%), radial-gradient(ellipse at 10% 90%, rgba(200,163,90,.10), transparent 60%); pointer-events: none; }
.hero .inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(48px, 9vw, 168px);  /* 元 72px → 48px に下げる */
  margin: 0 0 32px;
  max-width: 14ch;
  word-break: keep-all;       /* 単語の途中で折らない */
  overflow-wrap: break-word;
  line-break: strict;
}
.hero h1 em { font-style: italic; color: var(--au-gold); }
.hero .lede { max-width: 56ch; font-size: 18px; line-height: 1.7; color: var(--au-ink-2); margin: 32px 0 56px; }
.hero .actions { display: flex; gap: 14px; align-items: center; }

/* Section frame */
.section { padding: 128px 64px; position: relative; }
.section .inner { max-width: 1320px; margin: 0 auto; }
.section .lead { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: end; margin-bottom: 80px; }
.section .lead h2 { font-family: "Cormorant Garamond","Noto Serif JP",serif; font-size: clamp(56px,6.5vw,104px); margin: 16px 0 0; max-width: 14ch; font-weight: 400; letter-spacing: -0.025em; line-height: 0.92; }
.section .lead p { font-size: 17px; line-height: 1.7; color: var(--au-ink-2); max-width: 52ch; }
.section.alt { background: var(--au-paper); }
.section.dark { background: var(--au-ink); color: var(--au-paper); }
.section.dark .lead p { color: rgba(246,241,231,.7); }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--au-line-soft); border-top: 1px solid var(--au-gold); border-bottom: 1px solid var(--au-gold); }
.pillar { background: var(--au-bg); padding: 56px 40px 48px; transition: background .35s; }
.pillar:hover { background: var(--au-paper); }
.pillar .roman { font-family: "Cormorant Garamond",serif; font-size: 64px; color: var(--au-gold); font-style: italic; margin-bottom: 56px; }
.pillar h3 { font-family: "Cormorant Garamond",serif; font-size: 36px; font-weight: 400; margin: 0 0 16px; letter-spacing: -0.015em; line-height: 1.1; }
.pillar p { color: var(--au-ink-2); font-size: 14px; line-height: 1.7; margin: 0 0 32px; }
.pillar .more { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--au-gold); display: inline-flex; align-items: center; gap: 8px; }

/* Figures */
.figures { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(200,163,90,.4); margin-top: 48px; }
.figures .fig { padding: 40px 0; border-right: 1px solid rgba(200,163,90,.2); }
.figures .fig:last-child { border-right: 0; }
.figures .fig .v { font-family: "Cormorant Garamond",serif; font-size: 88px; font-weight: 400; letter-spacing: -0.04em; line-height: 0.95; }
.figures .fig .v sup { font-size: 28px; vertical-align: super; color: var(--au-gold); }
.figures .fig .k { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--au-mute); margin-top: 12px; }
.section.dark .figures .fig .k { color: rgba(246,241,231,.5); }
.section.dark .figures .fig { border-color: rgba(200,163,90,.25); }

/* Editorial preview */
.editorial { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; }
.editorial .feature .cover { aspect-ratio: 5/4; background: repeating-linear-gradient(135deg, rgba(160,125,58,.18) 0 1px, transparent 1px 10px), var(--au-cream); display: grid; place-items: center; font-size: 11px; color: var(--au-mute); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 28px; overflow: hidden; }
.editorial .feature .cover img { width: 100%; height: 100%; object-fit: cover; }
.editorial .feature .cat { color: var(--au-gold); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; }
.editorial .feature h3 { font-family: "Cormorant Garamond",serif; font-size: 48px; font-weight: 400; line-height: 1.05; margin: 0 0 18px; letter-spacing: -0.015em; }
.editorial .feature h3 a { color: inherit; }
.editorial .feature p { font-size: 15px; color: var(--au-ink-2); max-width: 50ch; }
.editorial .ent { display: grid; grid-template-columns: 80px 1fr 32px; gap: 24px; padding: 28px 0; border-top: 1px solid var(--au-line-soft); align-items: center; transition: padding-left .3s; }
.editorial .ent:first-child { border-top: 0; padding-top: 0; }
.editorial .ent:last-child { border-bottom: 1px solid var(--au-line-soft); padding-bottom: 28px; }
.editorial .ent:hover { padding-left: 12px; }
.editorial .ent .d { font-size: 11px; letter-spacing: 0.1em; color: var(--au-mute); }
.editorial .ent h4 { font-family: "Cormorant Garamond",serif; font-size: 22px; font-weight: 400; margin: 0; line-height: 1.25; }
.editorial .ent .arr { color: var(--au-gold); font-size: 14px; }

/* Archive */
.archive-hero { padding: 96px 64px 56px; background: var(--au-paper); border-bottom: 1px solid var(--au-line-soft); }
.archive-hero .inner { max-width: 1320px; margin: 0 auto; }
.archive-hero h1 { font-family: "Cormorant Garamond","Noto Serif JP",serif; font-size: clamp(72px,9vw,144px); margin: 24px 0 0; font-weight: 400; letter-spacing: -0.025em; line-height: 0.95; }
.archive-hero h1 em { color: var(--au-gold); font-style: italic; }
.archive-hero .filters { margin-top: 56px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--au-line-soft); padding-top: 32px; }
.au-chip { border: 1px solid transparent; padding: 9px 18px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; background: transparent; color: var(--au-mute); transition: color .25s, border-color .25s; }
.au-chip:hover { color: var(--au-ink); }
.au-chip.active { color: var(--au-ink); border-color: var(--au-gold); }

.archive-grid { padding: 80px 64px; }
.archive-grid .inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }
.archive-grid .row { display: grid; grid-template-columns: 60px 1fr 140px 200px 40px; gap: 40px; align-items: center; padding: 36px 0; border-top: 1px solid var(--au-line-soft); transition: padding-left .3s; }
.archive-grid .row:hover { padding-left: 16px; }
.archive-grid .row:last-child { border-bottom: 1px solid var(--au-line-soft); }
.archive-grid .row .no { font-family: "Cormorant Garamond",serif; font-size: 32px; color: var(--au-gold); font-style: italic; }
.archive-grid .row .ttl { font-family: "Cormorant Garamond","Noto Serif JP",serif; font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -0.012em; margin: 0; }
.archive-grid .row .ttl a { color: inherit; }
.archive-grid .row .meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--au-mute); }
.archive-grid .row .cat { color: var(--au-gold); }
.archive-grid .row .arr { color: var(--au-gold); font-size: 16px; justify-self: end; }

/* Sidebar */
.au-sidebar { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 48px; }
.au-widget { border-left: 1px solid var(--au-gold); padding-left: 24px; }
.au-widget .eyebrow { display: block; margin-bottom: 16px; }
.au-widget ol, .au-widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.au-widget ol li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline; counter-increment: au-osusume; }
.au-widget ol li::before { content: counter(au-osusume) "."; font-family: "Cormorant Garamond",serif; font-size: 18px; font-style: italic; color: var(--au-gold); }
.au-widget ol { counter-reset: au-osusume; }
.au-widget ol li a, .au-widget ul li a { font-family: "Noto Sans JP",sans-serif; font-size: 13px; line-height: 1.5; color: var(--au-ink); }
.au-widget ol li a:hover, .au-widget ul li a:hover { color: var(--au-gold); }
.au-search { display: flex; gap: 0; border: 1px solid var(--au-line); }
.au-search input { flex: 1; padding: 10px 14px; border: none; background: transparent; font-size: 13px; font-family: inherit; }
.au-search button { background: var(--au-ink); color: var(--au-paper); border: none; padding: 0 16px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

/* Single article */
.single-article { padding: 64px 64px 0; }
.single-article .inner { max-width: 1320px; margin: 0 auto; }
.single-article .crumbs { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--au-mute); margin-bottom: 48px; }
.single-article .crumbs span { color: var(--au-gold); }
.single-article .head { display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: end; margin-bottom: 80px; border-bottom: 1px solid var(--au-line-soft); padding-bottom: 56px; }
.single-article .cat-line { color: var(--au-gold); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 28px; }
.single-article h1 { font-family: "Cormorant Garamond","Noto Serif JP",serif; font-size: clamp(48px,6vw,88px); margin: 0; font-weight: 400; letter-spacing: -0.022em; line-height: 1.04; }
.single-article h1 em { color: var(--au-gold); font-style: italic; }
.author-card { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--au-gold); padding: 4px 0 4px 20px; }
.author-card .nm { font-family: "Cormorant Garamond","Noto Serif JP",serif; font-size: 22px; }
.author-card .role { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--au-mute); }
.author-card .stamp { font-size: 11px; letter-spacing: 0.12em; color: var(--au-mute); margin-top: 4px; }
.single-article .lede { font-family: "Cormorant Garamond","Noto Serif JP",serif; font-size: 28px; line-height: 1.45; color: var(--au-ink-2); max-width: 28ch; margin: 0 0 64px; font-style: italic; }
.single-article .cover { aspect-ratio: 16/8; background: repeating-linear-gradient(135deg, rgba(160,125,58,.18) 0 1px, transparent 1px 10px), var(--au-cream); display: grid; place-items: center; font-size: 11px; color: var(--au-mute); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 80px; overflow: hidden; }
.single-article .cover img { width: 100%; height: 100%; object-fit: cover; }
.single-article .body { display: grid; grid-template-columns: 1fr 280px; gap: 80px; padding-bottom: 96px; }

/* Prose — preserves Classic Editor markup nicely */
.prose { font-size: 17px; line-height: 1.85; color: var(--au-ink); max-width: 64ch; font-family: "Noto Sans JP",sans-serif; }
.prose > p:first-of-type::first-letter { font-family: "Cormorant Garamond",serif; font-style: italic; font-size: 96px; float: left; line-height: 0.86; color: var(--au-gold); margin: 6px 14px -6px 0; }
.prose h2 { font-family: "Cormorant Garamond","Noto Serif JP",serif; font-size: 36px; margin: 64px 0 20px; font-weight: 400; letter-spacing: -0.015em; border-left: 3px solid var(--au-gold); padding-left: 20px; }
.prose h3 { font-size: 24px; margin: 40px 0 14px; font-weight: 500; }
.prose p { margin: 0 0 22px; }
.prose blockquote { font-family: "Cormorant Garamond",serif; font-style: italic; font-size: 28px; line-height: 1.4; color: var(--au-ink); margin: 48px 0; padding: 0 0 0 32px; border-left: 2px solid var(--au-gold); max-width: 28ch; }
.prose img { margin: 32px 0; }
.prose ul, .prose ol { padding-left: 1.5em; margin: 0 0 22px; }
.prose ul li, .prose ol li { margin-bottom: 8px; }
.prose a { color: var(--au-gold); border-bottom: 1px solid currentColor; }

/* Footer */
.site-footer { background: var(--au-ink); color: rgba(246,241,231,.7); padding: 96px 64px 32px; position: relative; overflow: hidden; }
.site-footer::before { content:""; position:absolute; top:-200px; right:-200px; width:500px; height:500px; background: radial-gradient(circle, rgba(200,163,90,.18), transparent 60%); pointer-events: none; }
.site-footer .inner { max-width: 1320px; margin: 0 auto; position: relative; }
.site-footer .word { font-family: "Cormorant Garamond",serif; font-size: 144px; letter-spacing: -0.02em; color: var(--au-paper); line-height: 1; margin-bottom: 56px; }
.site-footer .word em { color: var(--au-gold-2); font-style: italic; }
.site-footer .grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; border-top: 1px solid rgba(200,163,90,.3); padding-top: 56px; }
.site-footer h4 { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--au-gold-2); margin: 0 0 22px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.site-footer ul a:hover { color: var(--au-gold-2); }
.site-footer .legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(200,163,90,.2); display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.14em; color: rgba(246,241,231,.4); text-transform: uppercase; }

/* Responsive */
@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; padding: 20px 24px; }
  .site-header .links, .site-header .right .lang { display: none; }
  .hero { padding: 80px 24px 64px; }
  .section { padding: 80px 24px; }
  .section .lead, .editorial { grid-template-columns: 1fr; gap: 32px; }
  .pillars { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2,1fr); }
  .archive-grid .inner { grid-template-columns: 1fr; }
  .archive-grid .row { grid-template-columns: 40px 1fr 20px; gap: 16px; padding: 24px 0; }
  .archive-grid .row .meta { display: none; }
  .single-article { padding: 32px 24px 0; }
  .single-article .head, .single-article .body { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { padding: 64px 24px 24px; }
  .site-footer .word { font-size: 64px; }
  .site-footer .grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .hero h1 { font-size: clamp(40px, 11vw, 72px); }
  .hero h1 .pc-br { display: none; }  /* スマホでは改行を消して自然に流す */
}