/* ============================================================
   AJSS — shared stylesheet
   Single source of truth for tokens, layout, and components.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Colour */
  --black:#000;
  --ink:#141414;
  --muted:#555;
  --paper:#fff;
  --band:#f4f4f4;
  --rule:#d9d9d9;
  --red:#a30000;
  --red-dark:#7d0000;
  --link:#14263a;

  /* Type */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Layout */
  --wrap:70rem;
  --gutter:1.25rem;
  --radius:2px;

  /* Motion */
  --speed:.15s;
}

@media (prefers-color-scheme:dark){
  :root{
    --ink:#f1f1f1;
    --muted:#b3b3b3;
    --paper:#0d0d0d;
    --band:#1a1a1a;
    --rule:#333;
    --red:#e05252;
    --red-dark:#c73e3e;
    --link:#a9c4e8;
  }
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-padding-top:1rem;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:1rem/1.65 var(--sans);
  padding-top:env(safe-area-inset-top,0);
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.2;
  margin:0;
}

a{color:var(--link)}

a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:3px solid var(--red);
  outline-offset:2px;
}

img{max-width:100%;height:auto;display:block}

/* ---------- Layout helpers ---------- */
.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* Interior-page main content. Uses `main.wrap` so the top padding
   wins over the `.wrap` shorthand above, giving interior pages a
   larger gap between the page-head band and the first section. */
main.wrap{
  padding:clamp(3rem,6vw,4.5rem) var(--gutter) 4rem;
}

.skip{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--ink);
  color:var(--paper);
  padding:.5rem 1rem;
}
.skip:focus{left:0;z-index:10}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  margin-top:.5rem;
  background:var(--red);
  color:#fff;
  padding:.7rem 1.2rem;
  font:600 .95rem/1 var(--sans);
  text-decoration:none;
  border:0;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--speed) ease;
}
.btn:hover,
.btn:focus-visible{background:var(--red-dark)}

@media (prefers-color-scheme:dark){
  .btn{color:#0d0d0d}
  .btn:hover,
  .btn:focus-visible{background:var(--red-dark);color:#0d0d0d}
}

/* ============================================================
   HEADER / MASTHEAD
   ============================================================ */

.masthead{
  background:var(--black);
  color:#fff;
}
.masthead .wrap{
  padding-top:clamp(2rem,5vw,3rem);
  padding-bottom:clamp(1.5rem,3vw,2rem);
}

.masthead a.masthead-title{
  display:inline-block;
  color:#fff;
  text-decoration:none;
}
.masthead .title{
  font:700 clamp(1.8rem,4.5vw,2.8rem)/1.1 var(--serif);
  letter-spacing:-.005em;
  max-width:38rem;
}

/* Short red rule between title and subtitle */
.masthead-rule{
  border:0;
  width:2.5rem;
  height:2px;
  background:var(--red);
  margin:1rem 0 .9rem;
}

.masthead .sub{
  margin:0;
  font-size:clamp(.95rem,1.6vw,1.05rem);
  color:rgba(255,255,255,.78);
  max-width:42rem;
  line-height:1.5;
}

/* Nav sits inside the black block, separated by a hairline */
.masthead nav{
  border-top:1px solid rgba(255,255,255,.18);
}
.masthead nav .wrap{
  padding-top:0;
  padding-bottom:0;
}
.masthead nav ul{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}
.masthead nav a{
  display:block;
  padding:.9rem 1.5rem .9rem 0;
  color:#fff;
  text-decoration:none;
  font-size:.95rem;
  border-bottom:3px solid transparent;
  transition:border-color var(--speed) ease;
}
.masthead nav a:hover,
.masthead nav a:focus-visible,
.masthead nav a[aria-current="page"]{border-color:var(--red)}

/* Focus rings on the black header should be white for contrast */
.masthead a:focus-visible{outline-color:#fff}

/* ============================================================
   PAGE HEAD (interior pages)
   ============================================================ */

.pagehead{
  background:var(--band);
  border-bottom:1px solid var(--rule);
  padding:clamp(2rem,5vw,3rem) 0;
}
.pagehead h1{
  font-size:clamp(1.9rem,4vw,2.6rem);
  margin-bottom:.75rem;
}
.pagehead p{
  margin:0;
  max-width:40rem;
  font:1.125rem/1.6 var(--serif);
}

/* ============================================================
   SECTIONS & HEADINGS
   ============================================================ */

section{margin-bottom:3rem}

h2.sec{
  font-size:1.6rem;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--black);
  margin-bottom:1.25rem;
}
@media (prefers-color-scheme:dark){
  h2.sec{border-color:var(--rule)}
}

/* Section eyebrow — small red kicker above an h2 */
.eyebrow{
  margin:0 0 .35rem;
  font:600 .78rem/1 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
}

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* --- Hero --- */
.intro{
  padding:clamp(3rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,3.5rem);
}
.intro .wrap{display:grid;gap:2.5rem 4rem}
.intro h1{
  font-size:clamp(1.8rem,3.8vw,2.6rem);
  margin-bottom:1rem;
  max-width:34rem;
}
.intro p{
  max-width:38rem;
  margin:0 0 1rem;
  font-family:var(--serif);
  font-size:1.125rem;
}
.intro .lead{font-size:1.2rem;line-height:1.55}
.intro .meta-links{
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--muted);
}
.intro .meta-links a{color:var(--link)}
@media (min-width:56rem){
  .intro .wrap{grid-template-columns:1.3fr 1fr}
}

/* --- Fact list --- */
dl.facts{
  margin:0;
  border-top:2px solid var(--black);
}
@media (prefers-color-scheme:dark){
  dl.facts{border-color:var(--rule)}
}
dl.facts div{
  display:grid;
  grid-template-columns:8.5rem 1fr;
  gap:1rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--rule);
  font-size:.95rem;
}
dl.facts dt{color:var(--muted)}
dl.facts dd{margin:0}

