/* ═══════════════════════════════════════════════════════════
   NULL HAURE COUTURE — Shared design system
   世界観の基盤：トークン / タイポ / ナビ / フッター / 演出 / レスポンシブ
═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --void:#050505;
  --black:#080808;
  --panel:#0c0c0c;
  --light:#e8e3da;
  --white:#e8e3db;
  --gold:#c9a96e;
  --mist:rgba(232,227,218,0.62);
  --faint:rgba(232,227,218,0.08);
  --line:rgba(232,227,218,0.10);
  --serif:'Cormorant Garamond','Hiragino Mincho ProN','Yu Mincho',serif;
  --jp:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --mono:'SF Mono','Menlo','Courier New',monospace;
  --label:'Libre Baskerville',serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --pad:clamp(1.25rem,5vw,3.5rem);
}

html{
  background:var(--void);color:var(--light);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* iOS Safari は指定がないと本文を勝手に拡大することがある。
     意図した位置で改行されなくなるので固定する。 */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  overflow-x:hidden;scroll-behavior:smooth;
}
body{font-family:var(--serif);font-weight:300;overflow-x:hidden;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{background:none;border:none;color:inherit;font:inherit;padding:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:1px solid var(--mist);outline-offset:3px}
::selection{background:rgba(232,227,218,0.18);color:var(--light)}

/* Use the custom cursor only on precise pointers (desktop) */
@media (hover:hover) and (pointer:fine){
  body.has-cursor, body.has-cursor a, body.has-cursor button{cursor:none}
}

/* ── Shared utility type ────────────────────────────────────── */
.eyebrow{
  font-family:var(--label);font-size:9px;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--mist);
}
.jp{font-family:var(--jp)}
.muted{color:var(--mist)}
.gold-line{display:block;width:40px;height:1px;background:var(--gold);margin:0 0 28px}
/* スマホでだけ効く改行。日本語が文節の途中で割れたり、折り返した先が
   極端に短くなるのを防ぐ用。PC/タブレットでは display:none なので
   既存のレイアウトには一切影響しない。<br class="br-sp"> で使う。 */
.br-sp{display:none}
@media (max-width:680px){
  .br-sp{display:inline}
  /* スマホ幅では日本語を文節単位で折り返す。
     「オープ／ンから」のような語の途中での分断と、最終行が「す。」だけ
     残る孤立行を同時に防ぐ。未対応ブラウザでは従来どおりの折り返しに
     フォールバックするだけなので副作用はない。 */
  /* auto-phrase は Chrome/Android 系のみ。line-break:strict は Safari も対応していて、
     「フォロワ／ー」のように長音符や小書きかなが行頭に落ちるのを防ぐ。 */
  body{word-break:auto-phrase;text-wrap:pretty;line-break:strict}
}

/* ════════════════════════════════════════════════════════════
   CHROME — grain / cursor / veil / progress (injected by site.js)
═════════════════════════════════════════════════════════════ */
#grain-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;opacity:0.36;mix-blend-mode:overlay}
#cur-dot{position:fixed;left:0;top:0;z-index:8000;pointer-events:none;width:5px;height:5px;border-radius:50%;background:var(--light);transform:translate(-50%,-50%);will-change:transform;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
#cur-ring{position:fixed;left:0;top:0;z-index:7999;pointer-events:none;width:32px;height:32px;border-radius:50%;border:1px solid rgba(232,227,218,0.4);transform:translate(-50%,-50%);will-change:transform;opacity:0;transition:opacity .3s,width .25s var(--ease),height .25s var(--ease)}
body.cursor-active #cur-dot,body.cursor-active #cur-ring{opacity:1}
body.cursor-hover #cur-ring{width:54px;height:54px;border-color:var(--light)}
#page-veil{position:fixed;inset:0;background:var(--void);z-index:8500;opacity:1;pointer-events:none;transition:opacity .3s ease}
#page-veil.in{opacity:0}
#page-veil.out{opacity:1;pointer-events:all}
#progress-bar{position:fixed;top:0;left:0;height:1px;background:var(--gold);z-index:7000;width:0;transition:width .1s linear}

