/* writingtheresearcharticle.com
   Palette taken from the series cover: sand, indigo, vermillion, cream. */
:root{
  --sand:#edd8a2; --sand-soft:#f6ead0; --sand-line:#e3d3ae;
  --indigo:#3b4988; --indigo-deep:#2c3767; --indigo-soft:#eef0f7;
  --red:#ce1b25; --red-soft:#fdeeef;
  --cream:#faf8f2; --paper:#fff;
  --ink:#1b1c22; --ink-mid:#4a4d59; --ink-soft:#6e7280; --ink-faint:#9a9dab;
  --line:#e6e3da; --line-soft:#f0eee7;
  --shadow:0 1px 2px rgba(27,28,34,.04), 0 6px 20px rgba(27,28,34,.05);
  --shadow-lift:0 2px 6px rgba(27,28,34,.06), 0 14px 34px rgba(27,28,34,.09);
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --text:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --max:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:16px/1.6 var(--ui);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.2; letter-spacing:-.011em; font-weight:650}
h1{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem)}
h2{font-size:1.32rem; margin-top:2.2rem}
h3{font-size:1.06rem; margin-top:1.5rem}
h4{font-size:.98rem}
p{margin:0 0 1em}
a{color:var(--indigo); text-decoration:none}
a:hover{color:var(--red)}
code,kbd{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.85em;
  background:var(--indigo-soft); color:var(--indigo-deep); padding:.12em .4em; border-radius:4px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 26px}
.narrow{max-width:74ch}
main{padding:34px 0 90px}
.lede{font-size:1.13rem; line-height:1.62; color:var(--ink-mid); max-width:70ch}
.muted{color:var(--ink-soft)} .small{font-size:.88rem} .tiny{font-size:.8rem}
hr.rule{border:0; border-top:1px solid var(--line); margin:30px 0}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex; align-items:center; gap:14px; padding-top:11px; padding-bottom:11px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; color:var(--ink); white-space:nowrap}
.brand:hover{color:var(--ink)}
.mark{
  display:inline-flex; align-items:center; letter-spacing:.14em; font-size:.6rem; font-weight:700;
  background:var(--indigo); color:#fff; padding:5px 7px; border-radius:3px; text-transform:uppercase;
}
.brand b{font-weight:650; font-size:.98rem; letter-spacing:-.01em}
.brand b em{font-style:normal; color:var(--red)}
nav.site{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
nav.site a{
  color:var(--ink-mid); font-size:.9rem; padding:6px 11px; border-radius:6px; font-weight:500;
  transition:background .15s, color .15s;
}
nav.site a:hover{background:var(--indigo-soft); color:var(--indigo-deep)}
nav.site a.on{color:var(--ink); font-weight:650; background:var(--sand-soft)}

/* ---------- surfaces ---------- */
.panel{background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:20px 22px; margin-bottom:20px; box-shadow:var(--shadow)}
.panel.tight{padding:15px 17px}
.panel h3:first-child,.panel h2:first-child{margin-top:0}
.grid{display:grid; gap:20px}
@media(min-width:900px){ .grid.two{grid-template-columns:1fr 1fr} .grid.side{grid-template-columns:320px 1fr; align-items:start} }
aside .panel{position:relative}
@media(min-width:900px){ .grid.side > aside{position:sticky; top:74px} }

/* ---------- hero (landing) ---------- */
.hero{padding:46px 0 26px}
.hero-grid{display:grid; gap:34px; align-items:center}
@media(min-width:860px){ .hero-grid{grid-template-columns:1.15fr .85fr} }
.cover{
  position:relative; aspect-ratio:127/185; max-width:290px; width:100%; margin-left:auto;
  background:var(--sand); border-radius:4px; box-shadow:var(--shadow-lift); overflow:hidden;
}
.cover i{position:absolute; display:block}
.cover .c1{left:0; top:0; width:34%; height:26%; background:var(--paper)}
.cover .c2{left:0; bottom:0; width:34%; height:30%; background:var(--red)}
.cover .c3{right:0; bottom:0; width:66%; height:12%; background:var(--indigo)}
.cover .c4{left:6%; top:30%; right:6%; height:44%; background:var(--paper); border-radius:2px}
.cover .lbl{position:absolute; left:6%; top:4%; font-size:.52rem; letter-spacing:.16em;
  font-weight:700; color:var(--indigo); text-transform:uppercase}
.cover .ttl{position:absolute; left:12%; right:12%; top:38%; font-family:var(--ui);
  font-size:.86rem; line-height:1.35; font-weight:650; color:var(--ink)}
.cover .ttl em{font-style:normal; display:block; font-size:1.02rem; color:var(--red)}

/* ---------- controls ---------- */
label.field{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-faint); margin-bottom:6px; font-weight:600}
input[type=text],select,textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; transition:border-color .15s, box-shadow .15s;
}
select{appearance:none; background-image:
  linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
  linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px; cursor:pointer}
