/* Rhea Castellane: concept build by Imprensa Solutions.
   Everything sits on a 32px ledger line. Vertical spacing is always a multiple of --lh. */
@font-face{font-family:"Pagella";src:url("../fonts/pagella-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Pagella";src:url("../fonts/pagella-italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Pagella";src:url("../fonts/pagella-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
:root{
  --paper:#EEF3E9; --rule:#B9CFBC; --ink:#1C2733; --soft:#4C5A64; --red:#B4424E; --white:#FBFDF9;
  --lh:32px; --date:150px; --fig:190px;
  --serif:"Pagella","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);font:400 19px/var(--lh) var(--serif);font-feature-settings:"lnum","tnum"}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--red)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.skip{position:absolute;left:-999px;background:var(--ink);color:var(--paper);padding:0 12px}
.skip:focus{left:8px;top:40px;z-index:5}
p,h1,h2{margin:0}
strong{font-weight:700}

/* The sheet: ruled lines, a double red margin and a single figure rule */
.sheet{position:relative;max-width:1120px;margin:0 auto;
  background:
    linear-gradient(var(--red),var(--red)) calc(var(--date) - 7px) 0/1px 100% no-repeat,
    linear-gradient(var(--red),var(--red)) calc(var(--date) - 2px) 0/1px 100% no-repeat,
    linear-gradient(var(--red),var(--red)) calc(100% - var(--fig)) 0/1px 100% no-repeat,
    repeating-linear-gradient(to bottom,transparent 0 calc(var(--lh) - 1px),var(--rule) calc(var(--lh) - 1px) var(--lh)) 0 -8px;
}
.head{display:grid;grid-template-columns:var(--date) 1fr var(--fig);align-items:baseline;height:calc(var(--lh)*3);padding-top:var(--lh)}
.name{grid-column:2;padding-left:20px;font-style:italic;font-size:24px;text-decoration:none}
.head nav{grid-column:2;grid-row:2;padding-left:20px;display:flex;gap:28px}
.head nav a{text-decoration:none}
.head nav a:hover{text-decoration:underline}
.head nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}
.folio{grid-column:3;grid-row:1;padding-left:16px;font-style:italic;color:var(--soft)}

.entry{display:grid;grid-template-columns:var(--date) minmax(0,1fr) var(--fig)}
.date{padding:0 24px 0 16px;color:var(--soft);font-style:italic}
.part{padding:0 28px 0 20px}
.fig{padding:0 12px 0 16px;font-style:italic}
.entry+.entry{margin-top:0}
main .entry:not(.rule):not(.cols){padding-bottom:var(--lh)}
.entry.cols{color:var(--red);font-style:italic;font-size:16px;padding-bottom:0}
.entry.cols .date,.entry.cols .fig{color:var(--red)}
.entry.rule{padding-top:var(--lh);padding-bottom:var(--lh)}
.small{font-size:16px;color:var(--soft)}

.opening{padding-top:calc(var(--lh)*2)}
h1{font-weight:400;font-size:clamp(40px,6vw,68px);line-height:calc(var(--lh)*2);letter-spacing:-.01em;max-width:17ch;margin-bottom:var(--lh)}
.opening h1{line-height:calc(var(--lh)*2.5);font-size:clamp(44px,7vw,80px)}
h2{font-weight:400;font-style:italic;font-size:32px;line-height:var(--lh)}
.lede{font-size:24px;line-height:var(--lh);margin-bottom:var(--lh);max-width:34em}
.ink{display:inline-block;font:italic 400 21px/var(--lh) var(--serif);color:var(--ink);background:none;border:0;border-bottom:2px solid var(--red);padding:0;cursor:pointer;text-decoration:none;height:var(--lh)}
.ink:hover{color:var(--red)}

/* Form: fields are written on the lines */
.write .entry{padding-bottom:0!important;height:calc(var(--lh)*2);align-items:end}
.write .entry.tall{height:calc(var(--lh)*5)}
.write .entry:last-child{height:auto;padding-top:var(--lh);padding-bottom:var(--lh)!important;align-items:start}
.write label{font-style:italic;color:var(--soft)}
.write .date{padding-right:12px;font-size:17px}
.write .entry.tall .date{align-self:start;padding-top:var(--lh)}
.write input,.write select,.write textarea{display:block;width:100%;height:var(--lh);font:400 19px/var(--lh) var(--serif);color:var(--ink);background:rgba(251,253,249,.7);border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0 6px}
.write textarea{height:calc(var(--lh)*4);resize:none;background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--lh) - 1px),var(--rule) calc(var(--lh) - 1px) var(--lh))}

.foot{margin-top:var(--lh);padding-bottom:calc(var(--lh)*2)}
.foot .entry{padding-top:var(--lh)}

@media (max-width:820px){
  :root{--date:104px;--fig:0px}
  .sheet{background:
    linear-gradient(var(--red),var(--red)) calc(var(--date) - 7px) 0/1px 100% no-repeat,
    linear-gradient(var(--red),var(--red)) calc(var(--date) - 2px) 0/1px 100% no-repeat,
    repeating-linear-gradient(to bottom,transparent 0 calc(var(--lh) - 1px),var(--rule) calc(var(--lh) - 1px) var(--lh)) 0 -8px}
  .entry{grid-template-columns:var(--date) minmax(0,1fr)}
  .fig{grid-column:2;padding-left:20px;color:var(--red)}
  .fig:empty,.entry.cols .fig{display:none}
  .head{grid-template-columns:var(--date) 1fr;height:calc(var(--lh)*4)}
  .folio{grid-column:2;grid-row:3;padding-left:20px}
  .date{padding:0 12px 0 10px;font-size:16px}
  .part{padding-right:16px}
}
@media (max-width:520px){
  :root{--date:84px}
  body{font-size:18px}
  .lede{font-size:21px}
  h2{font-size:28px}
  .head nav{gap:18px}
  .part,.name,.head nav,.folio,.fig{padding-left:14px}
}

/* Imprensa concept bar: sits outside the site's own design on purpose */
.imprensa-bar{display:flex;gap:8px 20px;justify-content:space-between;align-items:center;flex-wrap:wrap;background:#141414;color:#F2EFE8;font:400 13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;padding:9px clamp(16px,4vw,40px)}
.imprensa-bar strong{font-weight:600}
.imprensa-bar a{color:#F2EFE8;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.imprensa-bar a:focus-visible{outline:2px solid #F2EFE8;outline-offset:3px}
.demo-note{font-size:.85em;opacity:.8}