/* --- Call for papers --- */
.cfp{
  background:var(--band);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:clamp(2.5rem,5vw,3.5rem) 0;
  margin-bottom:0;
}
.cfp .wrap{display:grid;gap:1.5rem 4rem}
.cfp h2{font-size:1.6rem;margin-bottom:.35rem}
.cfp p{margin:0 0 1rem;max-width:42rem}
.cfp .side{
  border-left:3px solid var(--red);
  padding-left:1.25rem;
  align-self:start;
}
.cfp .side strong{
  display:block;
  font:700 1.5rem/1.2 var(--serif);
  margin-bottom:.25rem;
}
.label{
  margin:0 0 .5rem;
  font-size:.9rem;
  font-weight:600;
  color:var(--red);
}
.label .label-sub{
  display:block;
  font-weight:400;
  color:var(--muted);
  font-size:.9rem;
  margin-top:.15rem;
}
@media (min-width:56rem){
  .cfp .wrap{grid-template-columns:1.6fr 1fr}
}

/* --- Latest articles list --- */
.articles{
  padding:clamp(2.5rem,5vw,3.5rem) 0;
  margin-bottom:0;
}
.head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:.5rem 2rem;
  border-bottom:2px solid var(--black);
  padding-bottom:.6rem;
  margin-bottom:.5rem;
}
@media (prefers-color-scheme:dark){
  .head{border-color:var(--rule)}
}
.head h2{font-size:1.5rem}

.list{list-style:none;margin:0;padding:0}
.list li{
  padding:1.1rem 0 1.1rem .9rem;
  border-bottom:1px solid var(--rule);
  border-left:3px solid transparent;
  margin-left:-.9rem;
  transition:border-color var(--speed) ease;
}
.list li:hover{border-left-color:var(--red)}
.list .kicker{
  margin:0 0 .25rem;
  font:600 .75rem/1 var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red);
}
.list a.t{
  font:700 1.2rem/1.35 var(--serif);
  color:var(--ink);
  text-decoration:none;
}
.list a.t:hover,
.list a.t:focus-visible{
  color:var(--red);
  text-decoration:underline;
}
.list .byline{
  margin:.3rem 0 0;
  font-size:.92rem;
  color:var(--muted);
}

/* --- Issues / archive strip --- */
.more{
  background:var(--band);
  border-top:1px solid var(--rule);
  padding:clamp(2.5rem,5vw,3.5rem) 0;
  margin-bottom:0;
}
.more .wrap{display:grid;gap:2.5rem 4rem}
.more h2{font-size:1.25rem;margin-bottom:.75rem}
.more ul{list-style:none;margin:0;padding:0}
.more li{padding:.5rem 0;border-bottom:1px solid var(--rule)}
.more .n{color:var(--muted);font-size:.9rem}
@media (min-width:48rem){
  .more .wrap{grid-template-columns:1fr 1fr}
}

