/* ======================================================================
   YUKI NO KUNI — COMPONENT LIBRARY
   8 reusable components from the design system spec.
   Depends on tokens.css.
====================================================================== */

/* ============ cmp.brand ============ */
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-mark{
  width:42px;height:42px;flex-shrink:0;
  position:relative;display:flex;align-items:center;justify-content:center;
  border:1.2px solid var(--ink);border-radius:50%;
  background:
    radial-gradient(circle at 28% 28%, var(--paper-0), transparent 65%),
    var(--paper);
}
.brand-mark::before{
  content:"";position:absolute;inset:6px;
  border:1.2px solid var(--vermillion);border-radius:50%;
}
.brand-mark::after{
  content:"雪";position:relative;z-index:2;
  font-family:var(--jp);font-weight:400;color:var(--ink);font-size:16px;
}
.brand-text{display:flex;flex-direction:column;gap:1px;line-height:1}
.brand-name{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:-0.02em;color:var(--ink)}
.brand-name em{font-style:italic;font-weight:400}
.brand-tag{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
/* inverse on dark */
.brand.inverse .brand-name{color:var(--paper)}
.brand.inverse .brand-tag{color:rgba(252,249,239,0.5)}
.brand.inverse .brand-mark{border-color:var(--paper);background:radial-gradient(circle at 28% 28%,rgba(244,239,225,0.1),transparent 65%),var(--ink)}
.brand.inverse .brand-mark::before{border-color:var(--vermillion-soft)}
.brand.inverse .brand-mark::after{color:var(--paper)}
/* compact (nav, mobile) */
.brand.compact .brand-mark{width:36px;height:36px}
.brand.compact .brand-mark::after{font-size:14px}
.brand.compact .brand-name{font-size:24px}
@media(max-width:780px){.brand .brand-tag{display:none}}

/* ============ cmp.btn-prime ============ */
.btn-prime{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--paper-0);
  padding:17px 28px;font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  transition:all 350ms var(--ease);position:relative;overflow:hidden;
  text-decoration:none;border:none;cursor:pointer;
}
.btn-prime::before{
  content:"";position:absolute;inset:0;background:var(--pine);
  transform:translateX(-101%);transition:transform 400ms var(--ease);
}
.btn-prime > *{position:relative;z-index:2}
.btn-prime span{display:flex;align-items:center;gap:12px}
.btn-prime:hover::before{transform:translateX(0)}
.btn-prime:hover{transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(31,58,46,0.6)}
.btn-prime:focus-visible{outline:2px solid var(--vermillion);outline-offset:3px}
.btn-prime:active{transform:translateY(0) scale(0.98)}
.btn-prime svg{width:14px;height:14px}
/* on dark grounds — invert */
.btn-prime.on-dark{background:var(--paper);color:var(--ink)}
.btn-prime.on-dark::before{background:var(--vermillion)}
.btn-prime.on-dark:hover{color:var(--paper)}

/* ============ cmp.btn-ghost ============ */
.btn-ghost{
  font-family:var(--serif);font-size:17px;font-style:italic;font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;
  transition:color 250ms,border-color 250ms;display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;background:none;cursor:pointer;
}
.btn-ghost:hover{color:var(--vermillion);border-color:var(--vermillion)}
.btn-ghost.on-dark{color:var(--paper);border-color:var(--paper)}
.btn-ghost.on-dark:hover{color:var(--vermillion-soft);border-color:var(--vermillion-soft)}

/* ============ cmp.entry (listing card) ============ */
.entry{display:flex;flex-direction:column;gap:20px;cursor:pointer;position:relative;text-decoration:none;color:inherit}
.entry-img{
  position:relative;aspect-ratio:5/6;overflow:hidden;background:var(--paper-2);
}
.entry-img img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(0.6) contrast(1.06);
  transition:transform 1.4s var(--ease-out),filter 0.8s;
}
.entry-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(19,18,14,0.35) 100%);
  pointer-events:none;
}
.entry:hover .entry-img img{transform:scale(1.06);filter:saturate(0.78) contrast(1.08)}
.entry-tag{
  position:absolute;top:18px;left:18px;
  background:var(--paper-0);color:var(--ink);
  padding:6px 12px;font-family:var(--sans);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;z-index:2;
}
.entry-plate{
  position:absolute;top:18px;right:18px;z-index:2;
  font-family:var(--serif);font-size:13px;font-style:italic;
  color:var(--paper-0);letter-spacing:.04em;
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}
.entry-overlay{
  position:absolute;bottom:18px;left:18px;right:18px;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;
  color:var(--paper-0);font-family:var(--serif);font-style:italic;font-size:11px;
  opacity:0;transform:translateY(8px);transition:all 350ms var(--ease);
}
.entry:hover .entry-overlay{opacity:1;transform:translateY(0)}
.entry-locale{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--ink-3);letter-spacing:.02em;display:block}
.entry-locale b{color:var(--ink-2);font-weight:500;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-right:8px;border-right:1px solid var(--rule);padding-right:8px}
.entry-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.entry-h{font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.18;letter-spacing:-0.005em;color:var(--ink);max-width:380px;transition:color 250ms}
.entry-h em{font-style:italic;font-weight:400;color:var(--ink-2)}
.entry:hover .entry-h{color:var(--vermillion)}
.entry-price{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--ink);letter-spacing:-0.015em;line-height:1;white-space:nowrap}
.entry-price small{font-size:10px;color:var(--ink-3);font-family:var(--sans);letter-spacing:.18em;font-weight:600;text-transform:uppercase;display:block;margin-top:4px}
.entry-note{font-family:var(--serif);font-size:14.5px;line-height:1.55;color:var(--ink-2);font-weight:300;font-style:italic}
.entry-foot{
  display:flex;gap:18px;font-family:var(--sans);font-size:11px;
  letter-spacing:.06em;color:var(--ink-3);font-weight:500;
  padding-top:16px;border-top:1px solid var(--rule-2);
}
.entry-foot b{color:var(--ink);font-weight:600}
.entry-foot .sep{color:var(--ink-4)}