/* ════════════════════════════════════════════════════════════
   NAV
═════════════════════════════════════════════════════════════ */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:620;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(0.85rem,2vw,1.4rem) var(--pad);
  transition:background .5s,backdrop-filter .5s,padding .5s;
}
.site-nav.scrolled{background:rgba(5,5,5,0.86);backdrop-filter:blur(16px);padding-top:.7rem;padding-bottom:.7rem}
.nav-logo img{height:clamp(30px,3.4vw,40px);width:auto}
.nav-links{display:flex;gap:clamp(1rem,2vw,2rem);align-items:center}
.nav-links > li{position:relative}
.nav-links > li > a{
  font-family:var(--label);font-size:8px;letter-spacing:0.26em;text-transform:uppercase;
  color:var(--mist);transition:color .3s;white-space:nowrap;padding:.4rem 0;display:block;
}
.nav-links > li > a:hover,.nav-links > li > a.active{color:var(--light)}
.has-drop .drop{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);margin-top:8px;
  background:rgba(5,5,5,0.97);border:1px solid var(--faint);min-width:160px;padding:.6rem 0;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;
}
/* リンクとドロップの 8px ギャップを透明ブリッジで埋め、カーソル移動でホバーが切れないように */
.has-drop .drop::before{content:'';position:absolute;left:0;right:0;top:-9px;height:9px}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:.5rem 1.2rem;font-family:var(--label);font-size:8px;letter-spacing:0.2em;color:var(--mist);transition:color .2s}
.drop a:hover{color:var(--light)}
/* 予約ボタン — サイト最上部の主導線。他のナビより一段大きく、常時表示 */
.nav-cta{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
  background:var(--light);color:var(--void);border:1px solid var(--light);
  padding:.62rem 1.5rem;line-height:1;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
}
.nav-cta .cta-jp{font-family:var(--jp);font-size:13px;letter-spacing:.14em;font-weight:500}
.nav-cta .cta-en{font-family:var(--label);font-size:7.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.62}
.nav-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--void)}
.nav-right{display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.2rem)}

/* ── 予約モーダル（店舗選択） ─────────────────────────────── */
.reserve-modal{position:fixed;inset:0;z-index:8600;display:flex;align-items:center;justify-content:center;
  padding:var(--pad);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
body.reserve-open .reserve-modal{opacity:1;pointer-events:auto}
.rs-backdrop{position:absolute;inset:0;background:rgba(3,3,3,.86);backdrop-filter:blur(10px)}
.rs-panel{position:relative;width:min(760px,100%);max-height:88svh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);padding:clamp(2rem,5vw,3.4rem);
  transform:translateY(14px);transition:transform .45s var(--ease)}
body.reserve-open .rs-panel{transform:none}
.rs-close{position:absolute;top:.6rem;right:1rem;font-size:26px;line-height:1;color:var(--mist);transition:color .25s}
.rs-close:hover{color:var(--light)}
.rs-eyebrow{display:block;font-family:var(--label);font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.rs-title{font-family:var(--jp);font-weight:300;font-size:clamp(19px,2.6vw,27px);line-height:1.6;letter-spacing:.03em;
  word-break:auto-phrase;line-break:strict}
.rs-note{font-family:var(--jp);font-size:12px;line-height:2;color:var(--mist);margin-top:.7rem}
.rs-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(1.6rem,4vw,2.4rem)}
.rs-card{position:relative;display:block;border:1px solid var(--line);padding:1.35rem 2.6rem 1.35rem 1.35rem;
  transition:border-color .3s,background .3s}
.rs-card:hover,.rs-card:focus-visible{border-color:var(--light);background:rgba(232,227,218,.05)}
.rs-card .rs-en{display:block;font-family:var(--serif);font-style:italic;font-weight:200;font-size:20px;color:var(--mist);transition:color .3s}
.rs-card .rs-jp{display:block;font-family:var(--jp);font-size:16px;letter-spacing:.05em;margin-top:.25rem}
.rs-card .rs-area{display:block;font-family:var(--jp);font-size:11.5px;line-height:1.9;color:var(--mist);margin-top:.6rem}
.rs-card .rs-go{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);color:rgba(232,227,218,.3);transition:transform .3s,color .3s}
.rs-card:hover .rs-en{color:var(--gold)}
.rs-card:hover .rs-go{transform:translateY(-50%) translateX(5px);color:var(--gold)}
@media (max-width:620px){.rs-grid{grid-template-columns:1fr}}