/* ============================================================
   EVENTS PAGE
   ============================================================ */

h3.year{
  font-size:1.15rem;
  color:var(--muted);
  margin:2rem 0 .25rem;
}
h3.year:first-of-type{margin-top:.5rem}

.events{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}
.events li{
  display:grid;
  gap:.15rem 2rem;
  padding:1rem 0;
  border-bottom:1px solid var(--rule);
}
.events .when{font-size:.95rem;color:var(--muted)}
.events .where{font-size:.95rem;color:var(--muted)}
.events a{
  font:700 1.15rem/1.35 var(--serif);
  color:var(--ink);
  text-decoration:none;
}
.events a:hover,
.events a:focus-visible{
  color:var(--red);
  text-decoration:underline;
}
@media (min-width:48rem){
  .events li{
    grid-template-columns:13rem 1fr 15rem;
    align-items:baseline;
  }
}

/* ============================================================
   PUBLISH PAGE
   ============================================================ */

/* --- Layout + sticky TOC --- */
.layout{
  display:grid;
  gap:2rem 4rem;
  padding:2.5rem 0 4rem;
}
.toc{font-size:.92rem}
.toc h2{
  font:600 .95rem var(--sans);
  color:var(--muted);
  margin-bottom:.5rem;
}
.toc ol{
  list-style:none;
  margin:0;
  padding:0;
  border-left:2px solid var(--rule);
}
.toc a{
  display:block;
  padding:.3rem 0 .3rem .9rem;
  text-decoration:none;
  color:var(--ink);
}
.toc a:hover,
.toc a:focus-visible{
  color:var(--red);
  text-decoration:underline;
}
@media (min-width:60rem){
  .layout{grid-template-columns:14rem minmax(0,1fr)}
  .toc{position:sticky;top:1.5rem;align-self:start}
}

/* --- Article body --- */
article section{margin-bottom:3rem}
article h2{
  font-size:1.6rem;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--black);
  margin-bottom:1.25rem;
}
@media (prefers-color-scheme:dark){
  article h2{border-color:var(--rule)}
}
article h3{font-size:1.15rem;margin:1.75rem 0 .5rem}
article p,
article li,
article dd{max-width:44rem}
article p{margin:0 0 1rem}

.note{
  border-left:3px solid var(--red);
  padding:.1rem 0 .1rem 1rem;
  color:var(--muted);
  font-size:.95rem;
}

/* --- Steps timeline --- */
.steps{
  list-style:none;
  margin:0 0 1rem;
  padding:0;
  counter-reset:s;
}
.steps li{
  counter-increment:s;
  position:relative;
  padding:0 0 1.25rem 3rem;
  border-left:2px solid var(--rule);
  margin-left:1rem;
}
.steps li:last-child{border-color:transparent;padding-bottom:0}
.steps li::before{
  content:counter(s);
  position:absolute;
  left:-1rem;
  top:0;
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:var(--black);
  color:#fff;
  font:700 .95rem/2rem var(--serif);
  text-align:center;
}
@media (prefers-color-scheme:dark){
  .steps li::before{background:var(--red);color:#0d0d0d}
}
.steps strong{font-family:var(--serif);font-size:1.1rem}
.steps .t{color:var(--muted);font-size:.9rem}

/* --- Templates grid --- */
.docs{
  list-style:none;
  margin:0 0 1rem;
  padding:0;
  display:grid;
  gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.docs a{
  display:block;
  padding:.8rem 1rem;
  border:1px solid var(--rule);
  text-decoration:none;
  font-weight:600;
}
.docs a:hover,
.docs a:focus-visible{background:var(--band)}

/* --- Submission types --- */
dl.types dt{
  font:700 1.05rem var(--serif);
  margin-top:1.1rem;
}
dl.types dd{margin:.2rem 0 0}

/* --- Plain bullet list --- */
ul.plain{margin:0 0 1rem;padding-left:1.2rem}

/* ============================================================
   PUBLICATIONS PAGE
   ============================================================ */

/* --- Current issue list --- */
.pubs{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}
.pubs li{
  padding:1.25rem 0 1.25rem .9rem;
  border-bottom:1px solid var(--rule);
  border-left:3px solid transparent;
  margin-left:-.9rem;
  transition:border-color var(--speed) ease;
}
.pubs li:hover{border-left-color:var(--red)}
.pubs .tag{
  margin:0 0 .35rem;
  font:600 .75rem/1 var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red);
}
.pubs a.title{
  font:700 1.2rem/1.35 var(--serif);
  color:var(--ink);
  text-decoration:none;
}
.pubs a.title:hover,
.pubs a.title:focus-visible{
  color:var(--red);
  text-decoration:underline;
}
.pubs .byline{
  margin:.35rem 0 0;
  font-size:.92rem;
  color:var(--muted);
}

/* --- Archive band --- */
.archive{
  background:var(--band);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:clamp(2.5rem,5vw,3.5rem) 0;
  margin-bottom:0;
}
.archive h2.sec{
  border-bottom-color:var(--black);
  margin-bottom:1.5rem;
}
@media (prefers-color-scheme:dark){
  .archive h2.sec{border-bottom-color:var(--rule)}
}
.archive-grid{
  display:grid;
  gap:2rem 4rem;
  grid-template-columns:1fr;
}
@media (min-width:48rem){
  .archive-grid{grid-template-columns:1fr 1fr}
}
.archive h3{
  font-size:1.05rem;
  margin:0 0 .75rem;
  color:var(--muted);
  font-weight:600;
  font-family:var(--sans);
}
.archive ul{
  list-style:none;
  margin:0;
  padding:0;
}
.archive li{
  padding:.55rem 0;
  border-bottom:1px solid var(--rule);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
}
.archive li:last-child{border-bottom:0}
.archive a{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
}
.archive a:hover,
.archive a:focus-visible{
  color:var(--red);
  text-decoration:underline;
}
.archive .n{
  color:var(--muted);
  font-size:.88rem;
  white-space:nowrap;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* --- Prose --- */
.prose p{
  max-width:44rem;
  margin:0 0 1rem;
}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--link)}

