/* ===============================================================
   LÔGRAFEN — style.css
   Old-web build. Beveled edges, hard shadows, fixed measure.
   Palette taken from the background plate: wet marble, algae,
   deep water, one oxide accent.
   ===============================================================*/
:root{
  --deep:#070d0e;
  --slab:#0c1416;
  --slab-2:#111c1d;
  --stone:#c8cfc9;
  --stone-dim:#88948d;
  --algae:#7ea173;
  --oxide:#b4573d;
  --edge-lit:#3f5350;      /* bevel highlight */
  --edge-dim:#050a0b;      /* bevel shadow */
  --rule:#2c3c3b;
  --link:#9fc0b4;
  --link-old:#8d7f9c;
  --measure:41rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  background:var(--deep);
  color:var(--stone);
  font-family:"Times New Roman",Times,Georgia,serif;
  font-size:17px;
  line-height:1.55;
}

/* the plate, held still behind everything, with a tile texture over it */
body::before{
  content:"";position:fixed;inset:0;
  background:url("steps.jpg") center 40%/cover no-repeat;
  filter:saturate(.7) brightness(.58) contrast(1.06);
  z-index:-2;
}
body::after{
  content:"";position:fixed;inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, rgba(7,13,14,.3) 0%, rgba(7,13,14,.6) 60%, rgba(7,13,14,.92) 100%);
  z-index:-1;
}

/* ---------------------------------------------------------------
   LINKS
----------------------------------------------------------------*/
a{color:var(--link)}
a:visited{color:var(--link-old)}
a:hover{color:var(--oxide)}

/* ---------------------------------------------------------------
   TITLE PLATE
----------------------------------------------------------------*/
.titleblock{
  padding:min(22vh,13rem) 1rem 2rem;
  text-align:center;
}
.titleblock.inner{padding:3.4rem 1rem 1.6rem}

h1{
  font-family:"UnifrakturMaguntia","Times New Roman",serif;
  font-weight:400;
  font-size:clamp(3.4rem,14vw,7.5rem);
  line-height:.9;
  margin:0;
  color:var(--stone);
  text-shadow:3px 3px 0 #000, 0 0 2.2rem rgba(0,0,0,.9);
}
h1 a{color:inherit;text-decoration:none}

.subtitle{
  margin:.7rem auto 0;
  font-family:Verdana,Geneva,sans-serif;
  font-size:.74rem;
  letter-spacing:.26em;
  text-transform:none;
  color:var(--stone);
  text-shadow:1px 1px 0 #000;
}
.subtitle::before,.subtitle::after{
  content:"\2014";
  color:var(--rule);
  margin:0 .7rem;
  letter-spacing:0;
}

.dedication{
  max-width:33rem;
  margin:1.3rem auto 0;
  font-style:italic;
  font-size:.95rem;
  line-height:1.6;
  color:var(--stone-dim);
  text-shadow:1px 1px 0 #000;
}

/* ---------------------------------------------------------------
   NAVIGATION BAR
----------------------------------------------------------------*/
.bar{
  max-width:var(--measure);
  margin:0 auto 1.4rem;
  background:var(--slab-2);
  border:3px ridge var(--edge-lit);
  padding:.45rem .6rem;
  text-align:center;
  font-family:Verdana,Geneva,sans-serif;
  font-size:.75rem;
  box-shadow:4px 4px 0 rgba(0,0,0,.55);
}
.bar a{text-decoration:none;padding:0 .18rem}
.bar a:hover{text-decoration:underline}
.bar .sep{color:var(--rule);padding:0 .3rem}
.bar .at{color:var(--oxide)}

/* ---------------------------------------------------------------
   PORTAL — the front page grid
----------------------------------------------------------------*/
.portal{
  max-width:var(--measure);
  margin:0 auto 1.4rem;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.6rem;
}
:root[data-view="full"] .portal{max-width:62rem;grid-template-columns:repeat(3,1fr)}
.portal li{display:flex}
.portal a{
  flex:1;
  display:block;
  padding:.85rem .9rem;
  text-decoration:none;
  color:var(--stone);
  background:var(--slab);
  border:3px ridge var(--edge-lit);
  box-shadow:4px 4px 0 rgba(0,0,0,.55);
}
.portal a:hover{background:var(--slab-2);border-color:var(--oxide)}
.portal .name{
  font-family:"UnifrakturMaguntia","Times New Roman",serif;
  font-size:1.55rem;line-height:1.1;display:block;
  text-shadow:2px 2px 0 #000;
}
.portal .line{
  display:block;font-size:.84rem;font-style:italic;
  color:var(--stone-dim);margin-top:.3rem;line-height:1.45;
}

