/*
Theme Name: Sandner 325
Theme URI: https://www.steffensandner.com
Author: Steffen Sandner
Description: Raw neon essay theme. System fonts only, white paper, three neon inks, text colliding with images. Built for a personal site that publishes slowly, on purpose.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sandner325
*/

:root{
  --white:#FFFFFF;
  --black:#000000;
  --green:#3CFF00;
  --pink:#FF00B7;
  --orange:#FF3000;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  background:var(--white);
  color:var(--black);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:20px;
  line-height:1.35;
  overflow-x:hidden;
}
a{color:inherit;}
a:focus-visible{outline:4px solid var(--pink);outline-offset:3px;}
::selection{background:var(--green);color:var(--black);}
img{max-width:100%;height:auto;}
em, .ital{font-family:"Times New Roman", Times, serif;font-style:italic;}
.hl-g{background:var(--green);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.hl-p{background:var(--pink);color:var(--black);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.c-o{color:var(--orange);}
.c-p{color:var(--pink);}

.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3vw,40px);}

/* topline */
.topline{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;
  padding:14px clamp(16px,3vw,40px);
  font-size:15px;font-weight:700;text-transform:uppercase;
}
.topline nav{display:flex;gap:18px;}
.topline a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
.topline a:hover{background:var(--green);}

/* ticker */
.ticker{
  overflow:hidden;white-space:nowrap;
  padding:8px 0;
  background:var(--black);color:var(--green);
  font-family:"Courier New", Courier, monospace;font-weight:700;font-size:15px;text-transform:uppercase;
}
.ticker-inner{display:inline-block;animation:tick 34s linear infinite;}
@media (prefers-reduced-motion: reduce){ .ticker-inner{animation:none;} }
.ticker span{margin:0 1.2em;}
.ticker b{color:var(--pink);}
@keyframes tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* intro */
.intro{position:relative;padding-top:clamp(30px,6vw,70px);}
.intro h1{
  font-size:clamp(46px,10.5vw,150px);
  font-weight:900;letter-spacing:-.02em;line-height:.9;
  text-transform:uppercase;
  margin-left:-4px;
}
.intro h1 em{
  font-weight:400;text-transform:none;letter-spacing:0;
  font-size:.45em;color:var(--orange);
}
.intro .sub{
  font-family:"Times New Roman", Times, serif;font-style:italic;
  font-size:clamp(22px,3vw,36px);
  margin-top:18px;max-width:34ch;
  transform:rotate(-1deg);
}

/* sticker */
.sticker{
  position:absolute;z-index:6;
  top:clamp(-10px,-1vw,-4px);right:clamp(4px,4vw,60px);
  width:clamp(110px,14vw,170px);height:clamp(110px,14vw,170px);
}
@media (prefers-reduced-motion: no-preference){
  .sticker{animation:spin 40s linear infinite;}
}
@keyframes spin{to{transform:rotate(360deg);}}
.sticker text{
  font-family:"Courier New", Courier, monospace;font-size:13.5px;letter-spacing:.16em;
  fill:var(--black);text-transform:uppercase;font-weight:700;
}

/* new essay: text crashes into the image */
.newblock{margin-top:clamp(50px,8vw,110px);position:relative;}
.newflag{
  font-family:"Courier New", Courier, monospace;font-weight:700;font-size:17px;text-transform:uppercase;
  display:inline-block;transform:rotate(-2deg);
}
.newblock h2{
  position:relative;z-index:2;
  font-size:clamp(42px,8.6vw,124px);
  font-weight:900;letter-spacing:-.02em;line-height:.88;
  text-transform:uppercase;
  color:var(--orange);
  margin:14px 0 -1.15em -4px;
  max-width:16ch;
}
.newblock h2 a{text-decoration:none;}
.newblock h2 a:hover{text-decoration:underline;text-decoration-thickness:6px;text-underline-offset:10px;}
.heroimg{
  position:relative;display:block;
  width:min(100%,980px);margin-left:auto;
  height:clamp(320px,60vh,620px);
  background:var(--orange);
}
.heroimg img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.06) saturate(1.08);
}
.heroimg .onimg{
  position:absolute;right:18px;bottom:16px;
  font-family:"Times New Roman", Times, serif;font-style:italic;
  font-size:clamp(20px,2.6vw,34px);
  color:var(--white);text-shadow:1px 1px 0 rgba(0,0,0,.6);
  text-align:right;max-width:24ch;
}
.readline{
  display:inline-block;margin-top:20px;
  font-size:clamp(22px,3vw,36px);font-weight:900;text-transform:uppercase;
  text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:8px;
}
.readline:hover{background:var(--pink);color:var(--black);}