/* ============ cmp.region (region card) ============ */
.region-card{
  padding:48px 36px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:22px;
  text-decoration:none;color:inherit;
  transition:background 400ms var(--ease);
}
.region-card:hover{background:var(--paper-1)}
.region-card-kanji{
  position:absolute;top:-40px;right:-30px;
  font-family:var(--jp);font-size:280px;line-height:0.82;
  color:var(--ink);opacity:0.04;font-weight:300;
  pointer-events:none;transition:opacity 500ms var(--ease),color 500ms;
}
.region-card:hover .region-card-kanji{opacity:0.1;color:var(--vermillion)}
.region-card-num{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--ink-3);letter-spacing:.02em;position:relative;z-index:2}
.region-card-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;position:relative;z-index:2}
.region-card-name{font-family:var(--serif);font-size:44px;font-weight:400;letter-spacing:-0.025em;line-height:1;color:var(--ink)}
.region-card-jp{font-family:var(--jp);font-size:18px;color:var(--ink-3);font-weight:300}
.region-card-deck{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink-2);font-weight:300;font-style:italic;max-width:440px;position:relative;z-index:2}
.region-card-stats{display:flex;gap:28px;padding-top:18px;border-top:1px solid var(--rule);position:relative;z-index:2}
.region-card-stat-v{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;line-height:1}
.region-card-stat-l{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:5px}
.region-card-link{font-family:var(--serif);font-size:14.5px;font-style:italic;color:var(--vermillion);display:inline-flex;align-items:center;gap:8px;margin-top:auto;position:relative;z-index:2;transition:gap 300ms var(--ease)}
.region-card-link::after{content:"→";font-style:normal;transition:transform 300ms var(--ease)}
.region-card:hover .region-card-link{gap:14px}
.region-card:hover .region-card-link::after{transform:translateX(4px)}

/* ============ cmp.j-item (article tile / journal) ============ */
.j-item{
  padding:40px 40px 40px 0;
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:96px 1fr;gap:28px;
  cursor:pointer;position:relative;text-decoration:none;color:inherit;
  transition:background 350ms var(--ease);
}
.j-item:hover .j-h{color:var(--vermillion)}
.j-item:hover .j-num{color:var(--vermillion);transform:translateX(6px)}
.j-num{
  font-family:var(--serif);font-size:42px;font-style:italic;font-weight:400;
  color:var(--ink-4);line-height:1;letter-spacing:-0.02em;
  transition:all 400ms var(--ease);
}
.j-body{display:flex;flex-direction:column;gap:12px}
.j-cat{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--vermillion);font-weight:600}
.j-h{font-family:var(--serif);font-size:26px;font-weight:500;line-height:1.2;letter-spacing:-0.005em;color:var(--ink);transition:color 300ms var(--ease)}
.j-h em{font-style:italic;font-weight:400;color:var(--ink-2)}
.j-deck{font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--ink-2);font-weight:300;font-style:italic}
.j-meta{display:flex;gap:14px;font-family:var(--sans);font-size:11px;color:var(--ink-3);font-weight:500;margin-top:8px;letter-spacing:.04em}
.j-meta b{color:var(--ink-2);font-weight:500}
.j-meta .sep{color:var(--ink-4)}