/* ---------------------------------------------------------------
   WIKI FURNITURE
----------------------------------------------------------------*/
.crumbs{
  max-width:var(--measure);
  margin:0 auto .8rem;
  font-family:Verdana,Geneva,sans-serif;
  font-size:.68rem;
  color:var(--stone-dim);
  letter-spacing:.04em;
}
:root[data-view="full"] .crumbs{max-width:62rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .arrow{color:var(--rule);padding:0 .2rem}

.stub{
  margin:0 0 1.6rem;
  padding:.6rem .8rem;
  background:var(--slab-2);
  border:2px inset var(--edge-lit);
  border-left:5px solid var(--oxide);
  font-size:.86rem;
}
.stub p{margin:0}

.infobox{
  float:right;
  width:14rem;
  margin:0 0 1rem 1.2rem;
  background:var(--slab-2);
  border:3px ridge var(--edge-lit);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
  font-size:.8rem;
}
.infobox .ib-title{
  font-family:"UnifrakturMaguntia","Times New Roman",serif;
  font-size:1.25rem;
  text-align:center;
  padding:.3rem;
  background:var(--slab);
  border-bottom:2px groove var(--edge-lit);
  text-shadow:2px 2px 0 #000;
}
.infobox table{width:100%;border-collapse:collapse}
.infobox th{
  text-align:left;vertical-align:top;
  font-family:Verdana,Geneva,sans-serif;
  font-size:.62rem;letter-spacing:.05em;
  color:var(--stone-dim);
  padding:.3rem .4rem;width:6.4rem;
}
.infobox td{padding:.3rem .4rem;color:var(--stone)}
.infobox tr+tr th,.infobox tr+tr td{border-top:1px solid var(--rule)}
@media (max-width:640px){
  .infobox{float:none;width:auto;margin:0 0 1.2rem}
}

.seealso{
  margin-top:2.2rem;
  padding:.55rem .8rem;
  background:var(--slab-2);
  border:2px inset var(--edge-lit);
  font-size:.85rem;
}
.seealso b{
  font-family:Verdana,Geneva,sans-serif;
  font-size:.66rem;letter-spacing:.08em;
  color:var(--stone-dim);
}


/* ---------------------------------------------------------------
   TIMELINE
----------------------------------------------------------------*/
dl.timeline{
  margin:1.1rem 0 0;
  padding-left:.2rem;
  border-left:2px solid var(--rule);
}
dl.timeline dt{
  font-family:Verdana,Geneva,sans-serif;
  font-size:.66rem;
  letter-spacing:.09em;
  color:var(--oxide);
  margin-top:1rem;
  padding-left:.9rem;
  position:relative;
}
dl.timeline dt::before{
  content:"";
  position:absolute;
  left:-.45rem;top:.25rem;
  width:.45rem;height:.45rem;
  background:var(--oxide);
  transform:rotate(45deg);
}
dl.timeline dt:first-child{margin-top:.2rem}
dl.timeline dd{
  margin:.12rem 0 0 .9rem;
  font-size:.94rem;
}

table.wtable{
  width:100%;border-collapse:collapse;
  margin:1.1rem 0;font-size:.88rem;
  border:2px inset var(--edge-lit);
}
table.wtable th{
  background:var(--slab-2);
  font-family:Verdana,Geneva,sans-serif;
  font-size:.66rem;letter-spacing:.08em;
  color:var(--stone-dim);
  text-align:left;padding:.4rem .55rem;
  border-bottom:2px groove var(--edge-lit);
}
table.wtable td{
  padding:.35rem .55rem;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
table.wtable tr:last-child td{border-bottom:0}
table.wtable tr:nth-child(even) td{background:rgba(255,255,255,.022)}
table.wtable td.st{
  font-family:Verdana,Geneva,sans-serif;
  font-size:.6rem;letter-spacing:.1em;
  color:var(--oxide);
}

/* ---------------------------------------------------------------
   THE TEXT SLAB
----------------------------------------------------------------*/
main{
  max-width:var(--measure);
  margin:0 auto 1.4rem;
  padding:1.6rem 1.7rem 2rem;
  background:var(--slab);
  border:3px ridge var(--edge-lit);
  box-shadow:5px 5px 0 rgba(0,0,0,.55);
  transition:max-width .2s ease;
}
:root[data-view="full"] main,
:root[data-view="full"] .bar,
:root[data-view="full"] .foot{max-width:62rem}

section{margin-top:2.4rem;scroll-margin-top:1rem}
section::after{content:"";display:block;clear:both}
section:first-child{margin-top:0}

h2{
  font-family:"UnifrakturMaguntia","Times New Roman",serif;
  font-weight:400;
  font-size:2rem;
  line-height:1.15;
  margin:0 0 .9rem;
  padding:.25rem .6rem;
  color:var(--stone);
  background:var(--slab-2);
  border-left:5px solid var(--oxide);
  border-top:1px solid var(--edge-lit);
  border-bottom:1px solid var(--edge-dim);
  text-shadow:2px 2px 0 #000;
}
h3{
  font-family:Verdana,Geneva,sans-serif;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.06em;
  margin:1.9rem 0 .35rem;
  color:var(--algae);
}
p{margin:0 0 .95rem}
p+p{text-indent:1.4rem}

.plate{margin:0 0 1.4rem}
.plate img{
  width:100%;display:block;
  border:2px inset var(--edge-lit);
  filter:saturate(.7) brightness(.85);
}
.plate figcaption{
  font-size:.78rem;color:var(--stone-dim);
  padding-top:.35rem;font-style:italic;text-align:center;
}

blockquote{
  margin:1.4rem 0;
  padding:.7rem .9rem;
  background:var(--slab-2);
  border:2px inset var(--edge-lit);
  font-style:italic;
  color:var(--stone-dim);
}
.tongue{font-style:italic;color:var(--algae)}
.gloss{
  font-size:.82rem;color:var(--stone-dim);
  border-top:1px dashed var(--rule);
  padding-top:.5rem;margin-top:1.4rem;
}

hr.chainrule{
  border:0;
  color:var(--rule);
  text-align:center;
  margin:2rem 0;
}
hr.chainrule::before{
  content:"\25C6 \25C7 \25C6 \25C7 \25C6";
  letter-spacing:.5em;font-size:.7rem;
}

.leaf{
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:2.4rem;padding-top:.9rem;
  border-top:1px solid var(--rule);
  font-family:Verdana,Geneva,sans-serif;
  font-size:.75rem;
}
.leaf a{text-decoration:none}
.leaf a:hover{text-decoration:underline}

/* ---------------------------------------------------------------
   NOTICES
----------------------------------------------------------------*/
.notice{
  max-width:var(--measure);
  margin:0 auto 1.4rem;
  padding:.75rem 1rem;
  background:var(--slab);
  border:3px ridge var(--edge-lit);
  box-shadow:4px 4px 0 rgba(0,0,0,.55);
  font-size:.9rem;
}
.notice p{margin:0}
main>.notice{margin:0 0 1.8rem;box-shadow:none;border-width:2px}
.notice.building{text-align:center}
.notice.building p{margin:0}
.notice.building .hoarding{
  font-family:"UnifrakturMaguntia","Times New Roman",serif;
  font-size:1.7rem;
  line-height:1.2;
  color:var(--oxide);
  text-shadow:2px 2px 0 #000;
  margin-bottom:.2rem;
}

.wip-notice{border-left:5px solid var(--oxide)}
:root[data-view="full"] .notice{max-width:62rem}


/* ---------------------------------------------------------------
   THE FOOL — where dead links land
----------------------------------------------------------------*/
main.fool{text-align:center;padding-bottom:2.4rem}
main.fool .card{margin:0 auto 1.4rem;width:min(15rem,60vw)}
main.fool .card img{
  width:100%;display:block;
  border:3px ridge var(--edge-lit);
  box-shadow:5px 5px 0 rgba(0,0,0,.6);
  filter:saturate(.78) brightness(.9);
}
main.fool .saying{
  font-family:"UnifrakturMaguntia","Times New Roman",serif;
  font-size:1.5rem;
  line-height:1.35;
  max-width:26rem;
  margin:0 auto 1.1rem;
  color:var(--stone);
  text-shadow:2px 2px 0 #000;
}
main.fool .wander{
  max-width:26rem;margin:0 auto 1.6rem;
  font-size:.92rem;color:var(--stone-dim);
}

/* neighbours list */
ul.neighbours{margin:1rem 0 0;padding-left:1.2rem;font-size:.94rem}
ul.neighbours li{margin-bottom:.4rem}

/* ---------------------------------------------------------------
   RING NAV & CODE
----------------------------------------------------------------*/
.ring{
  text-align:center;
  margin:1.1rem 0 .3rem;
  padding:.5rem;
  background:var(--slab-2);
  border:2px inset var(--edge-lit);
  font-family:Verdana,Geneva,sans-serif;
  font-size:.75rem;
}
.ring a{text-decoration:none;padding:0 .2rem}
.ring a:hover{text-decoration:underline}
.ring .sep{color:var(--rule);padding:0 .25rem}

code{
  font-family:"Courier New",monospace;
  font-size:.88em;
  color:var(--algae);
  background:var(--slab-2);
  padding:0 .2rem;
}
pre.code{
  font-family:"Courier New",monospace;
  font-size:.78rem;
  line-height:1.45;
  color:var(--stone-dim);
  background:#050b0b;
  border:2px inset var(--edge-lit);
  padding:.7rem .8rem;
  overflow-x:auto;
  margin:1rem 0;
}

/* ---------------------------------------------------------------
   FOOT
----------------------------------------------------------------*/
.foot{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 0 4rem;
  font-family:Verdana,Geneva,sans-serif;
  font-size:.7rem;
  color:var(--stone-dim);
  text-align:center;
}
.foot .box{
  background:var(--slab);
  border:3px ridge var(--edge-lit);
  box-shadow:4px 4px 0 rgba(0,0,0,.55);
  padding:.8rem;
}
.foot .note{margin:.7rem 0 0}

/* ---------------------------------------------------------------
   CONTENTS — a window you can drag
----------------------------------------------------------------*/
#toc{
  position:fixed;
  top:1.2rem;left:1.2rem;
  width:16.5rem;
  max-height:calc(100vh - 2.4rem);
  background:var(--slab);
  border:3px outset var(--edge-lit);
  box-shadow:5px 5px 0 rgba(0,0,0,.6);
  display:flex;flex-direction:column;
  z-index:40;
}
#toc-handle{
  display:flex;align-items:center;gap:.4rem;
  padding:.25rem .3rem .25rem .45rem;
  cursor:grab;
  background:linear-gradient(to right,var(--oxide),#3d2a24);
  border-bottom:2px groove var(--edge-lit);
  font-family:Verdana,Geneva,sans-serif;
  font-size:.68rem;
  color:#f0e6e0;
  user-select:none;touch-action:none;
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
#toc-handle.dragging{cursor:grabbing}
.grip{
  width:.55rem;height:.55rem;
  background:#f0e6e0;
  transform:rotate(45deg);flex:none;
}
#toc-title{flex:1;letter-spacing:.04em}
#toc-fold{
  width:1.15rem;height:1.15rem;
  background:var(--slab-2);
  border:2px outset var(--edge-lit);
  color:var(--stone);
  font-family:Verdana,Geneva,sans-serif;
  font-size:.62rem;line-height:1;
  cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
}
#toc-fold:active{border-style:inset}
#toc-list{
  list-style:none;margin:0;padding:.35rem 0;
  overflow-y:auto;
  font-size:.82rem;
}
#toc-list a{
  display:block;padding:.16rem .7rem .16rem .9rem;
  text-decoration:none;color:var(--stone);
  border-left:3px solid transparent;
}
#toc-list a:hover{background:var(--slab-2);text-decoration:underline}
#toc-list a.book.current{color:var(--oxide);font-weight:700}
#toc-list a.book.child{
  padding-left:2rem;
  font-size:.82rem;
  color:var(--stone-dim);
}
#toc-list a.book.child::before{content:"\2013  ";color:var(--rule)}
#toc-list a.book.shut{color:var(--stone-dim)}
#toc-list a.book.shut::after{
  content:"\2014";
  float:right;
  color:var(--rule);
}
#toc-list a.sub{padding-left:1.8rem;font-size:.78rem;color:var(--stone-dim)}
#toc-list a.deep{padding-left:2.5rem}
#toc-list a.here{border-left-color:var(--oxide);color:var(--oxide)}
#toc.folded #toc-list{display:none}