/* hamburger */
.nav-burger{display:none;width:30px;height:18px;position:relative;z-index:610}
.nav-burger span{position:absolute;left:0;width:100%;height:1px;background:var(--light);transition:transform .4s var(--ease),opacity .3s}
.nav-burger span:nth-child(1){top:0}
.nav-burger span:nth-child(2){top:50%;transform:translateY(-50%)}
.nav-burger span:nth-child(3){bottom:0}
body.menu-open .nav-burger span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}

/* mobile drawer
   子リンク（採用/HR の v1〜v3 など）を含むので、
   背の低い端末でも全項目に届くよう drawer 自体をスクロール可能にし、
   中身は .drawer-inner で上下中央に置く（flex 中央寄せのままだと
   はみ出したときに上端が切れてスクロールできなくなるため）。 */
.nav-drawer{
  position:fixed;inset:0;z-index:600;background:rgba(5,5,5,0.98);backdrop-filter:blur(10px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;pointer-events:none;transform:translateY(-2%);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.drawer-inner{min-height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--pad) + 3.4rem) var(--pad) var(--pad)}
body.menu-open .nav-drawer{opacity:1;pointer-events:all;transform:none}
.nav-drawer .drawer-main{display:flex;flex-direction:column;gap:clamp(.9rem,2.6vh,1.4rem)}
.nav-drawer a{font-family:var(--jp);font-size:clamp(20px,7vw,30px);font-weight:300;color:var(--light);display:flex;align-items:baseline;gap:.9rem}
.nav-drawer a .en{font-family:var(--label);font-size:9px;letter-spacing:.25em;color:var(--mist);text-transform:uppercase}
/* 子リンク：親の下に横並びのチップ（縦に伸びすぎないように） */
.nav-drawer .drawer-kids{display:flex;flex-wrap:wrap;gap:.45rem;margin:.7rem 0 .1rem}
.nav-drawer .drawer-kids a{
  display:inline-flex;font-family:var(--label);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);border:1px solid var(--line);border-radius:999px;padding:.48rem .95rem;
  transition:color .25s,border-color .25s,background .25s;
}
.nav-drawer .drawer-kids a.on{color:var(--void);background:var(--light);border-color:var(--light)}
.nav-drawer .drawer-sub{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem}
.nav-drawer .drawer-sub a{font-family:var(--label);font-size:10px;letter-spacing:.2em;color:var(--mist)}
/* 背の低い端末：子リンクを含めても1画面に収まるよう詰める */
@media (max-height:820px){
  .drawer-inner{padding-top:calc(var(--pad) + 2.4rem)}
  .nav-drawer .drawer-main{gap:clamp(.65rem,2.1vh,1.05rem)}
  .nav-drawer a{font-size:clamp(18px,6vw,26px)}
  .nav-drawer .drawer-kids{margin:.5rem 0 0}
  .nav-drawer .drawer-kids a{font-size:9px;padding:.4rem .8rem}
  .nav-drawer .drawer-sub{margin-top:1.6rem}
}

/* ドロワー最上部の予約ボタン（モバイルの主導線） */
.drawer-reserve{
  display:flex;align-items:center;justify-content:center;gap:.9rem;width:100%;
  background:var(--light);color:var(--void);padding:1.1rem 1.4rem;margin-bottom:clamp(1.6rem,4vh,2.4rem);
  cursor:pointer;transition:background .3s;
}
.drawer-reserve:hover{background:var(--gold)}
.drawer-reserve .jp{font-family:var(--jp);font-size:17px;letter-spacing:.14em;font-weight:500}
.drawer-reserve .en{font-family:var(--label);font-size:8px;letter-spacing:.26em;text-transform:uppercase;opacity:.6}

@media (max-width:880px){
  .nav-links{display:none}
  .nav-burger{display:block}
  /* 予約はモバイルでも隠さない。バーガーの隣に一回り小さく残す */
  .nav-cta{padding:.5rem 1.05rem}
  .nav-cta .cta-jp{font-size:12px}
  .nav-cta .cta-en{display:none}
}

