@font-face{
  font-family:"EB Garamond";
  src:url("assets/fonts/ebgaramond-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("assets/fonts/ebgaramond-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("assets/fonts/ebgaramond-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}

/* charmigi — a dictionary plate */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow:hidden;
  background:#000;color:#c8c8c8;
  font-family:"EB Garamond",Garamond,"Iowan Old Style",Palatino,"Book Antiqua",Georgia,serif;
  font-size:13px;line-height:1.55;
  font-variant-ligatures:common-ligatures;
  -webkit-font-smoothing:antialiased;
}
/* damask wallpaper, barely there */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("assets/tile.jpg") repeat center center;
  background-size:380px auto;
  filter:grayscale(1) brightness(var(--tile-bright,.55)) contrast(var(--tile-contrast,1.6));
  opacity:var(--tile-opacity,.12);
}
a{color:#c8c8c8;text-decoration:none}
a:hover{color:#fff}

.screen{
  height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:24px;position:relative;z-index:1;
}

/* the plate */
.entry{
  position:relative;
  width:min(470px,100%);
  padding:20px 26px 14px;
  border:1px solid #2e2e2e;
  box-shadow:inset 0 0 0 4px #000, inset 0 0 0 5px #1e1e1e;
  background:#000;
}

/* headword */
.head{
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:0 7px;margin:0;
}
.word{
  font-size:26px;font-weight:400;color:#f4f4f4;
  letter-spacing:.22em;text-transform:uppercase;
  font-feature-settings:"smcp" 1;
  line-height:1.15;
}
.pron{font-style:italic;font-size:12px;color:#8a8a8a;letter-spacing:.02em}
.pos{font-style:italic;font-size:12px;color:#8a8a8a}

.etym{margin:8px 0 0;font-size:12px;color:#6f6f6f;letter-spacing:.03em}
.etym .lbl{color:#8f8f8f;letter-spacing:.10em;text-transform:uppercase;font-size:10px}
.etym i{color:#9a9a9a}

/* ornamental rule: hairline with centred lozenge */
.rule{
  position:relative;height:1px;background:#2a2a2a;
  margin:11px 0 13px;
}
.rule::after{
  content:"";position:absolute;left:50%;top:50%;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  background:#8a8a8a;transform:rotate(45deg);
}

/* definitions */
.defs{
  margin:0;padding-left:18px;font-size:13px;line-height:1.5;
}
.defs li{margin:0 0 9px;padding-left:1px}
.defs li::marker{
  color:#7d7d7d;font-size:12px;font-weight:600;
  font-feature-settings:"lnum" 1;
}
.defs i{color:#a8a8a8}

/* works */
.works{
  list-style:none;margin:9px 0 0;padding:0 0 0 20px;
  display:grid;grid-template-columns:auto 1fr;
  column-gap:16px;row-gap:7px;align-items:baseline;
}
.works li{display:contents}
.works a{display:contents}
.pname{
  color:#ececec;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;
  text-decoration:underline;
  text-decoration-color:#585858;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.pdesc{font-size:13px;color:#b0b0b0;line-height:1.35}
.works a:hover .pname{color:#fff;text-decoration-color:#fff}
.works a:hover .pdesc{color:#e2e2e2}

/* footer */
.foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12px;color:#767676;letter-spacing:.04em;
}
.foot a{color:#9a9a9a}
.foot a:hover{color:#fff}
.sep{color:#454545;padding:0 2px}
.maker{
  font-size:10px;color:#6f6f6f;letter-spacing:.16em;
  font-feature-settings:"smcp" 1;white-space:nowrap;
}
.maker:hover{color:#fff}

/* the rat */
.corner-rat{
  position:fixed;right:10px;bottom:12px;width:92px;height:auto;
  filter:grayscale(1);opacity:.9;
}

@media(max-width:520px){
  .entry{padding:18px 18px 12px;border-left:0;border-right:0}
  .word{font-size:21px;letter-spacing:.15em}
  .head{gap:0 6px}
  .etym{margin-top:6px}
  .works{display:block}
  .works li{display:block;margin-bottom:11px}
  .works a{display:block}
  .pname{display:block;margin-bottom:1px}
  .pdesc{display:block;line-height:1.3}
}
@media(max-width:330px){
  .entry{padding:14px 14px 10px}
  .word{font-size:19px;letter-spacing:.12em}
  .pron,.pos{font-size:11px}
  .foot{flex-wrap:wrap;gap:4px}
}