/*
Theme Name: The Slab
Theme URI: https://andreahagopian.com
Author: Andrea Hagopian
Description: Presentation layer for The Slab. Pairs with The Slab Core plugin, which owns the dataset. Dark, serif, forensic.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.2
License: GPL-2.0-or-later
Text Domain: the-slab
*/

:root{
  --ink:#0a0606; --ink-2:#100a0a; --ink-3:#170e0e;
  --blood:#a01f1f; --blood-hi:#c02626; --blood-dim:#8f1c1c;
  --bone:#f2e9e4; --bone-2:#c9bdb8; --mute:#8a7c78; --mute-2:#7d6a65;
  --line:#2a1614; --line-2:#241514;
  --serif:Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--serif);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--blood-hi);text-decoration:none}
a:hover{color:var(--bone)}
img,svg{max-width:100%;height:auto}
h1,h2,h3,h4{font-weight:normal;line-height:1.15;margin:0 0 .5em}
h1{font-size:44px;letter-spacing:-.5px}
h2{font-size:30px;margin-top:1.6em}
h3{font-size:21px;margin-top:1.4em}
p{margin:0 0 1em}
hr{border:none;border-top:1px solid var(--line);margin:2.4em 0}
blockquote{border-left:3px solid var(--blood);margin:1.8em 0;padding:.2em 0 .2em 22px;
  font-style:italic;color:var(--bone-2)}
code,pre{font-family:ui-monospace,Menlo,monospace;font-size:.9em}

/* ---------- chrome ---------- */
.slab-wrap,.site{max-width:1320px;margin:0 auto;padding:0 60px}
.slab-nav,.site-nav{display:flex;flex-wrap:wrap;gap:26px;align-items:baseline;
  padding:26px 0 18px;border-bottom:1px solid var(--line-2);margin-bottom:40px}
.slab-nav a,.site-nav a{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--mute)}
.slab-nav a:first-child,.site-nav .brand{color:var(--bone);font-size:19px;letter-spacing:3px;
  text-transform:none;margin-right:auto}
.slab-nav a:hover,.site-nav a:hover{color:var(--blood-hi)}
.slab-main,.site-main{padding-bottom:70px}
.slab-footer,.site-footer{border-top:1px solid var(--line-2);padding:26px 0 60px;
  color:var(--mute-2);font-size:12.5px;letter-spacing:2px;text-transform:uppercase}

/* ---------- prose measure ---------- */
.slab-main > p,.slab-main > h2,.slab-main > h3,.slab-main > ul,.slab-main > ol,
.slab-main > blockquote,.entry-content > p,.entry-content > h2,.entry-content > h3,
.entry-content > ul,.entry-content > ol,.entry-content > blockquote{max-width:700px}

/* ---------- case header ---------- */
.slab-case-header{border-bottom:1px solid var(--line-2);padding-bottom:22px;margin-bottom:30px}
.slab-case-number{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--mute-2);display:block;margin-bottom:8px}
.slab-case-facts,.slab-card-facts{font-size:12.5px;color:var(--mute);font-style:italic}
.slab-crumb{font-size:11.5px;letter-spacing:1.5px;color:var(--mute-2);margin-bottom:20px}
.slab-lede,.slab-verdict,.slab-card-verdict{font-size:18px;line-height:1.65;color:var(--bone-2);max-width:700px}

/* ---------- chips ---------- */
.slab-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px;padding:0;list-style:none}
.slab-chip{display:inline-block;background:#1c1211;border:1px solid #4a221f;color:#e0a89e;
  font-size:12.5px;padding:7px 14px;border-radius:4px}
.slab-chip-axis{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--mute-2);
  display:block;margin-bottom:3px}

/* ---------- scores ---------- */
.slab-scores{list-style:none;margin:24px 0 32px;padding:0;max-width:640px}
.slab-score{display:flex;align-items:center;gap:14px;padding:7px 0;
  border-bottom:1px solid #1c1211;font-size:14px;color:var(--bone-2)}
.slab-score b,.slab-score strong{color:var(--blood-hi);font-weight:normal;margin-left:auto}
.slab-axes{list-style:none;padding:0;margin:0}

/* ---------- cards ---------- */
.slab-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;
  list-style:none;padding:0;margin:26px 0}