#controls{
  position:fixed;top:1.2rem;right:1.2rem;z-index:40;
  display:flex;flex-direction:column;gap:.35rem;align-items:flex-end;
}
#controls button{
  font-family:Verdana,Geneva,sans-serif;font-size:.7rem;
  background:var(--slab-2);color:var(--stone);
  border:3px outset var(--edge-lit);
  padding:.25rem .55rem;cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
}
#controls button:active{border-style:inset;box-shadow:none}
#controls button:hover{color:var(--oxide)}

:focus-visible{outline:2px solid var(--oxide);outline-offset:2px}

/* scrollbars, where the browser still allows it */
*{scrollbar-color:var(--edge-lit) var(--slab)}
::-webkit-scrollbar{width:14px}
::-webkit-scrollbar-track{background:var(--slab)}
::-webkit-scrollbar-thumb{background:var(--edge-lit);border:2px outset var(--stone-dim)}

/* ---------------------------------------------------------------
   NARROW SCREENS
----------------------------------------------------------------*/
@media (max-width:900px){
  body{font-size:16px}
  .titleblock{padding-top:16vh}
  .titleblock.inner{padding-top:2.4rem}
  main{padding:1.2rem 1rem 1.5rem;margin-left:.7rem;margin-right:.7rem}
  .bar,.portal,.crumbs,.foot{margin-left:.7rem;margin-right:.7rem}
  #toc{position:static;width:auto;margin:0 .7rem 1.2rem;max-height:none}
  #toc-handle{cursor:default}
  #controls{position:static;flex-direction:row;justify-content:center;margin:0 0 1.2rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}