/* asmolfren — slate-blue stationery theme */

:root  {
  --bg:#f7fafb;
  --paper:#fffefb;
  --stage:#fffefa;
  --ink:#3e5367;
  --muted:#82919d;
  --line:#cbd6dc;
  --accent:#647e96;
  --accent2:#a0b4c1;
  --rule:rgba(100,126,150,.13);
}

*  {
  box-sizing:border-box;
}

body  {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.6 'DM Mono',ui-monospace,monospace;
}

main  {
  width:min(700px,100%);
  margin-left:auto;
  margin-right:max(0px,calc((100vw - 860px)/2));
  padding:34px 22px 72px;
}

header  {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  border-bottom:1px solid var(--line);
  padding-bottom:15px;
}

h1  {
  font-size:27px;
  font-weight:500;
  letter-spacing:-.07em;
  margin:0;
}

header span,.small  {
  font-size:12px;
  color:var(--muted);
}

.intro  {
  max-width:620px;
  margin:22px 0 16px;
  color:var(--muted);
}

.eyebrow  {
  color:var(--accent);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:4px;
}

.panel  {
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:1px;
  padding:17px 18px 19px;
  margin:0 0 15px;
}

h2  {
  font-size:14px;
  font-weight:500;
  margin:0 0 10px;
}