textarea{font-family:var(--text); font-size:1rem; line-height:1.6; min-height:280px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(59,73,136,.13)}
button{font:inherit; font-size:.94rem; font-weight:600; cursor:pointer; color:#fff; background:var(--indigo);
  border:0; border-radius:8px; padding:10px 20px; transition:background .15s, transform .06s}
button:hover{background:var(--indigo-deep)}
button:active{transform:translateY(1px)}
button.ghost{background:transparent; color:var(--indigo); box-shadow:inset 0 0 0 1px var(--line)}
button.ghost:hover{background:var(--indigo-soft); box-shadow:inset 0 0 0 1px var(--indigo)}
button.mini{padding:5px 12px; font-size:.85rem}
.row{display:flex; gap:13px; flex-wrap:wrap; align-items:flex-end}
.row > *{flex:1 1 170px}
.row .grow2{flex:2 1 340px}
.checks{display:flex; gap:18px; flex-wrap:wrap; font-size:.9rem; color:var(--ink-mid); align-items:center}
.checks label{display:flex; gap:7px; align-items:center; cursor:pointer}
input[type=checkbox]{accent-color:var(--indigo); width:15px; height:15px}

/* ---------- concordance ---------- */
.kwic{width:100%; border-collapse:collapse; font-family:var(--text); font-size:.95rem}
.kwic td{padding:7px 9px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.kwic td.l{text-align:right; white-space:nowrap; overflow:hidden; max-width:37%; direction:rtl; color:var(--ink-mid)}
.kwic td.l span{direction:ltr; unicode-bidi:bidi-override}
.kwic td.m{text-align:center; white-space:nowrap; font-weight:700; color:var(--red); padding:7px 6px}
.kwic td.r{max-width:37%; overflow:hidden; white-space:nowrap; color:var(--ink-mid)}
.kwic td.src{white-space:nowrap; font-family:var(--ui); font-size:.76rem; color:var(--ink-faint)}
.kwic tr.click{cursor:pointer; transition:background .12s}
.kwic tr.click:hover td{background:var(--sand-soft)}
.kwic tr.open td{background:var(--sand-soft)}
.expand{font-family:var(--text); font-size:.97rem; line-height:1.65; padding:14px 18px !important;
  background:var(--sand-soft) !important; border-left:3px solid var(--red)}
.expand mark{background:var(--sand); padding:.05em .25em; border-radius:3px; font-weight:600}
.cite{font-family:var(--ui); font-size:.8rem; color:var(--ink-soft); margin-top:10px; line-height:1.5}
.cite a{color:var(--indigo)}

/* ---------- tables ---------- */
table.data{width:100%; border-collapse:collapse; font-size:.92rem}
table.data th{text-align:left; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; border-bottom:1px solid var(--line); padding:7px 9px}
table.data td{padding:7px 9px; border-bottom:1px solid var(--line-soft)}
table.data tr:last-child td{border-bottom:0}
table.data td.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.data tr.click{cursor:pointer; transition:background .12s}
table.data tr.click:hover td{background:var(--indigo-soft)}
table.data tr.sel td{background:var(--sand-soft); font-weight:600}

/* ---------- bars, cards, verdicts ---------- */
.bar{height:8px; background:var(--line-soft); border-radius:99px; overflow:hidden; min-width:52px}
.bar > i{display:block; height:100%; background:var(--indigo); border-radius:99px}
.card{border:1px solid var(--line); border-radius:12px; background:var(--paper);
  padding:17px 19px; margin-bottom:14px; box-shadow:var(--shadow)}
.card h4{margin:0 0 3px; font-size:.98rem}
.card .val{font-size:1.72rem; font-weight:680; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.card .val small{font-size:.72rem; font-weight:500; color:var(--ink-faint); letter-spacing:0}
.scale{position:relative; height:30px; margin:14px 0 8px}
.scale .track{position:absolute; top:13px; left:0; right:0; height:5px; background:var(--line-soft); border-radius:99px}
.scale .band{position:absolute; top:11px; height:9px; background:var(--sand); border-radius:99px}
.scale .med{position:absolute; top:7px; width:2px; height:17px; background:var(--indigo); border-radius:2px}
.scale .you{position:absolute; top:3px; width:3px; height:25px; background:var(--red); border-radius:2px}
.scale .lab{position:absolute; top:-4px; font-size:.7rem; font-weight:700; color:var(--red);
  transform:translateX(-50%); white-space:nowrap}
.flag{display:inline-block; font-size:.74rem; padding:3px 10px; border-radius:99px; font-weight:650}
.flag.ok{background:var(--indigo-soft); color:var(--indigo-deep)}
.flag.low,.flag.high{background:var(--red-soft); color:var(--red)}
.flag.na{background:var(--line-soft); color:var(--ink-faint)}

/* ---------- bits ---------- */
.tag{display:inline-block; font-size:.72rem; padding:2px 9px; border-radius:99px; margin:0 4px 3px 0;
  background:var(--line-soft); color:var(--ink-soft); white-space:nowrap; font-weight:500}
.tag.fn{background:var(--indigo-soft); color:var(--indigo-deep)}
.tag.th{background:var(--sand-soft); color:#7a5a1e}
.loading{padding:44px; text-align:center; color:var(--ink-soft)}
.spinner{display:inline-block; width:15px; height:15px; border:2px solid var(--line);
  border-top-color:var(--indigo); border-radius:50%; animation:spin .75s linear infinite; vertical-align:-2px; margin-right:9px}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:34px; text-align:center; color:var(--ink-faint); font-style:italic}
.hint{background:var(--sand-soft); border-left:3px solid var(--sand); border-radius:0 8px 8px 0;
  padding:12px 16px; font-size:.91rem; color:var(--ink-mid); margin:16px 0}
ul.clean{list-style:none; padding:0; margin:0}
ul.clean li{padding:8px 0; border-bottom:1px solid var(--line-soft)}
ul.clean li:last-child{border-bottom:0}
dl.defs dt{font-weight:650; margin-top:17px; color:var(--ink)}
dl.defs dd{margin:4px 0 0; color:var(--ink-mid)}
.prose{font-family:var(--text); font-size:1.04rem; line-height:1.68}
.prose h2,.prose h3{font-family:var(--ui)}

/* discipline cards (landing) */
a.disc{display:block; border:1px solid var(--line); border-radius:12px; background:var(--paper);
  padding:20px 22px; margin-bottom:15px; box-shadow:var(--shadow); color:inherit;
  transition:transform .12s, box-shadow .18s, border-color .18s}
a.disc:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:var(--sand-line); color:inherit}
a.disc h3{margin:0 0 5px; color:var(--indigo)}
a.disc:hover h3{color:var(--red)}
.disc.soon{opacity:.72; border-style:dashed; box-shadow:none}
.stats{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px}
.stats span{font-size:.76rem; background:var(--sand-soft); color:#7a5a1e; padding:3px 10px; border-radius:99px; font-weight:500}

footer.site{border-top:1px solid var(--line); background:var(--paper); padding:26px 0; margin-top:20px;
  font-size:.85rem; color:var(--ink-soft)}
footer.site a{color:var(--ink-mid)}
footer.site .wrap{display:flex; gap:18px; flex-wrap:wrap; align-items:baseline}

/* expanded concordance row wrapper */
tr.exp > td{padding:0 !important}