/* arinubar.com, shared styles */

:root{
  --paper:#f7f5ef; --ink:#17150f; --ink-soft:#413d33; --ink-faint:#8a8376;
  --accent:#b3122c; --rule:#dad4c6;
  --measure:34rem; --wide:38.4rem; --gutter:2.4rem;
}

*{box-sizing:border-box}

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

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 14,"SOFT" 10,"WONK" 0;
  font-size:19.5px;line-height:1.62;
}

.page{max-width:var(--wide);margin:0 auto;padding:0 clamp(1.15rem,6vw,2.2rem) 8rem}

.col{max-width:var(--measure)}

/* masthead */
header{padding:13vh 0 0;margin-bottom:3.6rem}

.name{
  font-family:"Noto Serif Armenian",serif;font-weight:600;
  font-size:clamp(1.28rem,6.1vw,2.62rem);line-height:1.1;letter-spacing:-.03em;
  margin:0 0 1.15rem;white-space:nowrap;
}

.sub{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem;
  font-family:"IBM Plex Mono",monospace;font-size:.69rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
  border-top:1px solid var(--ink);padding-top:.7rem;
}

/* prose */
p{margin:0 0 1.32rem}

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

a:hover{background:var(--accent);color:var(--paper)}

.swap{display:inline-grid;cursor:default}

.swap>span{grid-area:1/1;transition:opacity .2s;justify-self:center}

.swap .hy{opacity:0;font-family:"Noto Serif Armenian",serif;color:var(--accent);
  white-space:nowrap;font-size:.87em}

.swap:hover .en{opacity:0}

.swap:hover .hy{opacity:1}

.door{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.71rem;
  letter-spacing:.11em;text-transform:uppercase;padding-bottom:.12rem;
  margin:.2rem 0 2.6rem;
}

/* footnote mark + popover */
.mk{
  font-family:"Noto Serif Armenian",serif;color:var(--accent);
  font-size:1.15em;line-height:1;vertical-align:.28em;
  background:none;border:0;padding:0 .05em;margin-left:.08em;cursor:pointer;
  border-bottom:1px dotted var(--accent);transition:background .15s,color .15s;
}

.mk:hover,.mk:focus-visible{background:var(--accent);color:var(--paper);outline:none}

.pop{
  max-width:27rem;border:1px solid var(--ink);background:var(--paper);color:var(--ink);
  padding:1.35rem 1.45rem;font-family:"IBM Plex Mono",monospace;
  font-size:.74rem;line-height:1.7;box-shadow:0 20px 48px rgba(20,19,15,.22);
}

.pop .glyph{
  font-family:"Noto Serif Armenian",serif;color:var(--accent);font-size:1.5rem;
  display:block;line-height:1;margin-bottom:.7rem;
}

.pop::backdrop{background:rgba(20,19,15,.26)}

/* nav */
.nav{display:flex;gap:1.4rem}

.nav a{border-bottom:1px solid transparent;color:var(--ink-faint)}

.nav a:hover{background:none;color:var(--ink);border-bottom-color:var(--accent)}

/* the one section break */
.brk{
  max-width:var(--measure);margin:3.1rem 0 2.1rem;
  border-top:1px solid var(--ink);padding-top:.85rem;
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 90,"SOFT" 40,"WONK" 1;
  font-size:1.62rem;font-weight:500;letter-spacing:-.012em;color:var(--ink);
  font-style:italic;
}

/* work */
.item{
  max-width:var(--measure);margin:0 0 2.2rem;
  display:grid;grid-template-columns:2.1rem 1fr;align-items:start;
}

.num{
  font-family:"Noto Serif Armenian",serif;color:var(--accent);
  font-size:1.35rem;line-height:1.15;font-weight:400;
}

.item h3{font-size:1.08rem;font-weight:600;margin:0 0 .2rem;line-height:1.3}

.item .meta{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 .5rem}

.item p{font-size:.94rem;color:var(--ink-soft);margin:0 0 .45rem;line-height:1.55}

.links{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase}

.links a{margin-right:1.2rem}

.next{
  max-width:var(--measure);margin:2.8rem 0 0;padding-left:1.1rem;
  border-left:2px solid var(--accent);color:var(--ink-soft);font-size:1rem;line-height:1.55;
}

footer{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.9rem;
  max-width:none;
  margin-top:4.6rem;border-top:1px solid var(--ink);padding-top:.8rem;
  font-family:"IBM Plex Mono",monospace;font-size:.67rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);
}