/* ════════════════════════════════════════════════════════════
   SHARED PAGE PRIMITIVES
═════════════════════════════════════════════════════════════ */
main{position:relative;z-index:4}

/* Generic page hero (overridden per page for character) */
.page-hero{
  position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(7rem,16vh,11rem) var(--pad) clamp(2.5rem,6vw,4rem);overflow:hidden;
}
.page-hero h1{font-weight:200;line-height:1.05;letter-spacing:.02em}
.page-hero .ph-jp{font-family:var(--jp);font-size:clamp(34px,8vw,82px)}
.page-hero .ph-en{font-family:var(--label);font-size:clamp(10px,1.4vw,13px);letter-spacing:.42em;text-transform:uppercase;color:var(--mist);margin-bottom:1.2rem;display:block}
.page-hero .ph-index{position:absolute;top:clamp(6rem,14vh,9rem);right:var(--pad);font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(232,227,218,0.42)}

.section{padding:clamp(4rem,10vw,9rem) var(--pad);position:relative}
.section-label{font-family:var(--label);font-size:9px;letter-spacing:0.36em;text-transform:uppercase;color:var(--mist);margin-bottom:2rem;display:block}
.section-title{font-weight:200;font-size:clamp(28px,4.5vw,56px);line-height:1.2;letter-spacing:.02em}
.section-title.jp{font-family:var(--jp)}
.lead{font-family:var(--jp);font-size:clamp(15px,1.5vw,18px);line-height:2.4;color:rgba(232,227,218,0.84);font-weight:300}
.body-text{font-family:var(--jp);font-size:clamp(13px,1.1vw,15px);line-height:2.3;color:rgba(232,227,218,0.75)}

.divider{height:1px;background:var(--line);width:100%}

/* link with animated underline */
.link-more{
  display:inline-flex;align-items:center;gap:14px;font-family:var(--label);font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mist);transition:color .3s;
}
.link-more::after{content:'';display:block;width:42px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.link-more:hover{color:var(--light)}
.link-more:hover::after{width:66px}

/* button */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  padding:1.05rem 2.4rem;border:1px solid rgba(232,227,218,0.25);color:var(--light);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s;
}
.btn:hover{background:var(--light);color:var(--void);border-color:var(--light)}
.btn-block{width:100%}

/* image reveal helpers */
.img-cover{width:100%;height:100%;object-fit:cover}
.tone{filter:grayscale(18%) brightness(.82)}
.tone-hover{transition:transform 1s var(--ease),filter .6s}
.tone-hover:hover{transform:scale(1.04);filter:grayscale(0%) brightness(.92)}

/* ════════════════════════════════════════════════════════════
   REVEAL ON SCROLL
═════════════════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-img{opacity:0;clip-path:inset(0 0 100% 0);transition:opacity .75s var(--ease),clip-path .75s var(--ease)}
.reveal-img.in{opacity:1;clip-path:inset(0 0 0 0)}
.rd-1{transition-delay:.1s}.rd-2{transition-delay:.2s}.rd-3{transition-delay:.3s}
.rd-4{transition-delay:.4s}.rd-5{transition-delay:.5s}.rd-6{transition-delay:.6s}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-img{opacity:1 !important;transform:none !important;clip-path:none !important}
  html{scroll-behavior:auto}
}

/* ════════════════════════════════════════════════════════════
   FOOTER
═════════════════════════════════════════════════════════════ */
.site-footer{position:relative;z-index:4;background:var(--void);border-top:1px solid var(--line);padding:clamp(3.5rem,7vw,6rem) var(--pad) 2.5rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 2fr;gap:clamp(2rem,5vw,5rem)}
/* フッターはシンボル（まるいマーク）。素材の周囲に余白が入っているので幅で効かせる */
.footer-brand .fb-logo img{width:clamp(160px,17vw,230px);height:auto;opacity:.9;margin:-1rem 0 .6rem -.6rem}
.footer-brand p{font-family:var(--jp);font-size:12px;line-height:2.1;color:var(--mist);max-width:30ch}
.footer-reserve{margin-top:1.8rem}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.footer-col h4{font-family:var(--label);font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:rgba(232,227,218,0.52);margin-bottom:1.1rem}
.footer-col a,.footer-col button{display:block;font-family:var(--jp);font-size:12.5px;letter-spacing:.04em;color:rgba(232,227,218,0.72);margin-bottom:.7rem;transition:color .25s;text-align:left}
.footer-col a:hover,.footer-col button:hover{color:var(--light)}
.footer-bottom{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid rgba(232,227,218,0.05);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom .copy{font-family:var(--label);font-size:9px;letter-spacing:.2em;color:rgba(232,227,218,0.5)}
.footer-social{display:flex;gap:1.1rem;align-items:center}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  color:rgba(232,227,218,0.6);border:1px solid rgba(232,227,218,.14);border-radius:50%;
  transition:color .25s,border-color .25s}
