/* Brilliquid corporate site — shared stylesheet.
   Identity: ai/shu (indigo + vermillion) + sumi/cream + the 認証 provenance seal.
   Type: Archivo (wordmark/headlines) · Libre Franklin (body) · IBM Plex Mono (labels/data)
   · Noto Serif JP (seal). Decided 2026-09-08 — see analyst/BRANDING_POSITIONING.md.
   NOTE: seal glyph 認証 is PROVISIONAL pending native-speaker (Yumi) check. */

:root{
  --paper:#F6F1E6; --paper-2:#EFE8D7; --sumi:#211D1A; --sumi-soft:#3B342E;
  --grey:#8A7F73; --grey-line:#DAD1BE; --card:#FBF7EE;
  --shu:#D93B24; --shu-deep:#B5342A; --ai:#1C3A5E; --ai-soft:#2E557F; --seal-ink:#C7381F;
  --shadow:0 1px 2px rgba(33,29,26,.05), 0 14px 40px -24px rgba(33,29,26,.36);
  --maxw:1080px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16130E; --paper-2:#1E1A14; --sumi:#F1E9DA; --sumi-soft:#CFC5B4;
    --grey:#9C9285; --grey-line:#39322A; --card:#201B14;
    --shu:#E5533D; --shu-deep:#E5533D; --ai:#7AA2CC; --ai-soft:#8FB2D6; --seal-ink:#E5533D;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 46px -26px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#16130E; --paper-2:#1E1A14; --sumi:#F1E9DA; --sumi-soft:#CFC5B4;
  --grey:#9C9285; --grey-line:#39322A; --card:#201B14;
  --shu:#E5533D; --shu-deep:#E5533D; --ai:#7AA2CC; --ai-soft:#8FB2D6; --seal-ink:#E5533D;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 46px -26px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--sumi);
  font-family:"Libre Franklin",-apple-system,system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
a{color:inherit}
h1,h2,h3{margin:0; text-wrap:balance}
.mono{font-family:"IBM Plex Mono",monospace}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); margin:0}
:focus-visible{outline:2px solid var(--shu); outline-offset:2px}

/* seal */
.seal{flex:0 0 auto; display:grid; place-items:center; border-radius:11px;
  border:2.5px solid var(--seal-ink); color:var(--seal-ink); line-height:1;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700}
.seal .cc{display:flex; flex-direction:column; align-items:center}
.seal.solid{background:var(--seal-ink); color:var(--paper); border-color:var(--seal-ink)}
/* single-glyph 証 seal leading the Readings heading (認証 held pending native check) */
.shead .sh-title{display:flex; align-items:center; gap:14px}
.shead .rs{width:46px; height:46px; border-width:2.5px; border-radius:12px; font-size:25px}
/* reading tags */
.rtag{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.02em; color:var(--grey);
  background:color-mix(in srgb, var(--ai) 7%, transparent); border:1px solid var(--grey-line);
  border-radius:100px; padding:2px 9px; white-space:nowrap}