footer em{font-style:normal;color:var(--rule);margin-right:.55rem}

footer a{color:var(--ink-faint);border-bottom:1px solid var(--rule)}

footer a:hover{background:var(--accent);color:var(--paper)}

@media (max-width:820px){
  :root{--measure:100%}
  body{font-size:18px}
  .hasnote{grid-template-columns:1fr}
  .note{margin-top:1rem}
}

:root{
  --paper:#f7f5ef; --ink:#17150f; --ink-soft:#413d33; --ink-faint:#8a8376;
  --accent:#b3122c; --rule:#dad4c6;
  --measure:34rem; --wide:38.4rem;
}

header{padding:9vh 0 0;margin-bottom:3.2rem}

.up{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem;
  font-family:"IBM Plex Mono",monospace;font-size:.69rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
  border-bottom:1px solid var(--ink);padding-bottom:.7rem;margin-bottom:2.6rem;
}

.nav{display:flex;gap:1.4rem}

h1{
  font-family:"Noto Serif Armenian",serif;font-weight:600;
  font-size:clamp(1.9rem,8.4vw,3.1rem);line-height:1.08;letter-spacing:-.032em;
  margin:0 0 .3rem;
}

h1 .en{display:block;font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 90,"SOFT" 30,"WONK" 0;
  font-size:.44em;font-weight:400;font-style:italic;color:var(--ink-faint);
  letter-spacing:-.01em;margin-top:.5rem}

p{margin:0 0 1.32rem}

.hy{font-family:"Noto Serif Armenian",serif}

code{font-family:"IBM Plex Mono",monospace;font-size:.8em;letter-spacing:.01em;
  color:var(--ink-soft);white-space:nowrap}

.u{text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1px;text-underline-offset:.2em}

h2{
  max-width:var(--measure);margin:4.4rem 0 1.8rem;
  border-top:1px solid var(--ink);padding-top:.85rem;
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 90,"SOFT" 40,"WONK" 1;
  font-size:1.62rem;font-weight:500;letter-spacing:-.012em;color:var(--ink);
  font-style:italic;
}

figure{margin:2.5rem 0 2.3rem;max-width:26rem}

figure.wide{max-width:var(--measure)}

/* Photographs. figure.ph sits at the measure, figure.ph.wide reaches the
   page gutters, which on a phone is the whole screen. */
figure.ph{margin:2.7rem 0 2.5rem;max-width:var(--measure)}

figure.ph.wide{
  max-width:none;
  margin-left:calc(-1 * clamp(1.15rem,6vw,2.2rem));
  margin-right:calc(-1 * clamp(1.15rem,6vw,2.2rem));
}

/* width:auto with a max on both axes so a tall portrait cannot eat two
   screens on a laptop, and the aspect ratio still comes from the
   width and height attributes, so nothing shifts while it loads. */
figure.ph img{
  display:block;width:auto;height:auto;max-width:100%;max-height:80vh;
  margin-inline:auto;background:var(--rule);
}

figure.ph figcaption{
  border-top:1px solid var(--rule);padding-top:.5rem;margin-top:.6rem;
  max-width:var(--measure);
}

figure.ph.wide figcaption{
  margin-left:clamp(1.15rem,6vw,2.2rem);
  margin-right:clamp(1.15rem,6vw,2.2rem);
}

.tbl{border:1px solid var(--ink);font-family:"IBM Plex Mono",monospace;display:grid}

.tbl span{
  padding:.44rem .2rem;text-align:center;font-size:.86rem;line-height:1.35;
  border-left:1px solid var(--rule);border-top:1px solid var(--rule);
}

.tbl .lab{
  border-top:0;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:.55rem;padding-bottom:.5rem;
}

.tbl .arm{font-family:"Noto Serif Armenian",serif;font-size:1.06rem}

.tbl b.arm{font-weight:400;font-size:1.15em;margin-right:.34em;color:var(--ink)}

.tbl .w{color:var(--accent)}

.tbl .no{color:var(--accent);font-size:.62rem;letter-spacing:.08em}

.tbl .ok{color:var(--ink-faint);font-size:.62rem;letter-spacing:.08em}

.tbl.k4{grid-template-columns:1fr 1fr 1fr 1fr}

.tbl.k4 span:nth-child(4n+1){border-left:0}

.tbl.p5{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}

.tbl.p5 span{padding:.44rem .12rem}