.footer-social a:hover{color:var(--light);border-color:rgba(232,227,218,.42)}
.footer-social svg{display:block}

@media (max-width:880px){
  .footer-grid{grid-template-columns:1fr;gap:3rem}
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .footer-cols{grid-template-columns:1fr 1fr;gap:1.5rem}
}
/* 予約モーダル：左右 32px の内側余白だと見出しが「…お選びくだ / さい」で割れる */
@media (max-width:600px){
  .rs-panel{padding:clamp(1.4rem,5vw,3.4rem)}
  .rs-title{font-size:clamp(17px,5vw,27px)}
}

/* ════════════════════════════════════════════════════════════
   日本語の禁則処理（全ページ共通の安全網）
   line-break:strict で、行頭に「ー」「っ」「ゃ」などが来る割れ方を防ぐ
   （「カラーリスト」が「カラ／ーリスト」で切れるのはこれが原因）。
   見出しはさらに word-break:auto-phrase で文節折り返し（対応ブラウザのみ）。
   顧客がエディタで長い文に差し替えても崩れにくくするための保険。
═════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,span,a,small{line-break:strict}
h1,h2,h3,h4,.section-title,[class*="headline"]{word-break:auto-phrase}

/* ════════════════════════════════════════════════════════════
   CMS LIST / GRID PRIMITIVES (news / blog / style / staff)
═════════════════════════════════════════════════════════════ */
.cms-empty{font-family:var(--jp);color:var(--mist);font-size:14px;padding:3rem 0}

/* generic responsive container */
.wrap{max-width:1320px;margin:0 auto}
.wrap-narrow{max-width:820px;margin:0 auto}

/* article prose (news/blog detail) */
.prose{font-family:var(--jp);max-width:760px}
.prose h2{font-size:clamp(20px,2.4vw,28px);font-weight:400;line-height:1.6;margin:3rem 0 1.2rem;letter-spacing:.02em}
.prose h3{font-size:clamp(17px,2vw,21px);font-weight:500;margin:2.2rem 0 1rem;color:var(--light)}
.prose p{font-size:15px;line-height:2.3;color:rgba(232,227,218,0.84);margin-bottom:1.6rem}
.prose img{margin:2.4rem 0;width:100%}
.prose ul,.prose ol{margin:0 0 1.6rem 1.3rem;color:rgba(232,227,218,0.84)}
.prose li{font-size:15px;line-height:2.1;margin-bottom:.5rem}
.prose blockquote{border-left:1px solid var(--gold);padding-left:1.5rem;margin:2rem 0;font-style:italic;color:rgba(232,227,218,0.75)}
.prose a{color:var(--gold);border-bottom:1px solid rgba(201,169,110,0.4)}

/* form controls */
.field{margin-bottom:2rem}
.field label{display:block;font-family:var(--label);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);margin-bottom:.8rem}
.field label .req{color:var(--gold);margin-left:.4rem}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(232,227,218,0.2);
  color:var(--light);font-family:var(--jp);font-size:15px;padding:.7rem 0;transition:border-color .3s;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--light)}
.field select{cursor:pointer}
.field select option{background:var(--black)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}

/* tag/category pill */
.pill{display:inline-block;font-family:var(--label);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,169,110,0.4);padding:4px 11px}
.pill-ghost{color:var(--mist);border-color:rgba(232,227,218,0.2)}