=============================================================================
   Federated Wiki redesign — viki.wiki / .wiki / .cat edition
   -----------------------------------------------------------------------------
   Purpose
   - Replaces product-card chrome with typographic page sheets.
   - Keeps Federated Wiki's horizontal lineup as the primary working surface.
   - Encodes provenance/status as print marks: gutter, rules, journal marks.
   - Includes mobile fixes: horizontal page carousel + vertical scrolling inside
     each page card.

   Font plan
   - Uses locally hosted DJR font files when present.
   - Expected webfont path: /fonts/*.woff2
   - Do not hotlink or copy licensed font files without permission.
   - Fallbacks keep the site usable until the font files are installed.

   Expected Federated Wiki DOM
   body > .main > .page[.active|.local|.remote|.plugin|.recycler|.ghost]
                > .paper > .twins / .header / .story / .backlinks / .journal
   body > footer
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Local font-face declarations
   Put licensed .woff2 files in the public /fonts/ directory named as below.
   Missing files are fine; browsers will continue through the fallback stack.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"FormaDJRText";
  src:url("/fonts/FormaDJRText-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"FormaDJRText";
  src:url("/fonts/FormaDJRText-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"FormaDJRDeck";
  src:url("/fonts/FormaDJRDeck-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"FormaDJRDeck";
  src:url("/fonts/FormaDJRDeck-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"FormaDJRMicro";
  src:url("/fonts/FormaDJRMicro-Regular.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Input";
  src:url("/fonts/Input-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"InputMonoNarrow";
  src:url("/fonts/InputMonoNarrow-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme:light;

  /* Page system */
  --tm-desk:#ffffff;
  --tm-paper:#ffffff;
  --tm-ink:#000000;
  --tm-muted:rgba(0,0,0,.58);
  --tm-faint:rgba(0,0,0,.20);
  --tm-rule:#000000;
  --tm-select:#efefef;

  /* Optional accent for local-only touches; most UI remains monochrome. */
  --tm-accent:#0b66c3;

  /* Status, reduced to print codes */
  --tm-local:#000000;
  --tm-remote:rgba(0,0,0,.36);
  --tm-plugin:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 5px);
  --tm-recycler:repeating-linear-gradient(45deg,#000 0 2px,transparent 2px 5px);

  /* Geometry */
  --tm-page-w:clamp(360px,32vw,496px);
  --tm-gap:18px;
  --tm-pad:28px;
  --tm-gutter-x:38px;
  --tm-footer-h:36px;
  --tm-app-nav-h:44px;

  /* Typography: DJR-first with safe system fallbacks */
  --font-text:"FormaDJRText","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-micro:"FormaDJRMicro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-head:"FormaDJRDeck","FormaDJRDisplay","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Input","InputMonoNarrow","Courier New",monospace;

  --type-meta:10px;
  --type-small:11px;
  --type-body:13px;
  --type-lead:14px;
  --type-head:24px;
  --line-body:1.55;
}

*{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,body{
  width:100%;
  min-height:100%;
}
body{
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--tm-desk);
  color:var(--tm-ink);
  font-family:var(--font-text);
  font-size:var(--type-body);
  line-height:var(--line-body);
}

a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:2px;}
a:focus-visible,
.page:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:1px solid var(--tm-ink);
  outline-offset:2px;
}

/* Sticky app/site nav support, when the farm adds one above .main. */
body > nav,
body > header.site,
body > header.app,
body > header.navbar,
body > .site-nav,
body > .navbar,
#nav,
#navbar{
  position:sticky;
  top:max(env(safe-area-inset-top),0px);
  z-index:2000;
  min-height:var(--tm-app-nav-h);
  background:var(--tm-paper);
  border-bottom:1px solid var(--tm-rule);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* Horizontal working table -------------------------------------------------- */