.tbl.p5 span:nth-child(5n+1){
  border-left:0;text-align:left;padding-left:.55rem;
  white-space:nowrap;font-size:clamp(.66rem,2.6vw,.88rem);
}

.tbl.p5 .lab{font-size:clamp(.43rem,1.55vw,.55rem);letter-spacing:.06em}

.tbl.p5 .no,.tbl.p5 .ok{font-size:clamp(.52rem,1.9vw,.62rem)}

.tbl.k13{grid-template-columns:2.9rem repeat(12,1fr)}

.tbl.k13 span{padding:.42rem .06rem;font-size:clamp(.66rem,2.3vw,.84rem)}

.tbl.k13 span:nth-child(13n+1){
  border-left:0;text-align:left;padding-left:.6rem;
  font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
}

.tbl.k13 .row1{font-size:.58rem;letter-spacing:.05em;color:var(--ink-faint);border-top:0}

.tbl.k13 .arm{font-size:clamp(.8rem,2.9vw,1rem)}

figcaption{
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.06em;
  color:var(--ink-faint);margin-top:.75rem;line-height:1.75;
}

.grp{
  max-width:var(--measure);margin:2.4rem 0 1rem;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
  border-bottom:1px solid var(--rule);padding-bottom:.45rem;
}

.res{max-width:var(--measure);margin:0 0 .95rem}

.res .n{font-weight:600;font-size:1rem}

.res .d{color:var(--ink-soft);font-size:.94rem;line-height:1.5;display:block;margin-top:.05rem}

.step{
  max-width:var(--measure);margin:0 0 1.7rem;
  display:grid;grid-template-columns:2.1rem 1fr;align-items:start;
}

.step .num{
  font-family:"Noto Serif Armenian",serif;color:var(--accent);
  font-size:1.3rem;line-height:1.35;font-weight:400;
}

.step p{margin:0 0 .7rem;font-size:.97rem;line-height:1.58}

.step p:last-child{margin-bottom:0}

.step strong{font-weight:600}

.lstep{
  max-width:var(--measure);margin:0 0 1.25rem;
  display:grid;grid-template-columns:1.8rem 1fr;align-items:start;
}

.lstep .n{font-family:"IBM Plex Mono",monospace;color:var(--accent);
  font-size:.7rem;letter-spacing:.06em;padding-top:.36rem}

.lstep p{margin:0;font-size:.95rem;line-height:1.55}

.lstep strong{font-weight:600}

.case{max-width:var(--measure);margin:0 0 1.5rem}

.case .h{font-weight:600;font-size:1rem}

.case .m{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-left:.55rem;vertical-align:.16em}

.case p{margin:.1rem 0 0;font-size:.95rem;line-height:1.55;color:var(--ink-soft)}

.pull{
  max-width:var(--measure);margin:2.6rem 0;padding-left:1.1rem;
  border-left:2px solid var(--accent);color:var(--ink);font-size:1.16rem;line-height:1.5;
  font-style:italic;
  font-variation-settings:"opsz" 60,"SOFT" 30,"WONK" 1;
}

footer{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.9rem;
  margin-top:5rem;border-top:1px solid var(--ink);padding-top:.8rem;
  font-family:"IBM Plex Mono",monospace;font-size:.67rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);
}

@media (max-width:820px){
  :root{--measure:100%}
  body{font-size:18px}
  figure{max-width:100%}
  .tbl.k13{grid-template-columns:repeat(12,1fr)}
  .tbl.k13 span:nth-child(13n+1){display:none}
  .tbl.k13 span:nth-child(13n+2){border-left:0}
}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 14,"SOFT" 10,"WONK" 0;
  font-size:19.5px;line-height:1.6;
}

header{padding:9vh 0 0;margin-bottom:3rem}

h1{
  font-family:"Noto Serif Armenian",serif;font-weight:600;
  font-size:clamp(1.75rem,7.4vw,2.7rem);line-height:1.1;letter-spacing:-.03em;margin:0;
}

h1 .en{display:block;font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 90,"SOFT" 30,"WONK" 0;
  font-size:.46em;font-weight:400;font-style:italic;color:var(--ink-faint);
  letter-spacing:-.01em;margin-top:.5rem}

p{margin:0 0 1.2rem}

code{font-family:"IBM Plex Mono",monospace;font-size:.8em;color:var(--ink-soft);white-space:nowrap}

h2{
  max-width:var(--measure);margin:3.6rem 0 1.5rem;
  border-top:1px solid var(--ink);padding-top:.8rem;
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 90,"SOFT" 40,"WONK" 1;
  font-size:1.5rem;font-weight:500;letter-spacing:-.012em;font-style:italic;
}