.rc .rtags{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.arttags{display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 0}
.arttags .rtag{font-size:11px; padding:3px 11px}

/* nav */
nav{display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; padding:20px 0; border-bottom:1px solid var(--grey-line)}
nav .wm{font-family:"Archivo",sans-serif; font-weight:800; font-size:21px; letter-spacing:-.01em; display:flex; align-items:center; gap:11px; text-decoration:none; white-space:nowrap}
nav .wm .bril{color:var(--shu)} nav .wm .liquid{color:var(--ai)}
nav .links{display:flex; flex-wrap:wrap; gap:14px 24px; font-size:13.5px; font-weight:500}
nav .links a{color:var(--sumi-soft); text-decoration:none; white-space:nowrap}
nav .links a:hover{color:var(--shu)}
/* narrow: wordmark on its own row, links flow beneath — each link stays whole, never breaks mid-phrase */
@media (max-width:600px){
  nav{flex-direction:column; align-items:flex-start; gap:14px}
  nav .links{gap:14px 20px}
}

/* hero */
.hero{padding:74px 0 60px; border-bottom:1px solid var(--grey-line)}
.hero .tag{color:var(--shu); font-weight:600; font-size:14px; letter-spacing:.02em}
.hero h1{font-family:"Archivo",sans-serif; font-weight:800; font-size:clamp(34px,6vw,62px); letter-spacing:-.025em; line-height:1.02; margin:.28em 0 .34em}
.hero h1 .u{color:var(--ai)}
.hero .lede{font-size:18px; color:var(--sumi-soft); max-width:56ch; margin:0 0 30px}
.cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.btn{font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; padding:13px 22px; border-radius:3px; font-weight:500; display:inline-block}
.btn.p{background:var(--shu); color:#fff}
.btn.s{border:1px solid var(--grey-line); color:var(--sumi)}
.btn.s:hover{border-color:var(--shu); color:var(--shu)}

section{padding:60px 0; border-bottom:1px solid var(--grey-line)}
.shead{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap}
.shead h2{font-family:"Archivo",sans-serif; font-weight:700; font-size:clamp(20px,2.6vw,26px); letter-spacing:-.01em}
.shead .lk{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--shu); text-decoration:none; letter-spacing:.04em}

/* readings feed */
.feed{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.rc{background:var(--card); border:1px solid var(--grey-line); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .16s ease; text-decoration:none; color:inherit}
.rc:hover{transform:translateY(-3px)}
.rc .rb{padding:20px 20px 14px; flex:1 1 auto}
.rc .rn{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey)}
.rc .rn b{color:var(--shu)}
.rc h3{font-size:18px; font-weight:700; letter-spacing:-.01em; line-height:1.16; margin:9px 0 8px}
.rc p{margin:0; font-size:13.5px; color:var(--sumi-soft); line-height:1.5}
.rc .spark{height:40px; margin:14px 0 2px}
.rc .rf{display:flex; align-items:center; gap:9px; padding:11px 20px; border-top:1px solid var(--grey-line); background:color-mix(in srgb, var(--shu) 4%, transparent)}
.rc .rf .seal{width:26px; height:26px; border-width:2px; border-radius:7px; font-size:9px}
.rc .rf .m{font-family:"IBM Plex Mono",monospace; font-size:9px; color:var(--grey); line-height:1.4}
.rc .rf .m b{color:var(--sumi)}

/* services */
.svc{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px}
.sv{padding:2px 0}
.sv .k{width:38px; height:38px; border-radius:9px; display:grid; place-items:center; margin-bottom:14px; font-family:"Archivo",sans-serif; font-weight:800; font-size:17px; color:#fff; background:var(--ai)}
.sv:nth-child(2) .k{background:var(--shu)}
.sv:nth-child(3) .k{background:var(--sumi)}
.sv h3{font-size:16.5px; font-weight:700; margin-bottom:7px; letter-spacing:-.01em}
.sv p{margin:0 0 10px; font-size:14px; color:var(--sumi-soft)}
.sv ul{margin:0; padding:0; list-style:none; font-size:13px; color:var(--sumi-soft)}
.sv li{padding:3px 0 3px 15px; position:relative}
.sv li::before{content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--shu)}

/* health band — a contained rounded card with inner padding (text was flush to the edge) */
.health{background:var(--card); border:1px solid var(--grey-line); border-radius:12px; padding:46px 40px}
@media (max-width:600px){.health{padding:32px 22px}}
.hgrid{display:grid; grid-template-columns:1.3fr 1fr; gap:36px; align-items:center}
.health .lab{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ai-soft)}
.health h2{font-family:"Archivo",sans-serif; font-weight:700; font-size:clamp(21px,2.6vw,28px); letter-spacing:-.01em; margin:.4em 0 .4em}
.health p{margin:0 0 16px; font-size:15px; color:var(--sumi-soft); max-width:52ch}
.health .chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:12px; color:var(--sumi-soft); border:1px solid var(--grey-line); border-radius:20px; padding:5px 12px; background:var(--paper)}
/* brill.health card — a deliberate fixed-light brand moment in brill.health's own navy + teal (renders in both themes) */
.health .card2{background:#FBF7EE; border:1px solid #E7DFCC; border-radius:8px; padding:30px; box-shadow:var(--shadow)}
.health .card2 .bh-wm{font-family:"Archivo",sans-serif; font-weight:800; font-size:31px; letter-spacing:-.01em; color:#12303F; line-height:1}
.health .card2 .bh-wm .dot{color:#2AA198; padding:0 2px}
.health .card2 .bh-wm .h{color:#2AA198; font-weight:600}
.health .card2 .bh-tag{font-size:15px; line-height:1.5; color:#4A4640; font-style:italic; margin:16px 0 0; text-wrap:pretty}
.health .card2 .bh-tag b{color:#2AA198; font-style:normal; font-weight:600}
.health .card2 .bh-sub{font-size:13px; line-height:1.5; color:#6E675C; border-top:1px solid #E7DFCC; margin-top:18px; padding-top:15px}
.health .card2 .bh-sub b{color:#12303F}
.health .card2 .bh-link{display:inline-block; margin-top:14px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:#2AA198; text-decoration:none; letter-spacing:.03em}
.health .card2 .bh-link:hover{text-decoration:underline}
@media (max-width:720px){.hgrid{grid-template-columns:1fr; gap:22px}}

/* credentials */
.creds{display:grid; grid-template-columns:1fr 1fr; gap:30px}
.creds ul{margin:0; padding:0; list-style:none}
.creds li{padding:9px 0; border-bottom:1px solid var(--grey-line); font-size:13.5px; display:flex; justify-content:space-between; gap:14px; color:var(--sumi-soft)}
.creds li b{color:var(--sumi); font-weight:600}
.creds .dl{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--shu); white-space:nowrap}
@media (max-width:680px){.creds{grid-template-columns:1fr; gap:8px}}

/* ===== reading article ===== */
.art{padding:56px 0 20px}
.art .back{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--shu); text-decoration:none; letter-spacing:.06em}
.art .meta{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin:26px 0 0}
.art .meta b{color:var(--shu)}
.art h1{font-family:"Archivo",sans-serif; font-weight:800; font-size:clamp(28px,4.4vw,44px); letter-spacing:-.02em; line-height:1.06; margin:.32em 0 .3em; max-width:20ch}
.art .dek{font-size:19px; color:var(--sumi-soft); max-width:60ch; margin:0}
.exhibit{margin:38px 0 6px; background:var(--card); border:1px solid var(--grey-line); border-radius:6px; box-shadow:var(--shadow); padding:26px 28px 20px}
.exhibit .cap{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin:0 0 18px}
.bars{display:flex; align-items:flex-end; gap:40px; height:210px; max-width:560px}
.bar{flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%}
.bar .val{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:17px; margin-bottom:8px}
.bar.a .val{color:var(--shu-deep)} .bar.b .val{color:var(--ai)}
.bar .col{width:100%; border-radius:3px 3px 0 0}
.bar.a .col{background:var(--shu)} .bar.b .col{background:var(--ai)}
.bar .cl{font-size:12px; text-align:center; margin-top:11px; line-height:1.4; color:var(--sumi-soft)}
.bar .cl b{display:block; color:var(--sumi); font-size:13px}
.prose{max-width:64ch; margin:34px 0 0; font-size:16.5px; line-height:1.72}
.prose p{margin:0 0 20px; color:var(--sumi)}
.prose h2{font-family:"Archivo",sans-serif; font-size:21px; font-weight:700; letter-spacing:-.01em; margin:34px 0 12px}
.prose b{font-weight:600}
.prose .pull, .prose blockquote{border-left:3px solid var(--shu); padding:4px 0 4px 20px; margin:26px 0; font-size:18px; color:var(--sumi-soft); font-style:italic}
.prose blockquote p{margin:0}
.artprov{max-width:64ch; margin:36px 0 10px; display:flex; gap:15px; align-items:flex-start; padding:20px 22px; background:var(--card); border:1px solid var(--grey-line); border-left:3px solid var(--shu); border-radius:5px}
.artprov .seal{width:44px; height:44px; border-width:2.5px; border-radius:11px; font-size:15px}
.artprov .t{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--grey); line-height:1.7}
.artprov .t b{color:var(--sumi); font-weight:600}

/* footer */
footer{background:var(--sumi); color:var(--paper); padding:44px 0 40px}
footer .fg{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:30px}
footer .wm{font-family:"Archivo",sans-serif; font-weight:800; font-size:20px; display:flex; align-items:center; gap:10px; margin-bottom:12px}
footer h4{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#E4DCCC; margin:0 0 12px}
footer p{margin:0 0 10px; font-size:11.5px; line-height:1.6; color:#E4DCCC}
footer a{color:#E5A99A}
footer .base{margin-top:30px; padding-top:18px; border-top:1px solid #3a332a; font-size:10.5px; color:#B0A796; font-family:"IBM Plex Mono",monospace}
@media (max-width:720px){footer .fg{grid-template-columns:1fr; gap:22px}}

/* subscribe band — a deliberately single-look element (fixed indigo in both themes), painted explicitly */
.subscribe{background:#1C3A5E; color:#F3EEE2; border-radius:8px; padding:32px 34px; display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center; box-shadow:var(--shadow)}
.subscribe h2{font-family:"Archivo",sans-serif; font-weight:700; font-size:clamp(20px,2.4vw,25px); color:#fff; letter-spacing:-.01em; margin:0 0 8px; text-wrap:balance}
.subscribe p{margin:0; font-size:14.5px; color:#CBD7E5; max-width:46ch}
.subscribe form{display:flex; gap:10px; flex-wrap:wrap}
.subscribe input[type=email]{flex:1 1 210px; min-width:0; padding:13px 15px; border-radius:4px; border:1px solid #34506e; background:#F6F1E6; color:#211D1A; font-family:inherit; font-size:15px}
.subscribe input[type=email]::placeholder{color:#8A7F73}
.subscribe button{background:var(--shu); color:#fff; border:0; cursor:pointer; font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:500; padding:13px 22px; border-radius:4px}
.subscribe button:hover{background:var(--shu-deep)}
.subscribe .fine{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:#93A6BC; margin-top:11px; letter-spacing:.01em}
@media (max-width:720px){.subscribe{grid-template-columns:1fr; gap:18px}}

/* typographic rag — balance short display text (headings already balance), pretty for body leads (no orphaned last word) */
.hero .lede, .art .dek, .prose p, .rc p{text-wrap:pretty}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}