/* essays: plain text list, images hiding behind */
.listsec{margin-top:clamp(70px,10vw,140px);position:relative;}
.secline{
  font-size:clamp(26px,3.6vw,44px);font-weight:900;text-transform:uppercase;
  margin-bottom:26px;
}
.secline .cnt{font-family:"Times New Roman", Times, serif;font-style:italic;font-weight:400;text-transform:none;font-size:.6em;color:var(--pink);}
.elist{list-style:none;position:relative;z-index:2;}
.elist li{
  font-size:clamp(24px,3.4vw,46px);
  font-weight:900;letter-spacing:-.01em;line-height:1.12;
  text-transform:uppercase;
  margin:14px 0;
}
.elist li a{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px;}
.elist li a:hover{background:var(--green);}
.elist li .yr{
  font-family:"Times New Roman", Times, serif;font-style:italic;font-weight:400;text-transform:none;
  font-size:.55em;letter-spacing:0;white-space:nowrap;
}
.elist li:nth-child(2){margin-left:clamp(20px,8vw,120px);}
.elist li:nth-child(4){margin-left:clamp(10px,4vw,60px);transform:rotate(-1.2deg);}
.elist li:nth-child(5){text-align:right;}
.elist li:nth-child(7){margin-left:clamp(20px,10vw,160px);}
.elist li:nth-child(8){transform:rotate(.8deg);}
.peek{position:absolute;z-index:1;overflow:hidden;}
.peek img{width:100%;height:100%;object-fit:cover;display:block;}
.peek1{width:clamp(140px,20vw,280px);height:clamp(140px,20vw,280px);right:4%;top:40px;transform:rotate(4deg);}
.peek2{width:clamp(120px,16vw,230px);height:clamp(120px,16vw,230px);left:2%;top:44%;transform:rotate(-5deg);}
.peek3{width:clamp(130px,18vw,250px);height:clamp(130px,18vw,250px);right:14%;bottom:-30px;transform:rotate(2deg);}

/* about */
.aboutsec{margin-top:clamp(80px,11vw,150px);position:relative;}
.portrait{
  float:left;
  width:clamp(130px,16vw,210px);height:clamp(130px,16vw,210px);
  object-fit:cover;
  margin:6px 26px 6px -8px;
  transform:rotate(-3deg);
}
.aboutsec p{
  font-size:clamp(21px,2.6vw,32px);
  line-height:1.3;font-weight:400;
  margin-bottom:.9em;max-width:44ch;
}
.aboutsec p b, .aboutsec p strong{font-weight:900;}
.facts{
  clear:both;margin-top:34px;
  font-family:"Courier New", Courier, monospace;font-weight:700;font-size:clamp(15px,1.6vw,19px);text-transform:uppercase;
  line-height:1.8;
}
.facts div span{background:var(--green);padding:0 6px;}
.facts div:nth-child(2n) span{background:var(--pink);color:var(--black);}
.facts a{text-decoration:underline;}

/* photo pile */
.pile{
  margin-top:clamp(70px,10vw,130px);
  display:flex;flex-wrap:wrap;align-items:flex-start;
  padding-bottom:20px;
}
.pile img{
  width:clamp(120px,17vw,240px);height:clamp(120px,17vw,240px);
  object-fit:cover;display:block;
}
.pile img:nth-child(1){transform:rotate(-6deg);}
.pile img:nth-child(2){transform:rotate(3deg);margin-left:-30px;margin-top:26px;}
.pile img:nth-child(3){transform:rotate(-2deg);margin-left:-24px;}
.pile img:nth-child(4){transform:rotate(7deg);margin-left:-36px;margin-top:40px;}
.pile img:nth-child(5){transform:rotate(-4deg);margin-left:-28px;margin-top:10px;}
.pile img:nth-child(6){transform:rotate(2deg);margin-left:-32px;margin-top:34px;}
.pilecap{
  font-family:"Times New Roman", Times, serif;font-style:italic;
  font-size:clamp(18px,2vw,24px);
  margin:14px 0 0 10px;transform:rotate(-1.5deg);
}