.lede{max-width:var(--measure);font-size:1.06rem;color:var(--ink-soft);margin:0 0 .4rem}

.door{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.71rem;
  letter-spacing:.11em;text-transform:uppercase;padding-bottom:.12rem;margin:.9rem 0 0;
}

.job{max-width:var(--measure);margin:0 0 2.2rem}

.job h3{font-size:1.05rem;font-weight:600;margin:0;line-height:1.3}

.job .meta{
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin:.28rem 0 .7rem;line-height:1.7;
}

.job .meta em{font-style:normal;color:var(--rule);margin:0 .45rem}

.job ul{list-style:none;margin:0;padding:0}

.job li{
  position:relative;padding-left:1.05rem;margin:0 0 .5rem;
  font-size:.95rem;line-height:1.55;color:var(--ink-soft);
}

.job li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.42rem;height:1px;background:var(--accent);
}

.job li strong{font-weight:600;color:var(--ink)}

.job > p{font-size:.95rem;line-height:1.55;color:var(--ink-soft);margin:0 0 .5rem}

.kv{max-width:var(--measure);display:grid;grid-template-columns:7.2rem 1fr;gap:.55rem 1rem;margin:0 0 .4rem}

.kv dt{
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);padding-top:.3rem;
}

.kv dd{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-soft)}

footer{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.9rem;
  margin-top:4.6rem;border-top:1px solid var(--ink);padding-top:.8rem;
  font-family:"IBM Plex Mono",monospace;font-size:.67rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);
}

@media (max-width:820px){
  :root{--measure:100%}
  body{font-size:18px}
  .kv{grid-template-columns:1fr;gap:.15rem}
  .kv dt{padding-top:.5rem}
}

/* --- additions for /about and /notes --- */
h1.lat{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 120,"SOFT" 40,"WONK" 1;
  font-weight:500;letter-spacing:-.028em;
}
.entry-list{max-width:var(--measure);margin:0}
.entry-item{margin:0 0 2.1rem}
.entry-item .date{
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:.3rem;
}
.entry-item h3{font-size:1.22rem;font-weight:500;margin:0 0 .35rem;line-height:1.25;
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 60,"SOFT" 30,"WONK" 1}
.entry-item h3 a{border-bottom:1px solid var(--accent)}
.entry-item p{font-size:.97rem;line-height:1.55;color:var(--ink-soft);margin:0;max-width:var(--measure)}
.soon{
  max-width:var(--measure);margin:2.6rem 0 0;padding-top:.8rem;border-top:1px solid var(--rule);
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.08em;
  color:var(--ink-faint);line-height:1.8;
}
article p:first-of-type{font-size:1.06rem}

/* --- /translate --- */
.tr{max-width:var(--measure);margin:2.4rem 0 0}

.dir{
  display:flex;align-items:center;gap:.9rem;
  border-bottom:1px solid var(--ink);padding-bottom:.6rem;margin-bottom:1.1rem;
}

.dir .side{display:flex;align-items:baseline;gap:.5rem;flex:1;min-width:0}

.dir .side:last-child{justify-content:flex-end;text-align:right}

.dir .num{font-size:1.1rem;line-height:1;flex:none}

.dir .lang{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Plex Mono has no Armenian, so the Armenian label needs the display face */
.dir .lang.hy{
  font-family:"Noto Serif Armenian",serif;
  font-size:.86rem;letter-spacing:0;text-transform:none;
}

.swapdir{
  flex:none;background:none;border:1px solid var(--rule);color:var(--ink-faint);
  font-size:.9rem;line-height:1;padding:.3rem .5rem;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}

.swapdir:hover,.swapdir:focus-visible{
  background:var(--accent);color:var(--paper);border-color:var(--accent);outline:none;
}

.ta{
  display:block;width:100%;box-sizing:border-box;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);border-radius:0;
  padding:.85rem .95rem;margin:0;
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 14,"SOFT" 10,"WONK" 0;
  font-size:1rem;line-height:1.55;
  resize:vertical;min-height:8.2rem;
}

.ta:focus{outline:none;border-color:var(--accent)}

.ta.hy{font-family:"Noto Serif Armenian",serif;font-size:1.02rem;line-height:1.7}

.ta::placeholder{color:var(--ink-faint);opacity:1}