/* --- Board grid --- */
.board{
  display:grid;
  gap:2rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin-top:.5rem;
}
.person{
  display:grid;
  gap:.75rem;
}
.person .photo{
  width:100%;
  aspect-ratio:4 / 5;
  background:var(--band);
  border:1px solid var(--rule);
  overflow:hidden;
}
.person .photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.person .role{
  margin:0;
  font:600 .75rem/1 var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red);
}
.person .name{
  margin:0;
  font:700 1.15rem/1.3 var(--serif);
}
.person .bio{
  margin:.25rem 0 0;
  font-size:.95rem;
  color:var(--ink);
  line-height:1.55;
}

/* --- Editorial team group photo --- */
.team-photo{
  margin:1.5rem 0 0;
  border:1px solid var(--rule);
  background:var(--band);
  overflow:hidden;
  max-width:52rem;
}
.team-photo img{
  width:100%;
  height:auto;
}

/* ============================================================
   VACANCIES PAGE — shared callout
   ============================================================ */

.empty{
  border:1px solid var(--rule);
  background:var(--band);
  padding:1.25rem 1.5rem;
  max-width:44rem;
}
.empty p{margin:0 0 .5rem}
.empty p:last-child{margin:0}

/* ============================================================
   FOOTER
   ============================================================ */

footer{
  background:var(--black);
  color:#fff;
  padding:2.5rem 0 calc(2rem + env(safe-area-inset-bottom,0));
}
footer .wrap{
  display:grid;
  gap:2rem 4rem;
  font-size:.92rem;
}
footer h2{font-size:1.05rem;margin-bottom:.5rem}
footer p{margin:0 0 .5rem;opacity:.9;max-width:34rem}
footer a{color:#fff}
footer form{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.5rem;
}
footer label{position:absolute;left:-999px}
footer input{
  flex:1 1 13rem;
  padding:.65rem .9rem;
  font:inherit;
  border:0;
  border-radius:var(--radius);
  background:#fff;
  color:#141414;
}
footer .btn{margin:0}
footer a:focus-visible,
footer input:focus-visible,
footer button:focus-visible,
.masthead a:focus-visible{outline-color:#fff}

.small{font-size:.82rem;opacity:.75}

@media (min-width:48rem){
  footer .wrap{grid-template-columns:1.2fr 1fr}
}

/* ============================================================
   PRINT
   ============================================================ */

@media print{
  header,
  footer,
  .skip,
  .toc,
  .btn{display:none}
  body{font-size:11pt}
  a[href]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
  .wrap{max-width:none;padding:0}
  .archive{background:transparent;border:0;padding:0}
  .more{background:transparent;border:0}
}