.main{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:stretch;
  gap:var(--tm-gap);
  padding:20px 18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-padding-left:18px;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#000 transparent;
}
.main::-webkit-scrollbar{height:10px;}
.main::-webkit-scrollbar-thumb{background:#000;border:4px solid #fff;}
.main::-webkit-scrollbar-track{background:#fff;}
.main .page{flex:0 0 var(--tm-page-w);}

/* Page sheet ---------------------------------------------------------------- */
.page{
  --tm-status:var(--tm-faint);
  position:relative;
  width:var(--tm-page-w);
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--tm-paper);
  border:1px solid var(--tm-rule);
  border-radius:0;
  box-shadow:none;
  outline:none;
  isolation:isolate;
}
.page.local{--tm-status:var(--tm-local);}
.page.remote{--tm-status:var(--tm-remote);}
.page.plugin{--tm-status:var(--tm-plugin);}
.page.recycler{--tm-status:var(--tm-recycler);}

/* The page memory line. */
.page::before{
  content:"";
  position:absolute;
  top:var(--tm-pad);
  bottom:var(--tm-pad);
  left:var(--tm-gutter-x);
  width:1px;
  background:var(--tm-status);
  opacity:.9;
  z-index:5;
  pointer-events:none;
}
.page.active{border-width:2px;}
.page.ghost,
.page.pending-remove{opacity:.45;}

.paper{
  flex:1 1 auto;
  width:100%;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:var(--tm-pad);
  background:var(--tm-paper);
  scrollbar-width:thin;
  scrollbar-color:#000 transparent;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.paper::-webkit-scrollbar{width:10px;}
.paper::-webkit-scrollbar-thumb{background:#000;border:4px solid #fff;}
.paper img,
.paper svg,
.paper video,
.paper iframe{
  max-width:100%;
  height:auto;
}
.paper iframe{width:100%;}

/* Page metadata ------------------------------------------------------------- */
.twins{min-height:0;}
.twins:empty{display:none;}
.twins p{
  margin:0 0 12px;
  font-family:var(--font-micro);
  font-size:var(--type-meta);
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tm-muted);
}

.header{
  position:sticky;
  top:calc(var(--tm-pad) * -1);
  z-index:4;
  margin:calc(var(--tm-pad) * -1) calc(var(--tm-pad) * -1) 22px;
  padding:12px var(--tm-pad) 14px;
  background:var(--tm-paper);
  border-bottom:1px solid var(--tm-faint);
}
.header::before{
  content:"Typografische Wikiblätter";
  display:block;
  margin-bottom:13px;
  font-family:var(--font-micro);
  font-size:var(--type-meta);
  line-height:1;
  letter-spacing:.05em;
  color:var(--tm-ink);
}
.header h1{
  margin:0;
  padding:0;
  display:flex;
  align-items:flex-start;
  gap:7px;
  font-family:var(--font-head);
  font-weight:400;
  font-size:var(--type-head);
  line-height:1.08;
  letter-spacing:.075em;
  text-transform:none;
}
.header h1 strong,
.header h1 b,
.header h1 span{font-weight:700;}
.header h1 a{color:inherit;}
.header h1 img.favicon,
img.favicon{
  flex:0 0 auto;
  width:14px;
  height:14px;
  margin:.18em 0 0;
  border:1px solid var(--tm-ink);
  border-radius:0;
  background:#fff;
  object-fit:contain;
  box-shadow:none;
}

/* Story typesetting --------------------------------------------------------- */
.story{
  max-width:70ch;
  margin:0 auto;
  font-family:var(--font-text);
  font-size:var(--type-body);
  line-height:var(--line-body);
  color:var(--tm-ink);
  column-count:1;
  column-gap:0;
}
.story .item{
  min-width:36px;
  width:100%;
  clear:both;
}
.story p{margin:0 0 .95em;}
.story p:last-child{margin-bottom:0;}
.story p.lead,
.story .lead{font-size:var(--type-lead);line-height:1.45;}
.story p,
.story li{orphans:3;widows:3;}

.story h1,
.story h2,
.story h3,
.story h4{
  column-span:all;
  margin:1.2em 0 .45em;
  font-family:var(--font-head);
  line-height:1.15;
  letter-spacing:.075em;
  font-weight:400;
}
.story h1{font-size:22px;}
.story h2{font-size:19px;}
.story h3{font-size:16px;}
.story h4{
  font-family:var(--font-micro);
  font-size:var(--type-small);
  text-transform:uppercase;
  letter-spacing:.13em;
}
.story h1 span,
.story h2 span,
.story h3 span{font-weight:700;}

.story a{border-bottom:1px solid var(--tm-ink);}
.story a:hover{background:var(--tm-select);text-decoration:none;}
.story a:has(img){border-bottom:0;}

.story ul,
.story ol{margin:0 0 .95em 1.25em;padding:0;}
.story li{margin:.25em 0;}
.story blockquote{
  margin:1em 0;
  padding:.1em 0 .1em 14px;
  border-left:1px solid var(--tm-rule);
  color:var(--tm-ink);
  font-size:var(--type-lead);
}

.story code,
code{
  font-family:var(--font-mono);
  font-size:.9em;
  background:#fff;
  border:1px solid var(--tm-faint);
  padding:.05em .3em;
}
.story pre,
pre{
  margin:0 0 1em;
  padding:10px;
  overflow-x:auto;
  max-width:100%;
  font-family:var(--font-mono);
  font-size:var(--type-small);
  line-height:1.45;
  background:#fff;
  border:1px solid var(--tm-rule);
}
.story hr{
  border:0;
  border-top:1px solid var(--tm-rule);
  margin:1.3em 0;
}

/* TM layout modules inside a story ---------------------------------------- */
.tm-content,
.content{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin:0 0 20px;
}
.tm-photo,
.photo{flex:0 0 120px;}
.tm-photo img,
.photo img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--tm-rule);
  filter:grayscale(1) contrast(1.1);
}
.tm-text,
.text{flex:1;font-size:12px;line-height:1.5;}
.columns,
.tm-columns{
  display:flex;
  gap:20px;
  font-size:var(--type-small);
  line-height:1.6;
}
.col{flex:1;min-width:0;}
.col-heading{
  margin:0 0 8px;
  font-family:var(--font-micro);
  font-size:var(--type-small);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.15em;
}