.out{
  border-color:var(--rule);color:var(--ink-soft);
  margin-top:1.1rem;white-space:pre-wrap;overflow-wrap:break-word;
}

.out:empty{display:none}

.out.wait{color:var(--ink-faint);font-style:italic}

.ctl{display:flex;align-items:center;gap:1rem;margin-top:.85rem;flex-wrap:wrap}

.go{
  background:none;border:1px solid var(--ink);color:var(--ink);
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.5rem .95rem;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}

.go:hover,.go:focus-visible{background:var(--accent);color:var(--paper);border-color:var(--accent);outline:none}

.go[disabled]{border-color:var(--rule);color:var(--ink-faint);cursor:default;background:none}

.stat{
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);
}

.stat .dot{color:var(--accent)}

.fb{display:flex;align-items:center;gap:.6rem;margin-top:.9rem;flex-wrap:wrap}

.fbl{
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin-right:.2rem;
}

.rt{
  background:none;border:0;border-bottom:1px solid var(--rule);color:var(--ink-soft);
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;padding:.12rem .1rem;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}

.rt:hover,.rt:focus-visible{background:var(--accent);color:var(--paper);border-color:var(--accent);outline:none}

.rt[disabled]{color:var(--ink-faint);border-bottom-color:transparent;cursor:default;background:none}

.fine{
  max-width:var(--measure);margin:2.4rem 0 0;
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.02em;
  line-height:1.85;color:var(--ink-faint);
}

.fine a{color:var(--ink-faint);border-bottom:1px solid var(--rule)}

.fine a:hover{background:var(--accent);color:var(--paper)}

.ver{
  max-width:var(--measure);margin:.9rem 0 1.4rem;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.7;
}

/* collapsible blocks: parameters, and the note about the model */
.opt{max-width:var(--measure);margin:1.6rem 0 0;border-top:1px solid var(--rule)}

.opt.wide{margin-top:3rem}

.opt summary{
  list-style:none;cursor:pointer;padding:.7rem 0 0;
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);
}

.opt summary::-webkit-details-marker{display:none}

.opt summary::before{content:"+";color:var(--accent);margin-right:.6rem;font-size:.8rem}

.opt[open] summary::before{content:"\2212"}

.opt summary:hover{color:var(--ink)}

.optb{padding:1.05rem 0 .3rem}

.opt-row{
  display:grid;grid-template-columns:2.4rem 1fr;align-items:start;
  gap:.2rem;margin:0 0 .95rem;cursor:pointer;
}

.opt-row > span{font-size:.92rem;line-height:1.45;color:var(--ink)}

.opt-row em{
  display:block;font-style:normal;color:var(--ink-faint);
  font-size:.83rem;line-height:1.5;margin-top:.1rem;
}

.opt-row input[type=checkbox]{
  width:.92rem;height:.92rem;margin:.24rem 0 0;accent-color:var(--accent);cursor:pointer;
}

.opt-row select{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
  padding:.1rem .15rem;margin-top:.1rem;cursor:pointer;
}

.optb.prose p{font-size:.94rem;line-height:1.6;color:var(--ink-soft);margin:0 0 .95rem}

.optb.prose .links{margin-top:1.1rem}

/* colophon: the funders, credited the way a book credits its printer */
.colophon{
  max-width:var(--measure);margin:2.9rem 0 0;
  border-top:1px solid var(--rule);padding-top:.85rem;
}

.colophon .lab{
  display:block;margin-bottom:1.3rem;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* centred, with the wide wordmark in the middle so the row balances */
.marks{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  justify-content:center;gap:2.1rem;flex-wrap:wrap}

.marks li{margin:0;display:flex;align-items:center}

.marks a{border-bottom:0;display:block}

.marks a:hover{background:none}

/* The marks ship on white, so multiply drops their boxes into the paper.
   They are otherwise unaltered: the two emblems carry detail that does not
   survive being flattened, and funders tend to require true colour anyway.
   The Gulbenkian asset was the knockout variant, white on white here, and is
   recoloured to --ink in the file itself. */
.marks img{display:block;width:auto;mix-blend-mode:multiply}

/* balanced by optical weight, since one is a wordmark and two are emblems */
.marks .emblem{height:2.55rem}

.marks .wordmark{height:1.4rem}

@media (max-width:820px){
  .dir{gap:.6rem}
  .dir .lang{font-size:.6rem;letter-spacing:.08em}
  .marks{gap:1.5rem}
  .marks .emblem{height:2.2rem}
  .marks .wordmark{height:1.2rem}
}