/* ============ cmp.tier (pricing tier) ============ */
.tier{
  padding:56px 40px 44px;
  border-right:1px solid rgba(244,239,225,0.18);
  position:relative;
  transition:background 400ms var(--ease);
}
.tier:last-child{border-right:none}
.tier:hover{background:rgba(244,239,225,0.03)}
@media(max-width:980px){
  .tier{border-right:none;border-bottom:1px solid rgba(244,239,225,0.18)}
  .tier:last-child{border-bottom:none}
}
.tier.featured{background:rgba(244,239,225,0.04)}
.tier.featured::before{
  content:"Most chosen";position:absolute;top:-1px;left:50%;
  transform:translate(-50%,-50%);
  background:var(--vermillion);color:var(--paper-0);
  padding:6px 16px;font-family:var(--sans);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;
}
.tier-num{font-family:var(--serif);font-size:18px;font-style:italic;color:rgba(244,239,225,0.5);letter-spacing:.04em;margin-bottom:18px}
.tier-name{font-family:var(--serif);font-size:40px;font-weight:400;letter-spacing:-0.022em;margin-bottom:12px;line-height:1;color:var(--paper)}
.tier-price{font-family:var(--serif);font-size:54px;font-weight:300;color:var(--paper);letter-spacing:-0.025em;line-height:1;margin-bottom:8px}
.tier-price .currency{font-size:26px;color:rgba(244,239,225,0.6);vertical-align:top;margin-right:2px}
.tier-price .per{font-family:var(--serif);font-size:16px;font-style:italic;color:rgba(244,239,225,0.55);font-weight:300;letter-spacing:0;margin-left:8px}
.tier-desc{font-family:var(--serif);font-size:16px;font-style:italic;line-height:1.55;color:rgba(244,239,225,0.72);font-weight:300;margin-top:14px;margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid rgba(244,239,225,0.15)}
.tier-feat{list-style:none;margin-bottom:40px}
.tier-feat li{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:rgba(244,239,225,0.8);padding:10px 0 10px 24px;position:relative}
.tier-feat li::before{content:"";position:absolute;left:0;top:20px;width:14px;height:1px;background:rgba(244,239,225,0.45)}
.tier-feat li.highlight::before{background:var(--vermillion-soft)}
.tier-feat li.highlight{color:var(--paper)}
.tier-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:17px;font-style:italic;color:var(--paper);border-bottom:1px solid var(--paper);padding-bottom:3px;transition:all 250ms var(--ease)}
.tier.featured .tier-btn{color:#d4c89a;border-color:#d4c89a}
.tier-btn:hover{color:var(--vermillion-soft);border-color:var(--vermillion-soft)}

/* ============ cmp.newsletter ============ */
.newsletter-form{display:flex;border:1px solid rgba(244,239,225,0.25);transition:border-color 250ms;background:transparent}
.newsletter-form:focus-within{border-color:var(--paper)}
.newsletter-form input{flex:1;background:transparent;border:none;padding:14px 16px;color:var(--paper);font:inherit;font-size:14px}
.newsletter-form input::placeholder{color:rgba(244,239,225,0.42);font-style:italic;font-family:var(--serif)}
.newsletter-form input:focus{outline:none}
.newsletter-form button{background:var(--paper);color:var(--ink);padding:0 24px;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;transition:all 300ms var(--ease);border:none;cursor:pointer}
.newsletter-form button:hover{background:var(--vermillion);color:var(--paper)}
.newsletter-label{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,239,225,0.55);font-weight:600;margin-bottom:14px;display:block}

/* ============ section heads (shared editorial) ============ */
.sec-head{display:grid;grid-template-columns:240px 1fr 200px;gap:48px;margin-bottom:64px;align-items:end}
@media(max-width:980px){.sec-head{grid-template-columns:1fr;gap:16px}}
.sec-num{font-family:var(--serif);font-size:14px;font-style:italic;color:var(--ink-3);letter-spacing:.02em}
.sec-num .roman{font-family:var(--serif);font-size:72px;font-style:italic;font-weight:300;line-height:0.85;color:var(--ink);display:block;margin-bottom:12px;letter-spacing:-0.02em}
.section-dark .sec-num{color:rgba(244,239,225,0.65)}
.section-dark .sec-num .roman{color:var(--paper)}
.sec-title{font-family:var(--serif);font-size:var(--t-display-l);line-height:1.02;font-weight:400;letter-spacing:-0.022em}
.sec-title em{font-style:italic;font-weight:300;color:var(--ink-2)}
.sec-title .accent{color:var(--vermillion);font-style:italic;font-weight:400}
.section-dark .sec-title{color:var(--paper)}
.section-dark .sec-title em{color:rgba(244,239,225,0.7)}
.section-dark .sec-title .accent{color:var(--vermillion-soft)}
.sec-aside{font-family:var(--serif);font-size:14px;font-style:italic;color:var(--ink-3);text-align:right;line-height:1.45}
.section-dark .sec-aside{color:rgba(244,239,225,0.55)}

/* ============ utility: dark section bg ============ */
.section-dark{background:var(--ink);color:var(--paper-0)}
.section-dark p{color:rgba(244,239,225,0.78)}