/* Default wiki widgets, reduced to print mechanics ------------------------- */
.data,
.chart,
.image{
  float:right;
  width:170px;
  max-width:50%;
  margin:.1em 0 .85em 1em;
  padding:7px;
  background:#fff;
  border:1px solid var(--tm-rule);
  overflow:auto;
}
.image{padding:0;position:relative;}
.image img{
  display:block;
  width:100%;
  height:auto;
  filter:grayscale(1) contrast(1.1);
}
.image.wide{float:none;width:100%;max-width:100%;margin-left:0;}
.image.left{float:left;margin:.1em 1em .85em 0;}
.image img.overlay{
  width:16px;
  height:16px;
  position:relative;
  bottom:22px;
  right:2px;
  float:right;
  opacity:0;
  transition:.7s ease;
}
.image:hover img.overlay{opacity:1;}

p.caption,
.image p,
.data p,
.chart p,
.report p,
.factory p{
  margin:.45em 0 0;
  font-family:var(--font-micro);
  font-size:var(--type-meta);
  line-height:1.25;
  text-align:center;
  color:var(--tm-muted);
}
p.readout{
  margin:.1em 0;
  font-family:var(--font-head);
  font-size:42px;
  line-height:.95;
  text-align:center;
  letter-spacing:.05em;
  color:var(--tm-ink);
  font-weight:700;
}
.factory,
.factory-panel,
.panel.factory{
  width:100%;
  max-width:320px;
  min-height:100px;
  clear:both;
  margin:.8em 0;
  border:1px dashed var(--tm-rule);
  background:repeating-linear-gradient(0deg,#fff 0 9px,#f5f5f5 9px 10px);
}

.story table,
.paper table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin:0 0 1em;
  font-size:var(--type-small);
}
.story th,
.story td{
  border-bottom:1px solid var(--tm-faint);
  padding:.35em .5em;
  text-align:left;
}
.story th{font-weight:700;}

/* Favicons in content: Recent Changes, external sites, reference lists. */
.paper img[src*="favicon" i],
.paper img[src$=".ico" i],
.paper img[src*="/apple-touch-icon" i],
.item img[src*="favicon" i],
.item img[src$=".ico" i],
.story img[src*="favicon" i]{
  width:18px !important;
  height:18px !important;
  max-width:none !important;
  display:inline-block !important;
  margin:0 .35rem 0 0 !important;
  vertical-align:text-bottom !important;
  object-fit:contain !important;
  image-rendering:-webkit-optimize-contrast;
  filter:none !important;
}