.controls  {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.button  {
  font:inherit;
  font-size:12px;
  cursor:pointer;
  border:1px solid var(--accent);
  background:var(--accent);
  color:white;
  border-radius:1px;
  padding:7px 12px;
}

.button:hover  {
  filter:brightness(.9);
}

.button.secondary  {
  background:transparent;
  color:var(--accent);
}

.button:focus-visible,select:focus-visible  {
  outline:2px solid var(--accent2);
  outline-offset:3px;
}

.settings  {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:var(--muted);
}

select  {
  font:inherit;
  border:1px solid var(--line);
  padding:6px;
  background:var(--paper);
  color:var(--ink);
}

.status  {
  min-height:1.5em;
  font-size:12px;
  color:var(--muted);
}

.specimen-label  {
  font:10px/1.3 'DM Mono',monospace;
  color:var(--muted);
  letter-spacing:.045em;
}

/* Textured glyphs: the canvas-generated image is provided by script.js. */

.fren  {
  font-family:'Noto Sans','Noto Sans Symbols 2','Noto Sans Symbols','Noto Sans Canadian Aboriginal','DejaVu Sans','Segoe UI Symbol','Arial Unicode MS',sans-serif;
  font-variant-ligatures:none;
  unicode-bidi:isolate;
  direction:ltr;
  position:relative;
  isolation:isolate;
  text-shadow:.28px .15px .45px rgba(62,83,103,.28);
  background-image:var(--ink-texture,linear-gradient(var(--ink),var(--ink)));
  background-repeat:repeat;
  background-size:96px 48px;
  background-position:0 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

@supports not ((-webkit-background-clip:text) or (background-clip:text))  {
  .fren  {
    background:none;
    color:var(--ink);
    -webkit-text-fill-color:currentColor;
  }
}

@media (forced-colors:active)  {
  .fren  {
    background:none;
    color:CanvasText;
    -webkit-text-fill-color:CanvasText;
    text-shadow:none;
  }
}

/* Individually ruled paper specimens. */

.single-sheet,.tile,.walk-stage  {
  background-color:var(--stage);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 17px,var(--rule) 17px,var(--rule) 18px);
}

.single-sheet  {
  position:relative;
  border:1px solid var(--line);
  width:min(174px,100%);
  min-height:82px;
  padding:5px 7px 8px;
  margin-bottom:13px;
}

.single-sheet .specimen-label  {
  display:block;
  text-align:left;
}

.single  {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0;
  font-size:17px;
  line-height:1.5;
  white-space:pre;
  overflow-x:auto;
}

.gallery  {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:23px;
  row-gap:15px;
  margin:0 0 15px;
  padding:2px 0 4px;
}

.tile  {
  position:relative;
  border:1px solid var(--line);
  border-radius:0;
  min-height:80px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  padding:5px 6px;
  transform:rotate(0deg);
}

.tile:nth-child(5n+2)  {
  transform:rotate(-1.1deg);
}

.tile:nth-child(7n+4)  {
  transform:rotate(.8deg);
}

.tile .specimen-label  {
  text-align:left;
  font-size:9px;
}

.tile .specimen-glyph  {
  display:flex;
  flex:1;
  align-items:center;
  justify-content:center;
  max-width:100%;
  overflow:visible;
  text-align:center;
  white-space:pre;
  line-height:1.3;
  font-size:clamp(12px,1.6vw,16px);
}

/* A misprint uses the full sheet as its printing area;
clip at paper edges. */

.tile.misprint  {
  padding:0;
  gap:0;
  overflow:hidden;
  display:block;
}

.tile.misprint .specimen-label  {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  padding:5px 6px;
  pointer-events:none;
}

.tile.misprint .misprint-area  {
  position:absolute;
  inset:0;
  display:block;
  overflow:visible;
}

.tile.misprint .specimen-glyph  {
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  display:block;
  max-width:none;
  width:max-content;
  overflow:visible;
  white-space:pre;
  transform:translate(calc(-50% + var(--misprint-x)),calc(-50% + var(--misprint-y))) rotate(var(--misprint-angle));
  transform-origin:center center;
}

/* Strolling pair: fixed labels, horizontal travel, gentle bobbing. */

.walk-stage  {
  height:108px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:1px;
  margin-bottom:13px;
}

.walk-id  {
  position:absolute;
  top:7px;
  z-index:1;
  font-size:9px;
  pointer-events:none;
}

.walk-id-left  {
  left:9px;
}

.walk-id-right  {
  right:9px;
}

.walkers  {
  position:absolute;
  left:0;
  top:50%;
  display:flex;
  align-items:center;
  gap:9px;
  white-space:pre;
  will-change:transform;
  animation:stroll 11.8s linear infinite alternate;
}

.walker  {
  display:inline-block;
  font-size:clamp(15px,2vw,19px);
  animation:bob .75s ease-in-out infinite alternate;
}

.walker:nth-child(2)  {
  animation-delay:-.25s;
}

.walk-stage:hover .walkers,.walk-stage:hover .walker  {
  animation-play-state:paused;
}

@keyframes stroll  {
  0%  {
    transform:translate(0,-50%);
    animation-timing-function:cubic-bezier(.55,0,1,1);
  }

  10%  {
    transform:translate(calc(var(--walk-distance,0px)*.05),-50%);
    animation-timing-function:linear;
  }

  90%  {
    transform:translate(calc(var(--walk-distance,0px)*.95),-50%);
    animation-timing-function:cubic-bezier(0,0,.45,1);
  }

  100%  {
    transform:translate(var(--walk-distance,0px),-50%);
  }
}

@keyframes bob  {
  from  {
    transform:translateY(0);
  }

  to  {
    transform:translateY(-4px);
  }
}

/* Podium, with hatching and single-width shared borders. */

.podium-stage  {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  min-height:175px;
  padding:15px 8px 0;
  margin-bottom:15px;
}

.podium-slot  {
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  width:31%;
  max-width:220px;
}

.podium-slot>.specimen-label  {
  font-size:9px;
  margin-bottom:5px;
}

.podium-fren  {
  font-size:clamp(14px,2vw,20px);
  white-space:pre;
  max-width:100%;
  overflow-x:auto;
  text-align:center;
  padding-bottom:8px;
}

.podium-step  {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:1px 1px 0 0;
  background:var(--bg);
  color:var(--accent);
  font-size:20px;
}

.podium-slot[data-rank="1"] .podium-step  {
  height:94px;
  background:color-mix(in srgb,var(--accent2) 20%,var(--paper));
}

.podium-slot[data-rank="2"] .podium-step  {
  height:66px;
  border-right:0;
  background:repeating-linear-gradient(135deg,rgba(100,126,150,.12) 0 2px,transparent 2px 7px),var(--paper);
}

.podium-slot[data-rank="3"] .podium-step  {
  height:45px;
  border-left:0;
  background:repeating-linear-gradient(45deg,rgba(100,126,150,.09) 0 1px,transparent 1px 7px),repeating-linear-gradient(135deg,rgba(100,126,150,.09) 0 1px,transparent 1px 7px),var(--paper);
}

.scene-note  {
  font-size:12px;
  color:var(--muted);
  margin:0 0 15px;
}

.foot  {
  margin-top:30px;
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:15px;
}

.foot a  {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
}

@media (max-width:600px)  {
  main  {
    margin-right:0;
    padding:23px 14px 48px;
  }

  header  {
    align-items:center;
  }

  .panel  {
    padding:13px;
  }

  .single-sheet  {
    width:min(174px,100%);
  }

  .single  {
    font-size:16px;
  }

  .gallery  {
    column-gap:11px;
    row-gap:11px;
  }

  .tile  {
    min-height:73px;
    padding:4px 3px;
  }

  .tile .specimen-label  {
    font-size:8px;
  }

  .tile .specimen-glyph  {
    font-size:clamp(10px,2.6vw,14px);
  }

  .tile.misprint .specimen-label  {
    padding:4px 3px;
  }

  .walk-id  {
    font-size:8px;
  }

  .podium-stage  {
    min-height:155px;
  }

  .podium-slot[data-rank="1"] .podium-step  {
    height:72px;
  }

  .podium-slot[data-rank="2"] .podium-step  {
    height:50px;
  }

  .podium-slot[data-rank="3"] .podium-step  {
    height:36px;
  }
  .podium-fren  {
    font-size:clamp(12px,3vw,16px);
  }
}

@media (prefers-reduced-motion:reduce)  {
  .walkers  {
    left:50%;
    transform:translate(-50%,-50%);
    animation:none!important;
  }

  .walker  {
    animation:none!important;
  }
}