/* IGOR BRIKIN // brikin.dev — brutalist stub
   mono, black on white, hard edges, no animations */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#000;
  --paper:#fff;
  --acid:#ff0;
  --bar:48px;
}

html{
  background:var(--paper);
  -webkit-font-smoothing:none;
  -moz-osx-font-smoothing:auto;
  font-smooth:never;
  text-rendering:geometricPrecision;
}

body{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  color:var(--ink);
  background:var(--paper);
  line-height:1.3;
  font-size:16px;
  padding:24px;
  max-width:960px;
  margin:0 auto;
}

::selection{background:var(--ink);color:var(--paper)}

/* skip link */
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);
  padding:8px 12px;border:3px solid var(--ink);
  text-decoration:none;font-weight:700;
}
.skip:focus{left:8px;top:8px;z-index:99}

/* focus indicators — high contrast, no blur */
a:focus-visible,.skip:focus-visible{
  outline:4px solid var(--acid);
  outline-offset:2px;
  background:var(--ink);color:var(--acid);
}
.inverted a:focus-visible{
  outline-color:var(--acid);
  background:var(--paper);color:var(--ink);
}

/* HEADER / NAME MARK */
.mark{
  border:6px solid var(--ink);
  padding:20px 24px 12px;
  margin-bottom:32px;
  position:relative;
}
.meta{
  font-size:12px;
  letter-spacing:0.12em;
  border-bottom:3px solid var(--ink);
  padding-bottom:8px;
  margin-bottom:16px;
  text-transform:uppercase;
}
.mark h1{
  font-size:clamp(64px,18vw,180px);
  line-height:0.85;
  letter-spacing:-0.04em;
  font-weight:900;
  text-transform:uppercase;
  margin:8px 0;
}
.rule{
  font-size:14px;
  overflow:hidden;
  white-space:nowrap;
  margin-top:8px;
}

/* WIP PLATE */
.wip{
  border:6px solid var(--ink);
  margin:0 0 32px;
  text-align:center;
  background:var(--paper);
  transform:rotate(-1deg);
  position:relative;
}
.stripes{
  height:var(--bar);
  background-image:repeating-linear-gradient(
    135deg,
    var(--ink) 0 18px,
    var(--acid) 18px 36px
  );
  border-bottom:3px solid var(--ink);
}
.wip .stripes:last-of-type{
  border-bottom:0;
  border-top:3px solid var(--ink);
}
.wip h2{
  font-size:clamp(28px,7vw,56px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  padding:20px 12px 8px;
}
.wip-sub{
  font-size:13px;
  padding:0 12px 20px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* CONTENT BLOCKS */
.block{
  border:3px solid var(--ink);
  padding:20px 24px;
  margin-bottom:24px;
}
.kicker{
  font-size:13px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  font-weight:700;
  border-bottom:3px solid currentColor;
  padding-bottom:8px;
  margin-bottom:16px;
}
.lede{
  font-size:clamp(18px,3.2vw,26px);
  font-weight:700;
  line-height:1.25;
  text-transform:uppercase;
}

/* INVERTED BLOCK */
.inverted{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
.inverted a{color:var(--paper)}
.inverted a:hover{background:var(--acid);color:var(--ink);text-decoration:none}

/* CONTACT LIST */
.contact{
  list-style:none;
  font-size:clamp(15px,2.4vw,20px);
}
.contact li{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:10px 0;
  border-bottom:2px dashed currentColor;
  flex-wrap:wrap;
}
.contact li:last-child{border-bottom:0}
.contact .key{
  font-weight:700;
  min-width:7ch;
  letter-spacing:0.08em;
}
.contact .sep{opacity:0.7}
.contact a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:2px;
  word-break:break-all;
}

/* ASCII DIVIDER */
.ascii{
  font-size:14px;
  letter-spacing:0;
  overflow:hidden;
  white-space:nowrap;
  margin:24px 0;
  user-select:none;
}

/* FOOTER */
footer{
  border-top:3px solid var(--ink);
  padding-top:16px;
  margin-top:16px;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.coord{font-variant-numeric:tabular-nums}

/* MOBILE — stay raw, just stack */
@media (max-width:560px){
  body{padding:12px}
  .mark{padding:14px 14px 8px;border-width:4px}
  .wip{border-width:4px;transform:rotate(-1.5deg)}
  .block{padding:14px 16px}
  .contact li{gap:6px;padding:8px 0}
  .contact .key{min-width:0;display:block;width:100%}
  .contact .sep{display:none}
  footer{flex-direction:column;gap:6px}
}

/* PRINT — flatten the rotation */
@media print{
  body{padding:0;max-width:none}
  .wip{transform:none}
  .inverted{background:#fff;color:#000;border:3px solid #000}
  .inverted a{color:#000}
}

/* respect reduced motion (we have none, but be explicit) */
@media (prefers-reduced-motion:reduce){
  .wip{transform:none}
}