/* Journal and backlinks ----------------------------------------------------- */
.backlinks,
.journal{
  clear:both;
  margin-top:18px;
  padding-top:8px;
  border-top:1px solid var(--tm-rule);
  font-family:var(--font-micro);
  font-size:var(--type-meta);
  line-height:1.45;
  letter-spacing:.05em;
  color:var(--tm-ink);
  background:transparent;
}
.backlinks summary{
  cursor:pointer;
  text-transform:uppercase;
  font-weight:700;
}
.backlinks a{border-bottom:1px solid var(--tm-rule);color:inherit;}
.journal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:3px;
  overflow-x:hidden;
}
.action,
.journal .action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:10px;
  height:10px;
  overflow:hidden;
  color:transparent;
  background:#fff;
  border:1px solid var(--tm-rule);
  border-radius:0;
  cursor:pointer;
  margin:0;
  padding:0;
  float:none;
}
.action:hover{background:var(--tm-ink);}
.action.fork{background:#000;color:transparent;}
.action.separator{width:8px;border:0;background:transparent;}

/* Controls ----------------------------------------------------------------- */
.control-buttons{
  float:right;
  position:relative;
  right:0;
  white-space:nowrap;
  overflow-x:visible;
}
.button,
button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  min-height:20px;
  margin:0 0 2px 2px;
  padding:2px 8px;
  border:1px solid var(--tm-rule);
  border-radius:0;
  background:#fff;
  color:#000;
  box-shadow:none;
  background-image:none;
  font-family:var(--font-micro);
  font-size:var(--type-meta);
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.button:hover,
button:hover{background:#000;color:#fff;text-decoration:none;}
textarea,
input[type="text"],
input:not([type]),
select{
  width:100%;
  font-family:var(--font-mono);
  font-size:var(--type-small);
  border:1px solid var(--tm-rule);
  border-radius:0;
  background:#fff;
  color:#000;
  padding:5px 6px;
}
textarea{min-height:130px;resize:vertical;}

/* Search, errors, helper states -------------------------------------------- */
.error,
pre.error{
  background:#fff;
  border:1px solid var(--tm-rule);
  color:#000;
  padding:.8em;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.item-placeholder{
  border:1px dotted var(--tm-rule);
  background:#fff;
}
.incremental-search{
  position:absolute;
  display:inline-block;
  max-width:430px;
  max-height:300px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:5px 10px;
  background:#fff;
  color:#000;
  border:1px solid var(--tm-rule);
  box-shadow:none;
  outline:none;
}
.search-term{background:var(--tm-select);}
.target{background:#fffdf0 !important;}
.consumed{outline:1px solid var(--tm-ink) !important;}
.highlight{outline:2px solid var(--tm-ink);}
.revision{
  position:relative;
  font-family:var(--font-head);
  font-size:24px;
  color:var(--tm-ink);
  font-weight:700;
}
.revision span{
  position:absolute;
  top:-40px;
  right:10px;
  display:block;
  padding:10px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--tm-rule);
  text-align:center;
  transform:rotate(-15deg);
}

/* Footer/search bar --------------------------------------------------------- */
body > footer,
footer{
  flex:0 0 auto;
  height:var(--tm-footer-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  background:#fff;
  border-top:1px solid var(--tm-rule);
  box-shadow:none;
  color:#000;
  font-family:var(--font-micro);
  font-size:var(--type-meta);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  z-index:1000;
}
body > footer::-webkit-scrollbar,
footer::-webkit-scrollbar{display:none;}
body > footer > *,
footer > *{flex:0 0 auto;}
.footer-item{display:inline-flex;align-items:center;margin-left:0;}
body > footer form,
footer form{display:inline-flex;align-items:center;}
body > footer input[type="text"],
body > footer input:not([type]),
footer input[type="text"],
footer input:not([type]){
  width:min(240px,42vw);
  min-width:100px;
  font-size:var(--type-meta);
}

/* Links/touch safety -------------------------------------------------------- */
.page *::before,
.page *::after{pointer-events:none;}
a{
  position:relative;
  z-index:5;
  pointer-events:auto;
  -webkit-tap-highlight-color:rgba(0,0,0,.12);
  touch-action:manipulation;
  cursor:pointer;
}

/* Mobile -------------------------------------------------------------------- */
@media (max-width:700px),(hover:none) and (pointer:coarse){
  :root{
    --tm-page-w:calc(100vw - 22px);
    --tm-gap:10px;
    --tm-pad:22px;
    --tm-gutter-x:30px;
  }
  input,
  select,
  textarea,
  button{font-size:16px !important;}
  html,
  body{
    height:100svh !important;
    overflow:hidden !important;
  }
  .main{
    display:flex !important;
    flex-direction:row !important;
    gap:12px !important;
    width:100% !important;
    max-width:100% !important;
    height:calc(100svh - var(--tm-footer-h)) !important;
    padding:8px !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:8px;
    scroll-behavior:auto !important;
  }
  .main .page{
    display:grid !important;
    grid-template-rows:1fr;
    flex:0 0 calc(100vw - 24px) !important;
    width:calc(100vw - 24px) !important;
    max-width:none !important;
    height:100% !important;
    max-height:100% !important;
    margin:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
  }
  .main .page > footer{display:none !important;}
  .main .page > header,
  .main .page .header{
    position:sticky !important;
    top:calc(var(--tm-pad) * -1) !important;
    z-index:3 !important;
    background:#fff;
  }
  .paper{
    min-height:0 !important;
    height:100% !important;
    max-height:100% !important;
    padding:12px 16px 8px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    scrollbar-gutter:stable both-edges;
    touch-action:auto !important;
  }
  .header h1{font-size:21px;}
  .story{max-width:none;}
  .tm-content,
  .content,
  .columns,
  .tm-columns{display:block;}
  .tm-photo,
  .photo{width:120px;margin:0 0 12px;}
  .data,
  .chart,
  .image{float:none;width:100%;max-width:100%;margin:0 0 .9em;}
  .paper img,
  .paper svg,
  .paper video,
  .paper canvas,
  .paper iframe{
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    display:block !important;
    margin:auto !important;
  }
  .paper table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .paper pre{
    white-space:pre-wrap !important;
    word-break:break-word !important;
    overflow-x:auto !important;
    max-width:100% !important;
  }
  .paper code{
    white-space:pre-wrap !important;
    word-break:break-word !important;
  }
  .paper [style*="width:"]{
    width:100% !important;
    max-width:100% !important;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}