/* courtcommandershu.com — journal system
   Spectral (headings + body) / Karla (labels, captions, UI)
   ink #221F1C · paper #FAF6EF · secondary #88807A · accent rust #B4502E */

:root{
  --ink:#221F1C;
  --paper:#FAF6EF;
  --muted:#88807A;
  --rust:#B4502E;
  --rule:#D8D0C4;
  --measure:74ch;
  --gap:2.75rem;
  --margin-col:13.5rem;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.66;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

.shell{
  max-width:66rem;
  margin:0 auto;
  padding:0 1.75rem 4.5rem;
}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{border-bottom-color:var(--rust);color:var(--rust)}

/* ---- the double rule: one heavy over one hairline ---- */
.doublerule{
  border:0;
  height:0;
  margin:0;
  border-top:3px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding-top:3px;
}
.doublerule--rust{border-top-color:var(--rust);border-bottom-color:var(--rust)}
.doublerule--thin{border-top-width:2px}

/* ---------------- masthead ---------------- */
.masthead{padding:2.9rem 0 0}
.masthead__volume{
  font-family:"Karla",system-ui,sans-serif;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rust);
  text-align:center;
  margin:0 0 1.1rem;
}
.masthead__title{
  font-family:"Spectral",serif;
  font-weight:400;
  font-size:clamp(2.1rem,6.2vw,3.7rem);
  line-height:1.04;
  letter-spacing:.005em;
  text-align:center;
  margin:0;
}
.masthead__title a{border:0}
.masthead__strap{
  font-style:italic;
  color:var(--muted);
  text-align:center;
  font-size:1.02rem;
  margin:.55rem 0 1.5rem;
}
.masthead .doublerule{margin-bottom:0}

/* justified single-row category line */
.masthead__nav{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:.85rem .1rem .8rem;
  border-bottom:1px solid var(--ink);
}
.masthead__nav a{
  font-family:"Karla",system-ui,sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  border:0;
  color:var(--ink);
  flex:1 1 auto;
  text-align:center;
}
.masthead__nav a:first-child{text-align:left}
.masthead__nav a:last-child{text-align:right}
.masthead__nav a[aria-current="page"]{color:var(--rust)}
.masthead__nav a:hover{color:var(--rust)}

/* ---------------- section break ---------------- */
.section{margin:3.6rem 0 0}
.section__rule{margin-bottom:1.15rem}
.section__kicker{
  font-family:"Karla",system-ui,sans-serif;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 .5rem;
}
.section__title{
  font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.1rem);
  line-height:1.15;
  margin:0 0 1.4rem;
}

/* ---------------- two-column journal layout ---------------- */
.journal{
  display:grid;
  grid-template-columns:1fr var(--margin-col);
  column-gap:var(--gap);
  align-items:start;
}
.journal__main{min-width:0;max-width:var(--measure)}
.journal__margin{min-width:0;padding-top:.35rem}

.annot{
  font-family:"Karla",system-ui,sans-serif;
  font-size:.78rem;
  line-height:1.55;
  color:var(--muted);
  border-top:1px solid var(--rule);
  padding-top:.55rem;
}
.annot + .annot{margin-top:1.15rem}
.annot__num{
  display:block;
  color:var(--rust);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.12em;
  margin-bottom:.35rem;
}
.annot__label{
  display:block;
  color:var(--ink);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.68rem;
  margin-bottom:.3rem;
}
.annot ul{list-style:none;margin:0;padding:0}
.annot li{margin:0 0 .22rem}
.annot li::before{content:"— ";color:var(--rust)}

sup.fn{
  font-family:"Karla",system-ui,sans-serif;
  color:var(--rust);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.05em;
  vertical-align:super;
  margin-left:.15em;
}

/* drop cap */
.dropcap::first-letter{
  float:left;
  font-family:"Spectral",serif;
  font-weight:400;
  font-size:3.35em;
  line-height:.82;
  padding:.06em .12em 0 0;
  color:var(--ink);
}

p{margin:0 0 1.05rem}
.lede{font-size:1.1rem}
.justify{text-align:justify;hyphens:auto}

/* ---------------- hero plate ---------------- */
.plate{
  border-top:3px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:3px 0;
  margin:1.9rem auto 0;
  max-width:22rem;
  width:100%;
}
.plate__inner{
  aspect-ratio:1/1;
  border:1px solid var(--rule);
  overflow:hidden;
  background:#0b1220;
}
.plate__inner img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ---------------- hotel entries ---------------- */
.entry{
  margin-top:2.7rem;
  padding-top:1.6rem;
  border-top:1px solid var(--rule);
}
.entry:first-of-type{border-top:0;padding-top:0}
.entry__name{
  font-weight:400;
  font-size:clamp(1.35rem,2.8vw,1.72rem);
  line-height:1.2;
  margin:0 0 .2rem;
}
.entry__sub{
  font-family:"Karla",system-ui,sans-serif;
  font-size:.72rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1rem;
}

/* category list on home */
.cat__name{font-weight:400;font-size:1.42rem;margin:0 0 .35rem;line-height:1.2}
.cat__name a{border:0}
.cat{margin-top:2.3rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.cat:first-of-type{border-top:0;padding-top:0;margin-top:0}

/* ---------------- colophon footer ---------------- */
.colophon{
  margin-top:4.6rem;
  padding-top:3px;
  border-top:3px solid var(--ink);
  border-bottom:0;
  text-align:center;
}
.colophon__inner{
  border-top:1px solid var(--ink);
  padding:2rem 0 0;
  max-width:40rem;
  margin:0 auto;
}
.colophon__name{
  font-size:1.25rem;
  margin:0 0 .3rem;
}
.colophon__line{
  font-family:"Karla",system-ui,sans-serif;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--rust);
  margin:0 0 1.1rem;
}
.colophon__links{
  font-family:"Karla",system-ui,sans-serif;
  font-size:.76rem;
  letter-spacing:.06em;
  color:var(--muted);
  line-height:2.1;
  margin:0 0 1.1rem;
}
.colophon__links a{border:0;color:var(--ink)}
.colophon__links a:hover{color:var(--rust)}
.colophon__links span{
  color:var(--rust);
  padding:0 .55rem;
  font-weight:400;
}
.colophon__note{
  font-family:"Karla",system-ui,sans-serif;
  font-size:.72rem;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

/* ---------------- single-column legal pages ---------------- */
.plain{max-width:var(--measure);margin:0 auto}
.plain h2{font-weight:400;font-size:1.3rem;margin:2.2rem 0 .6rem}
.plain ul{padding-left:1.15rem;margin:0 0 1.05rem}
.plain li{margin:0 0 .35rem}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  :root{--margin-col:11rem;--gap:1.9rem}
}
@media (max-width:720px){
  body{font-size:16px}
  .journal{grid-template-columns:1fr;row-gap:1.4rem}
  .journal__margin{
    border-top:1px solid var(--rule);
    padding-top:1rem;
  }
  .annot{border-top:0;padding-top:0}
  .annot + .annot{margin-top:1rem}
  .masthead__nav{flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem}
  .masthead__nav a,
  .masthead__nav a:first-child,
  .masthead__nav a:last-child{flex:0 0 auto;text-align:center}
  .justify{text-align:left;hyphens:manual}
  .plate{max-width:16.5rem}
}