@charset "utf-8";

/* Snofu — scriptless gallery.
   Nothing here postdates 2015: floats, inline-block, absolute positioning,
   table-free centring, the :checked sibling trick, media queries, vh/vw.
   No flexbox, no grid, no custom properties, no calc().

   Palette (client.html default theme, GALLERY_DATA/COLOR.js):
     #fff     MainColor         text, active
     #ff8096  BGColor           page background (light pink)
     #c33446  TopbarMainColor   UI anticolor (maroon)
     #fff696  AltHighlightColor highlight (lemon)                            */

/* UDDKNB.woff2 is 2.3MB. Without font-display the browser paints NO text at
   all until it arrives (up to 3s), which blanks even the age gate. swap is an
   unknown descriptor to pre-2016 parsers, so they simply ignore it and keep
   their existing behaviour. */
/* Absolute: this stylesheet is served from simple.snofu.art, so a "/fonts/..."
   path would resolve against the subdomain. Cross-origin webfonts need CORS,
   which the apex .htaccess already grants via Access-Control-Allow-Origin: *. */
@font-face {
  font-family: 'UDDKNB';
  src: url('https://snofu.art/fonts/UDDKNB.woff2') format('woff2'),
       url('https://snofu.art/fonts/UDDKNB.ttf') format('truetype');
  font-display: swap;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* The document itself scrolls. Routing the page through a nested overflow
   container works, but a browser only scrolls one to a #fragment after parsing
   finishes, so the lander paints first and then jumps. The document's own
   scroller is positioned before the first paint, and gets real momentum
   scrolling on iOS instead of the -webkit-overflow-scrolling approximation. */
html, body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow-x: hidden;
}

body {
  background: #ff8096;
  color: #fff;
  font-family: 'UDDKNB', Verdana, Geneva, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

img { border: 0; }
a   { color: #fff; text-decoration: none; }
a:hover, a:focus, a:active { color: #fff696; }
.clear { clear: both; height: 0; font-size: 0; overflow: hidden; }

/* Off-screen rather than display:none, so screen readers still announce it. */
.sr {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------- age gate */

/* All four offsets rather than width/height percentages, so it fills the
   viewport without depending on html/body having a height. overflow:auto keeps
   Enter reachable if the modal outgrows a very short window. */
#gate {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(20, 20, 20);
  overflow: auto;
}

/* display:table is the pre-flex idiom for a two-panel card of equal height. */
#gatemodal {
  position: absolute;
  top: 50%;
  left: 50%;
  display: table;
  max-width: 92%;
  border-radius: 2vh;
  overflow: hidden;
  color: #fff;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#gategraphic, #gatecontent {
  display: table-cell;
  padding: 2.4vh;
  vertical-align: middle;
}

#gategraphic {
  background-color: #fff;
  color: #c33446;
  text-align: center;
  white-space: nowrap;
}

#gategraphic span {
  font-size: 8vh;
  letter-spacing: -0.9vh;
  line-height: 1;
}

#gatecontent {
  background-color: #c33446;
  text-align: center;
}

#gatetitle {
  font-size: 2.6vh;
  margin-bottom: 1.6vh;
}

#gatedesc {
  font-size: 1.7vh;
  margin-bottom: 2.2vh;
}

#gatedesc a { text-decoration: underline; }

#gateenter {
  display: inline-block;
  padding: 0.8vh 2.4vh;
  background-color: #fff;
  color: #c33446;
  border-radius: 2vh;
  font-size: 2.2vh;
}

#gateenter:hover, #gateenter:focus { background-color: #fff696; color: #c33446; }

#gatecorner {
  position: absolute;
  right: 1vh;
  bottom: 1vh;
  padding: 0.25vh;
  background-color: #fff;
  border-radius: 1vh;
  line-height: 0;
}

#gatecorner img { width: 88px; height: 31px; }

/* ------------------------------------------------------------------ lander */

/* 100% rather than 100vw: 100vw counts the scrollbar's width too, which would
   push the right edge under it and force a horizontal scrollbar. */
#lander {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* On the gallery the nav is an ordinary bar at the top of the document; on the
   lander it overlays the hero so the lander still measures a clean 100vh. */
