@font-face{
  font-family: "PixelAE";
  src: url("assets/fonts/PixelAE.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Dico";
  src: url("assets/fonts/Dico.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "PerfectDOS";
  src: url("assets/fonts/PerfectDOS.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Alagard";
  src: url("assets/fonts/alagard.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root{
  --bg: #000000;
  --text: #e9e9ee;
  --muted: #a9a9b2;
  --accent: #b0001c; /* deep red */
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

.page{
  width: min(520px, 90vw);
  margin: 0 auto;
  padding: 38px 0 22px;
}

/* type */
.title, .section-title{
  font-family: "Alagard", monospace;
  letter-spacing: 1px; /* optional */
}

.title{
  font-family: "Alagard", monospace;
  font-weight: 400;

  font-size: 60px;      /* slightly smaller = less heavy */
  line-height: 0.85;    /* gives breathing room so it doesn’t look thick */
  letter-spacing: 0px;  /* 1px makes pixel fonts look bolder */

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* subtle “thinning” */
  text-shadow: 0 0 0.6px rgba(255,255,255,0.55);

  margin: 0 0 18px;
}

.section-title{
  font-size: 20px;
  margin: 20px 0 10px;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);

  font-family: "PerfectDOS", monospace;
  font-size: 20px;
  line-height: 1.25;
}

/* keep these inheriting from body unless you want exceptions */
.link, .tiny, .muted, .verse-text{
  font-family: inherit;
}

.center{ text-align: center; }

.accent{ color: var(--accent); }
.muted{ color: var(--muted); }
.tiny{ font-size: 18px; }

.heading-glow{
  text-shadow: 0 0 10px rgba(176, 0, 28, 0.35);
}

/* CROPPED ORNAMENTS (matches your Canva export spacing 1:1) */
.ornament-box{
  margin: 16px auto;
  overflow: hidden;
}

.ornament-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  image-rendering: pixelated;
}

/* smaller + closer to your screenshot */
.ornament-box.flowers{ width: 210px; height: 58px; }
.ornament-box.deer{    width: 240px; height: 86px; }
.ornament-box.divider{ width: 260px; height: 30px; }

@media (max-width: 420px){
  .ornament-box.flowers{ width: 190px; height: 52px; }
  .ornament-box.deer{    width: 220px; height: 78px; }
  .ornament-box.divider{ width: 240px; height: 28px; }
}
/* English subtitle (keep your normal subtitle font) */
.subtitle-en{
  font-size: 16px;                /* smaller */
  line-height: 1;                 /* “shorter” vertically */
  letter-spacing: 0px;
}
.section-title,
.accent.heading-glow,
.dir-links a,
.cta{
  font-family: "Dico", monospace;
  font-weight: 400;      /* use 400/normal */
  letter-spacing: 0px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-shadow: 0 0 0.6px rgba(255,255,255,0.45);
}


/* Arabic subtitle (PixelAE) */
.subtitle-ar{
  font-family: "PixelAE", serif;
  direction: rtl;
  unicode-bidi: isolate;

  font-size: 20px;      /* try 18–22 */
  line-height: 1;       /* shorter vertically */

  letter-spacing: -0.5px;  /* reduces “stretched” feel */
  word-spacing: -2px;      /* helps if gaps feel wide */

  text-align: center;   /* prevents weird justification */
  white-space: nowrap;  /* keeps it on one line */
  margin-bottom: 70px;
}

/* Directory/subheadings in Dico */
.section-title,
.accent.heading-glow,
/* DIRECTORY: one link per line */
Add this to the **bottom of your `style.css`** (or anywhere after your link styles). It’ll turn your Directory into those cute “room/portal cards” and keep your fonts: **Dico for titles**, **PerfectDOS for the little captions**.

```css
/* ---------- PIXEL STAMP / LACE FRAME ---------- */

/* (optional) tweak these */
:root{
  --frame: #b0001c;          /* stamp color */
  --frame2: rgba(255,255,255,0.12);
  --cut: 6px;                /* “pixel corner” cut */
}

/* a tiny pixel-stamp border image (perforated edge) */
:root{
  --stamp-border: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cdefs%3E%3Cmask%20id='m'%3E%3Crect%20width='24'%20height='24'%20fill='white'/%3E%3Cg%20fill='black'%3E%3C!--%20top%20holes%20--%3E%3Crect%20x='4'%20y='1'%20width='2'%20height='2'/%3E%3Crect%20x='9'%20y='1'%20width='2'%20height='2'/%3E%3Crect%20x='14'%20y='1'%20width='2'%20height='2'/%3E%3Crect%20x='19'%20y='1'%20width='2'%20height='2'/%3E%3C!--%20bottom%20holes%20--%3E%3Crect%20x='4'%20y='21'%20width='2'%20height='2'/%3E%3Crect%20x='9'%20y='21'%20width='2'%20height='2'/%3E%3Crect%20x='14'%20y='21'%20width='2'%20height='2'/%3E%3Crect%20x='19'%20y='21'%20width='2'%20height='2'/%3E%3C!--%20left%20holes%20--%3E%3Crect%20x='1'%20y='4'%20width='2'%20height='2'/%3E%3Crect%20x='1'%20y='9'%20width='2'%20height='2'/%3E%3Crect%20x='1'%20y='14'%20width='2'%20height='2'/%3E%3Crect%20x='1'%20y='19'%20width='2'%20height='2'/%3E%3C!--%20right%20holes%20--%3E%3Crect%20x='21'%20y='4'%20width='2'%20height='2'/%3E%3Crect%20x='21'%20y='9'%20width='2'%20height='2'/%3E%3Crect%20x='21'%20y='14'%20width='2'%20height='2'/%3E%3Crect%20x='21'%20y='19'%20width='2'%20height='2'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Crect%20width='24'%20height='24'%20fill='%23b0001c'%20mask='url(%23m)'/%3E%3C/svg%3E");
}

/* Directory layout stays */
.dir-grid{
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

/* Pixel-corner shape (no rounded corners) */
.portal,
.cta{
  clip-path: polygon(
    0 var(--cut),
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
}

/* PORTAL CARD */
.portal{
  display: block;
  text-decoration: none;

  padding: 14px 16px;
  background: rgba(255,255,255,0.03);

  /* stamp frame */
  border: 10px solid transparent;
  border-image-source: var(--stamp-border);
  border-image-slice: 10;
  border-image-repeat: round;

  /* subtle inner line for “lace” feel */
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.10),
    0 0 0 1px rgba(0,0,0,0.35);
}

/* hover = glow, still pixel */
.portal:hover{
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.12),
    0 0 18px rgba(176,0,28,0.18);
}

/* Keep fonts ON */
.portal-title{
  display: block;
  font-family: "Dico", monospace !important;
  font-size: 20px;
  letter-spacing: 0px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.portal-sub{
  display: block;
  margin-top: 6px;
  font-family: "PerfectDOS", monospace !important;
  font-size: 16px;
  opacity: 0.85;
}

/* CTA BUTTON (stamp-shaped) */
.cta{
  display: inline-block;
  margin-top: 60px;
  padding: 14px 16px;

  font-family: "Dico", monospace !important;
  font-size: 20px;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;

  background: rgba(255,255,255,0.03);

  border: 10px solid transparent;
  border-image-source: var(--stamp-border);
  border-image-slice: 10;
  border-image-repeat: round;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.10),
    0 0 0 1px rgba(0,0,0,0.35);
}

.cta:hover{
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.12),
    0 0 18px rgba(176,0,28,0.20);
}

/* mobile: keep it crisp */
@media (max-width: 420px){
  .portal-title{ font-size: 18px; }
  .portal-sub{ font-size: 14px; }
  .cta{ font-size: 18px; }
}


/* verse */
.verse{ margin-top: 8px; }
.verse-text{ 
  max-width: 34ch;
  display: inline-block;
  text-align: left;
  line-height: 1.2;
  margin: 0;
  white-space: pre-wrap;
  opacity: 0.95;
}
.verse-ref{
  margin-top: 14px;
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 200px;
}

/* read section */
.read-section{ margin-top: 80px; }
.linklist{
  list-style: decimal;
  padding-left: 0;
  margin: 14px auto 0;
  width: fit-content;
}
.linklist li{
  margin: 12px 0;
  text-align: center;
}

/* directory */
.directory{ margin-top: 200px; }

.dir-links{
  display: grid;
  gap: 22px;
  margin-top: 28px;
}

/* links */
a{
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a:hover{
  color: var(--accent);
}

/* CTA link */
.cta{
  display: inline-block;
  margin-top: 80px;
  font-size: 22px;
  text-decoration-thickness: 3px;
}

/* footer */
.footer{
  margin-top: 600px;
  padding: 0 10px 10px;
  line-height: 1.15;
  opacity: 0.8;
}

.game-wrap{
  width: min(520px, 92vw);
  margin: 18px auto 0;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  padding: 10px;
}
/* GAME HUB: blends into site, uses your pixel-doily frame */
.game-frame{
  width: min(520px, 92vw);
  margin: 18px auto 0;
  padding: 10px;

  border: 14px solid transparent;
  border-image-source: var(--doily-border);
  border-image-slice: 14;
  border-image-repeat: round;

  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.10);
}

#game{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  background: transparent;
  image-rendering: pixelated;
}

.hallway-door{
  display: block;
  width: min(420px, 92vw);
  margin: 18px auto 0;
  padding: 18px 16px;

  text-decoration: none;
  background: rgba(255,255,255,0.03);

  /* doily lace frame */
  border: 14px solid transparent;
  border-image-source: var(--doily-border);
  border-image-slice: 14;
  border-image-repeat: round;

  /* pixel corners */
  clip-path: polygon(
    0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px)
  );

  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.10);
}

.hallway-door:hover{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12),
              0 0 18px rgba(176,0,28,0.20);
}

.door-top{
  display: block;
  font-family: "Dico", monospace;
  font-size: 22px;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 3px;
}

.door-sub{
  display: block;
  margin-top: 8px;
  font-family: "PerfectDOS", monospace;
  font-size: 16px;
  opacity: 0.85;
}

.hallway-page{
  background: var(--bg);
  color: var(--text);
}

.hallway-wrap{
  width: min(900px, 96vw);
  margin: 0 auto;
  padding: 18px 0 28px;
}

.hallway-game{
  margin-top: 16px;
  padding: 12px;

  border: 14px solid transparent;
  border-image-source: var(--doily-border);
  border-image-slice: 14;
  border-image-repeat: round;

  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.10);
}

#hallway{
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  image-rendering: pixelated;
}


@media (max-width: 420px){
  body{
    font-size: 16px;   /* try 15–18 */
    line-height: 1.2;
  }

  .tiny{ font-size: 14px; }
  .verse-ref{ font-size: 14px; }
  
}