/* contact / site footer */
.contactsec{margin-top:clamp(70px,10vw,130px);padding-bottom:60px;}
.contactsec .big{
  font-size:clamp(52px,12vw,170px);
  font-weight:900;letter-spacing:-.02em;line-height:.88;text-transform:uppercase;
  margin-left:-5px;
}
.contactsec .big em{font-weight:400;text-transform:none;font-size:.4em;color:var(--pink);}
.contactsec .big a{color:var(--orange);text-decoration:underline;text-decoration-thickness:8px;text-underline-offset:12px;}
.contactsec .big a:hover{background:var(--green);color:var(--black);}
.mailnote{
  display:inline-block;
  font-family:"Times New Roman", Times, serif;font-style:italic;font-weight:400;text-transform:none;
  font-size:clamp(17px,2vw,26px);letter-spacing:0;
  background:var(--green);color:var(--black);padding:2px 10px;
  transform:rotate(-1.5deg);margin-top:14px;
}
.footline{
  margin-top:44px;
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font-size:15px;font-weight:700;
}
.footline a{text-decoration:underline;text-decoration-thickness:2px;}
.footline a:hover{background:var(--pink);color:var(--black);}
.footline .ciao{font-family:"Times New Roman", Times, serif;font-style:italic;font-weight:400;color:var(--orange);}

/* ---------- single essay ---------- */
.postsec{padding-top:clamp(30px,6vw,70px);}
.postflag{
  font-family:"Courier New", Courier, monospace;font-weight:700;font-size:17px;text-transform:uppercase;
  display:inline-block;transform:rotate(-2deg);
}
.postsec h1.ptitle{
  position:relative;z-index:2;
  font-size:clamp(40px,7.8vw,110px);
  font-weight:900;letter-spacing:-.02em;line-height:.88;
  text-transform:uppercase;
  color:var(--orange);
  margin:14px 0 -0.95em -4px;
  max-width:16ch;
}
.pimg{
  position:relative;display:block;
  width:min(100%,980px);margin-left:auto;
  height:clamp(280px,52vh,560px);
  background:var(--orange);
}
.pimg img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.06) saturate(1.08);}
.entry-content{
  max-width:720px;margin:clamp(40px,6vw,72px) auto 0;
  font-family:Georgia, "Times New Roman", serif;
  font-size:21px;line-height:1.55;
}
.entry-content p{margin-bottom:1.3em;}
.entry-content strong, .entry-content b{font-weight:700;}
.entry-content a{text-decoration:underline;text-decoration-thickness:2px;}
.entry-content a:hover{background:var(--green);}
.entry-content h2, .entry-content h3{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:900;text-transform:uppercase;line-height:1.02;
  margin:1.6em 0 .7em;
}
.entry-content h2{font-size:clamp(26px,3.4vw,40px);}
.entry-content h3{font-size:clamp(22px,2.6vw,30px);}
.entry-content blockquote{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:900;text-transform:uppercase;line-height:1.05;
  font-size:clamp(24px,3vw,36px);
  color:var(--orange);
  margin:1.6em 0;padding:0;border:0;
}
.entry-content img{display:block;margin:1.6em 0;}
.entry-content ul, .entry-content ol{margin:0 0 1.3em 1.2em;}
.entry-content .wp-caption, .entry-content figcaption{
  font-family:"Times New Roman", Times, serif;font-style:italic;font-size:17px;
}
.postfootline{
  max-width:720px;margin:clamp(40px,6vw,70px) auto 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:"Courier New", Courier, monospace;font-weight:700;font-size:15px;text-transform:uppercase;
}
.postfootline a{text-decoration:underline;}
.postfootline a:hover{background:var(--green);}
.postfootline .cats{color:var(--pink);}

/* generic page + archive */
.pagesec{padding-top:clamp(30px,6vw,70px);padding-bottom:clamp(30px,5vw,60px);}
.pagesec h1, .pagesec .pagetitle{
  font-size:clamp(36px,6.4vw,84px);
  font-weight:900;letter-spacing:-.02em;line-height:.9;text-transform:uppercase;
  color:var(--orange);
  margin:14px 0 .4em -3px;
}
.pagecontent{
  margin:10px 0 0;max-width:66ch;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:18px;line-height:1.5;
}
.pagecontent p{margin-bottom:1em;}
.pagecontent h2, .pagecontent h3{margin:1.4em 0 .5em;font-weight:900;text-transform:uppercase;}
.pagecontent a{text-decoration:underline;text-decoration-thickness:2px;}
.pagecontent a:hover{background:var(--green);}
.archlist{list-style:none;}

/* wp basics */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important;}

@media (max-width:820px){
  .peek1{right:-4%;}
  .peek2{left:-6%;}
  .elist li:nth-child(5){text-align:left;}
  .heroimg{width:100%;}
  .newblock h2{margin-bottom:-0.7em;}
  .pimg{width:100%;}
  .entry-content{font-size:19px;}
}