.slab-card{background:var(--ink-2);border:1px solid var(--line);padding:24px}
.slab-card:hover{border-color:#5c2320;background:var(--ink-3)}
.slab-card-title{font-size:23px;margin:0 0 4px}
.slab-card-title a{color:var(--bone)}
.slab-card-verdict{font-size:14px;color:var(--mute-2);margin-top:12px}

/* ---------- the 64 ---------- */
.slab-64-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;padding:0;margin:26px 0}
.slab-64-grid li{background:var(--ink-2);border:1px solid var(--line)}
.slab-64-grid a{display:block;padding:14px 16px}
.slab-64-terms{font-size:12.5px;line-height:1.5;color:var(--bone-2)}
.slab-64-count,.slab-count{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--mute-2);margin-top:8px;display:block}
.slab-64-grid li:has(.slab-64-count:not([data-n])) {opacity:1}

/* ---------- records, careers, groups ---------- */
.slab-records{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;
  list-style:none;padding:0;margin:26px 0}
.slab-records li{background:var(--ink-2);border:1px solid var(--line);padding:20px}
.slab-career,.slab-career-list{list-style:none;padding:0;margin:18px 0}
.slab-career-list li{padding:9px 0;border-bottom:1px solid #1c1211;font-size:14.5px}
.slab-country-group{margin:34px 0}
.slab-country-group h2{font-size:22px;border-bottom:1px solid var(--line-2);padding-bottom:9px}
.slab-empty-state{color:var(--mute-2);font-style:italic;max-width:640px}

/* ---------- bio ---------- */
.slab-bio{border-top:1px solid var(--line-2);margin-top:52px;padding-top:26px;
  color:var(--mute);font-size:14.5px;line-height:1.7;max-width:700px}

/* ---------- front page ---------- */
.sf-wrap{max-width:1320px;margin:0 auto;padding:76px 60px 44px}
.sf-name{font-size:86px;line-height:.98;letter-spacing:-2px;margin:0 0 18px;color:var(--bone)}
.sf-sub{font-size:20px;margin:0 0 62px;color:var(--mute)}
.sf-sub b{color:var(--bone-2);font-weight:normal;letter-spacing:3.5px;font-size:17px}
.sf-sub i{color:#8a2f2f;font-style:italic}
.sf-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sf-btn{display:block;background:var(--ink-2);border:1px solid var(--line);padding:40px 40px 44px;
  transition:background .18s ease,border-color .18s ease}
.sf-btn:hover{background:var(--ink-3);border-color:#5c2320}
.sf-word{display:inline-block;position:relative;font-size:54px;line-height:1.06;letter-spacing:-1px;
  color:var(--blood);padding-bottom:12px;
  text-shadow:0 6px 26px rgba(160,31,31,.55),0 2px 4px rgba(0,0,0,.6)}
.sf-word::after{content:"";position:absolute;left:0;right:14%;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--blood-dim) 0%,var(--blood) 42%,rgba(160,31,31,0) 100%);opacity:.85}
.sf-btn:hover .sf-word{color:var(--blood-hi);text-shadow:0 8px 34px rgba(192,38,38,.7),0 2px 4px rgba(0,0,0,.6)}
.sf-blurb{display:block;font-size:14px;color:var(--mute-2);line-height:1.6;margin-top:18px;max-width:360px}
.sf-foot{max-width:1320px;margin:0 auto;padding:26px 60px 60px}
.sf-rule{border-top:1px solid var(--line-2);padding-top:24px;display:flex;justify-content:space-between;
  align-items:baseline;flex-wrap:wrap;gap:14px}
.sf-fl{font-size:12px;color:#6b5a56;letter-spacing:2.5px;text-transform:uppercase}
.sf-fr a{font-size:12.5px;color:var(--mute);margin-left:24px}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .slab-64-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  body{font-size:16px}
  h1{font-size:32px}h2{font-size:24px}h3{font-size:19px}
  .slab-wrap,.site{padding:0 22px}
  .sf-wrap{padding:48px 22px 30px}
  .sf-foot{padding:20px 22px 44px}
  .sf-name{font-size:44px;letter-spacing:-1px}
  .sf-sub{font-size:16px;margin-bottom:36px}
  .sf-sub b{font-size:14px;letter-spacing:2.5px}
  .sf-grid{grid-template-columns:1fr;gap:16px}
  .sf-btn{padding:26px 24px 28px}
  .sf-word{font-size:35px}
  .sf-blurb{font-size:13.5px;margin-top:14px}
  .sf-fr a{margin:0 18px 0 0}
  .slab-cards,.slab-records{grid-template-columns:1fr}
  .slab-64-grid{grid-template-columns:1fr}
  .slab-nav,.site-nav{gap:16px;padding:20px 0 14px;margin-bottom:28px}
}