/* Fixed height, not padding: the bar must not change size when the webfont
   swaps in, or it would nudge the gallery down after first paint. */
#nav {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: #c33446;
  text-align: center;
  overflow: hidden;
}

body.atlander #nav {
  position: absolute;
  top: 0;
  left: 0;
}

#nav a {
  display: inline-block;
  padding: 0 12px;
  line-height: 44px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#lander .middle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 640px;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#lander .middle a { text-decoration: underline; }

#lander .down {
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 100%;
  text-align: center;
}

/* ----------------------------------------------------------------- gallery */

#gallery {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding-bottom: 10px;
}

/* Search left, post count right. #hits is floated so it must come first in
   source order; the form gets its own block formatting context to sit beside
   it rather than wrapping underneath. */
#searchbar {
  background: #c33446;
  padding: 8px 10px;
}

#searchbar #hits {
  float: right;
  padding-left: 12px;
  font-size: 13px;
  line-height: 34px;
  white-space: nowrap;
}

#searchbar #hits a { text-decoration: underline; }

#searchbar form { overflow: hidden; }

#searchbar input.q {
  width: 68%;
  max-width: 620px;
  padding: 7px 10px;
  border: 2px solid #fff;
  background: #fff;
  color: #c33446;
  font-family: inherit;
  font-size: 15px;
  vertical-align: middle;
}

#searchbar input.q:focus { border-color: #fff696; outline: none; }

.btn {
  padding: 7px 16px;
  margin-left: 6px;
  border: 2px solid #fff;
  background: #fff;
  color: #c33446;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  vertical-align: middle;
}

.btn:hover { background: #fff696; border-color: #fff696; }

/* ------------------------------------------------- projects / comics rails */

/* The rails are absolute with top:0 and bottom:0 inside #cols, whose height is
   set by #grid alone — that is what bounds them to exactly the grid's height
   and lets overflow-y scroll inside it. A float could not match a sibling's
   height without flexbox or scripting. */
/* min-height only matters for short result sets: a full 100-tile page is far
   taller, so the rails still bound to the grid as intended. Without it a search
   returning one row squeezes both rails into ~160px of scrollbar. */
#cols {
  position: relative;
  min-height: 70vh;
}

.rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#projects { left: 0; }
#comics   { right: 0; }

.rail h2 {
  margin: 0 0 8px;
  padding: 5px 6px;
  background: #c33446;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.tgl { position: absolute; left: -9999px; }
.tab { display: none; }

.entry {
  display: block;
  margin-bottom: 8px;
  padding: 4px;
  border: 3px solid transparent;
  background: #c33446;
  text-align: center;
  font-size: 13px;
  line-height: 1.25;
}

.entry img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 4px;
}

.entry:hover { border-color: #fff696; }
.entry .yr   { display: block; color: #fff696; font-size: 11px; }

/* -------------------------------------------------------------------- grid */

#grid {
  margin: 0 206px;
  padding: 8px 2px;
  font-size: 0;
  text-align: center;
}

.tile {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
  line-height: 150px;
  margin: 2px;
  border: 3px solid transparent;
  background: #c33446;
  text-align: center;
  vertical-align: top;
}

.tile img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

.tile:hover { border-color: #fff696; }

.tile .kids {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 20px;
  padding: 0 4px;
  background: #fff696;
  color: #c33446;
  font-size: 12px;
  line-height: 18px;
}

#empty { padding: 60px 20px; text-align: center; font-size: 18px; }

/* ------------------------------------------------------------------- pager */

#pager {
  clear: both;
  padding: 14px 8px 26px;
  text-align: center;
}

#pager a, #pager .cur, #pager .gap {
  display: inline-block;
  min-width: 30px;
  margin: 2px 1px;
  padding: 5px 7px;
  background: #c33446;
  font-size: 14px;
}

#pager a:hover { background: #fff696; color: #c33446; }
#pager .cur    { background: #fff696; color: #c33446; }
#pager .gap    { background: none; min-width: 0; }

#jump { margin-top: 10px; font-size: 14px; }

#jump input.pg {
  width: 72px;
  padding: 5px;
  border: 2px solid #fff;
  background: #fff;
  color: #c33446;
  font-family: inherit;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ viewer */

#vwrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#vbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  padding: 0 10px;
  background: #c33446;
  line-height: 36px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}

/* Absolute, not float: a float declared after inline content can be bumped
   onto the next line, which a 36px-tall nowrap bar would then clip away. */
#vbar .right {
  position: absolute;
  top: 0;
  right: 10px;
}

#vbar .left {
  display: block;
  padding-right: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#stage {
  position: absolute;
  top: 36px;
  left: 0;
  right: 200px;
  bottom: 0;
  padding: 6px;
  font-size: 0;
  text-align: center;
  overflow: hidden;
}

/* Ghost strut: vertical centring without flexbox. */
#stage:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/* Must stay a direct child of #stage: wrapping it in an inline element breaks
   both the strut alignment and the percentage max-height. */
#stage img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

#side {
  position: absolute;
  top: 36px;
  right: 0;
  bottom: 0;
  width: 200px;
  padding: 6px;
  background: #c33446;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#side .entry { background: #ff8096; }
#side .sel   { border-color: #fff696; }

#meta {
  padding: 2px 2px 8px;
  font-size: 12px;
  line-height: 1.5;
  word-wrap: break-word;
}

#meta .lbl {
  margin: 10px 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid #ff8096;
  color: #fff696;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#meta .row { margin-bottom: 2px; }
#meta .v   { color: #ff8096; }

#meta .taglist a {
  display: block;
  color: #ff8096;
}

#meta .taglist a:hover { color: #fff696; }

/* ------------------------------------------------------- mobile / portrait */

@media (orientation: portrait), (max-width: 900px) {

  /* One control opens both rails together. */
  .tab {
    display: block;
    margin: 6px;
    padding: 9px 6px;
    background: #c33446;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
  }

  .tab:hover { background: #fff696; color: #c33446; }
  .tgl:checked ~ .tab { background: #fff696; color: #c33446; }

  #cols { min-height: 0; }

  .rail {
    position: static;
    float: left;
    width: 50%;
    padding: 0 6px;
    overflow: visible;
  }

  .panel { display: none; }
  .tgl:checked ~ .rail .panel { display: block; }

  #grid {
    clear: both;
    margin: 0;
    padding: 4px 0;
  }

  .tile {
    width: 32.8%;
    height: 32vw;
    line-height: 32vw;
    margin: 1px 0;
    border-width: 2px;
  }

  /* Three links will not fit at desktop sizing, and #nav clips its overflow. */
  #nav a {
    padding: 0 7px;
    font-size: 12px;
    letter-spacing: 0;
  }

  #searchbar input.q { width: 58%; }
  #searchbar #hits   { font-size: 12px; padding-left: 8px; }

  .btn { padding: 7px 10px; margin-left: 4px; }

  /* Viewer becomes a normal scrolling document: image, then the strip
     underneath it, then tags and info. Static rather than a nested scroller so
     the #sel jump lands before paint, as on the gallery. */
  #vwrap {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
  }

  #vbar {
    position: static;
    width: 100%;
  }

  /* Drop the Prev/Next wording so the title has room on a phone. */
  #vbar .w    { display: none; }
  #vbar .left { padding-right: 96px; }
  #vbar .right { right: 10px; }

  #stage {
    position: static;
    height: 62vh;
    padding: 4px;
  }

  #side {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
  }

  /* Tall enough for thumbnail + page number + the horizontal scrollbar, which
     otherwise eats into the row and clips the number. */
  #strip {
    height: 144px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #strip .entry {
    display: inline-block;
    width: 92px;
    margin: 0 4px 0 0;
    vertical-align: top;
    white-space: normal;
  }

  /* Cap portrait thumbnails so a tall page cannot spill past the 124px strip. */
  #strip .entry img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    max-height: 84px;
  }

  #meta .taglist a { display: inline-block; margin-right: 10px; }

  /* Stack the gate's two panels instead of sitting them side by side. */
  #gategraphic, #gatecontent {
    display: block;
    width: 100%;
  }

  #gatemodal { width: 92%; }
  #gategraphic span { font-size: 6vh; }
  #gatetitle { font-size: 2.2vh; }
  #gatedesc  { font-size: 1.6vh; }
}