/* ------------------------------------------------------------------
   James Seppi — jseppi.github.io
   Display face: LEMON MILK by MARSNEV (marsnev.com), donationware,
   free for personal use. Caps-only in the free release, so it is used
   for display roles only; Jost carries all body text.
   ------------------------------------------------------------------ */

@font-face{
  font-family:"LEMONMILK";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/css/fonts/LEMONMILK-Bold.otf") format("opentype");
}
/* the artifact platform supplied these; a plain page has to declare them */
:root{ color-scheme:light; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ color-scheme:dark; }
}
:root[data-theme="dark"]{ color-scheme:dark; }

html{
  background:var(--paper);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img,svg{ max-width:100%; }
[hidden]{ display:none !important; }

:root{
  --gutter:clamp(16px,5vw,72px);

  --paper:#E8DCC4; --paper-2:#DFD0B2; --ink:#14110E; --ink-soft:#3A342C; --ash:#6F6555;
  --vermilion:#D6321B; --cobalt:#1B4B8F; --ochre:#D89406;
  --rule:#14110E; --on-vermilion:#F7EEE0;

  --invert-bg:#14110E; --invert-fg:#EDE3D0; --invert-soft:#A79E8D; --invert-accent:#E8563A;

  --font-display:'LEMONMILK','Arial Black',Impact,sans-serif;
  --font-cond:'Oswald','Arial Narrow',sans-serif;
  --font-body:'Jost','Century Gothic',system-ui,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#12120F; --paper-2:#1C1B16; --ink:#F0E7D6; --ink-soft:#C3B9A6; --ash:#9C917B;
    --vermilion:#F0503A; --cobalt:#6B9EE0; --ochre:#F0B429;
    --rule:#F0E7D6; --on-vermilion:#120E0A;
    --invert-bg:#F0E7D6; --invert-fg:#12120F; --invert-soft:#5C554A; --invert-accent:#C4301A;
  }
}
:root[data-theme="dark"]{
  --paper:#12120F; --paper-2:#1C1B16; --ink:#F0E7D6; --ink-soft:#C3B9A6; --ash:#9C917B;
  --vermilion:#F0503A; --cobalt:#6B9EE0; --ochre:#F0B429;
  --rule:#F0E7D6; --on-vermilion:#120E0A;
  --invert-bg:#F0E7D6; --invert-fg:#12120F; --invert-soft:#5C554A; --invert-accent:#C4301A;
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.62;
  overflow-x:hidden;
}

.wrap{
  padding-inline:var(--gutter);
  padding-block:clamp(24px,4vw,48px);
}

h1,h2,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }

a{ color:inherit; }
a.inline{
  color:var(--cobalt);
  text-decoration:none;
  background-image:linear-gradient(var(--vermilion),var(--vermilion));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0% 3px;
  transition:background-size 200ms ease;
}
a.inline:hover, a.inline:focus-visible{ background-size:100% 3px; }
a:focus-visible, button:focus-visible{
  outline:3px solid var(--vermilion);
  outline-offset:3px;
}

/* ================= HERO ================= */
.hero{
  position:relative;
  overflow:hidden;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  padding-block:clamp(28px,5vw,56px) clamp(16px,3vw,36px);
}

.hero-content{ position:relative; z-index:1; }

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.eyebrow{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.92rem;
  color:var(--ink-soft);
}

.name-block{ margin:.5em 0 0; font-weight:400; }

/* repeated full name, after the DEPERO page in Depero Futurista (1927):
   letters alternate flat ink / flat vermilion. JAMES SEPPI is an even ten
   letters, so each row has to be started on the opposite colour by hand —
   same problem Depero had with six-letter DEPERO. */
.name-stack{ display:block; }
.name-row{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.6rem,11vw,9rem);
  line-height:.72;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.name-row .k{ color:var(--ink); }
.name-row .v{ color:var(--vermilion); }
.name-row .w2{ margin-left:.18em; }

/* every E kicks back the same -7deg — e1 is the E in JAMES, e2 the E in SEPPI */
.name-row .e1, .name-row .e2{
  display:inline-block;
  transform-origin:50% 60%;
  transform:rotate(-7deg);
}
.name-row:nth-child(1){ margin-left:0;    animation:row-in-l 700ms cubic-bezier(.2,.8,.3,1) 0ms both; }
.name-row:nth-child(2){ margin-left:1.4%; animation:row-in-r 700ms cubic-bezier(.2,.8,.3,1) 80ms both; }
.name-row:nth-child(3){ margin-left:.5%;  animation:row-in-l 700ms cubic-bezier(.2,.8,.3,1) 160ms both; }
.name-row:nth-child(4){ margin-left:2%;   animation:row-in-r 700ms cubic-bezier(.2,.8,.3,1) 240ms both; }
.name-row:nth-child(5){ margin-left:.9%;  animation:row-in-l 700ms cubic-bezier(.2,.8,.3,1) 320ms both; }
@keyframes row-in-l{
  from{ opacity:0; transform:translateX(-5%); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes row-in-r{
  from{ opacity:0; transform:translateX(5%); }
  to{ opacity:1; transform:translateX(0); }
}

.band-wrap{
  position:relative;
  height:clamp(58px,7.6vw,92px);
  margin-block:clamp(56px,9vw,108px) clamp(40px,6vw,72px);
}
/* thin ink bar crossing the other way — sits behind, so only its ends show */
.band-cross{
  position:absolute;
  top:50%; left:-26%; right:-26%;
  height:clamp(8px,1.1vw,14px);
  margin-top:clamp(-7px,-.55vw,-4px);
  background:var(--ink);
  transform:rotate(4deg);
  transform-origin:center center;
  z-index:0;
  animation:cross-in 800ms ease-out 380ms both;
}
.band{
  position:absolute;
  top:0; left:-16%; right:-16%;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--vermilion);
  transform:rotate(-5deg);
  transform-origin:center center;
  z-index:1;
  animation:band-in 800ms ease-out 200ms both;
}
.band-track{
  display:flex;
  align-items:center;
  white-space:nowrap;
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:600;
  font-size:clamp(1rem,2.5vw,1.8rem);
  color:var(--on-vermilion);
}
.sq{
  flex:none;
  display:inline-block;
  width:.42em; height:.42em;
  background:var(--on-vermilion);
  margin-inline:1.15em;
}
@keyframes band-in{
  from{ transform:rotate(-5deg) scaleX(0); }
  to{ transform:rotate(-5deg) scaleX(1); }
}
@keyframes cross-in{
  from{ opacity:0; transform:rotate(4deg) scaleX(0); }
  to{ opacity:1; transform:rotate(4deg) scaleX(1); }
}

.fragments{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.fragments span{
  position:absolute;
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ash);
  white-space:nowrap;
}
.fragments .accent{ color:var(--vermilion); }
.f1{ top:16%; right:6%;  font-size:.95rem; font-weight:500; transform:rotate(-7deg); }
.f2{ top:28%; right:17%; font-size:1.1rem; transform:rotate(6deg); font-family:var(--font-display); font-weight:700; letter-spacing:.02em; }
.f3{ top:40%; right:4%;  font-size:.9rem;  font-weight:400; transform:rotate(-4deg); }
.f4{ top:52%; right:19%; font-size:1rem;   transform:rotate(9deg); font-family:var(--font-display); font-weight:700; letter-spacing:.02em; }
@media (max-width:900px){ .fragments{ display:none; } }

/* ================= SECTION SCAFFOLD ================= */
.section{
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  padding-block:clamp(40px,6vw,80px);
  border-top:5px solid var(--rule);
}
.sec-label{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.84rem;
  color:var(--ash);
  margin-bottom:.9em;
}
.heading-wrap{ margin-bottom:1.3em; }
.section h2{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.6rem,4.4vw,2.8rem);
  line-height:1.15;
  letter-spacing:0;
  text-wrap:balance;
}
.section p{ max-width:65ch; }

/* ---- 1. ABOUT: asymmetric editorial spread ---- */
.about-grid{
  display:grid;
  grid-template-columns:5fr 4fr;
  gap:clamp(22px,4vw,60px);
  align-items:start;
}
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:1.4em; } }
.section p.about-lead{
  font-size:clamp(1.1rem,1.9vw,1.35rem);
  color:var(--ink);
  max-width:40ch;
}
.about-lead::first-letter{
  font-family:var(--font-display);
  font-weight:700;
  font-size:3.2em;
  line-height:.88;
  float:left;
  color:var(--vermilion);
  padding-right:.14em;
}
.about-rest p{ color:var(--ink-soft); max-width:52ch; }
.about-rest p + p{ margin-top:1.1em; }

/* ---- 2. WORK: inverted full-bleed block ---- */
.sec-work{
  background:var(--invert-bg);
  color:var(--invert-fg);
  border-top-color:var(--invert-bg);
}
.sec-work h2{ font-size:clamp(1.8rem,5vw,3.2rem); color:var(--invert-fg); }
.sec-work .sec-label{ color:var(--invert-soft); }
.sec-work a:focus-visible{ outline-color:var(--invert-accent); }

.jobs{ max-width:74ch; }
.jobs li{
  display:grid;
  grid-template-columns:3.4rem 1fr;
  gap:1.2em;
  padding-block:1.4em;
}
.jobs li:not(:first-child){ border-top:3px solid var(--invert-soft); }
.jobs li:nth-child(2){ margin-inline-start:6%; }
.jobs li:nth-child(3){ margin-inline-start:12%; }
.jobs li:nth-child(4){ margin-inline-start:18%; }
@media (max-width:700px){ .jobs li{ margin-inline-start:0 !important; } }
.jobs .idx{
  font-family:var(--font-cond);
  font-weight:600;
  font-size:1.5rem;
  color:var(--invert-accent);
  font-variant-numeric:tabular-nums;
}
.jobs .org{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.1rem,2.8vw,1.7rem);
  line-height:1.2;
  color:var(--invert-fg);
  text-decoration:none;
  background-image:linear-gradient(var(--invert-accent),var(--invert-accent));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0% 4px;
  transition:background-size 200ms ease;
}
.jobs .org:hover, .jobs .org:focus-visible{ background-size:100% 4px; }
.jobs .role{
  display:block;
  margin-top:.45em;
  font-family:var(--font-body);
  color:var(--invert-soft);
  font-size:1.02rem;
}

/* ---- 3. OTHER THINGS: ruled heading, one feature block, five tickets ---- */
.sec-things .heading-wrap{
  border-bottom:6px solid var(--vermilion);
  padding-bottom:.45em;
}
.tickets{
  display:flex;
  flex-wrap:wrap;
  gap:1.4em;
  margin-top:1.5em;
}
.ticket{
  flex:1 1 280px;
  max-width:420px;
  background:var(--paper);
  border:3px solid var(--rule);
  padding:1.2em 1.3em;
  transition:transform 150ms ease;
}
.ticket:nth-child(1){ transform:rotate(-2.2deg); }
.ticket:nth-child(2){ transform:rotate(1.6deg); }
.ticket:nth-child(4){ transform:rotate(2.4deg); }
.ticket:nth-child(5){ transform:rotate(-2.5deg); }
.ticket:nth-child(6){ transform:rotate(1.9deg); }
.ticket:hover, .ticket:focus-within{ transform:rotate(0deg); }
.ticket .t-idx{
  display:block;
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.8rem;
  color:var(--vermilion);
  margin-bottom:.5em;
  font-variant-numeric:tabular-nums;
}
.ticket p{ color:var(--ink-soft); max-width:none; }

.ticket.feature{
  flex:1 1 100%;
  max-width:none;
  background:var(--paper-2);
  border-width:5px;
  padding:1.5em;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(14px,3vw,36px);
  align-items:center;
  transform:rotate(0deg);
}
@media (max-width:640px){ .ticket.feature{ grid-template-columns:1fr; } }
.ticket.feature .t-idx{ grid-column:1 / -1; }
.pull-figure{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--vermilion);
  font-size:clamp(2rem,7vw,3.6rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.ticket.feature p{ color:var(--ink); font-size:1.12rem; }

/* ---- 4. CONTACT: oversized heading, single ruled list ---- */
.sec-contact h2{ font-size:clamp(2rem,6vw,4rem); }
.contact-list{ max-width:72ch; }
.contact-row{
  display:grid;
  grid-template-columns:7.5em 1fr;
  gap:1em;
  border-top:4px solid var(--rule);
  padding-block:.85em;
}
.contact-row:last-of-type{ border-bottom:4px solid var(--rule); }
@media (max-width:520px){ .contact-row{ grid-template-columns:1fr; gap:.15em; } }
.contact-row dt{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ash);
  font-size:.94rem;
}
.contact-row dd{ font-family:var(--font-body); overflow-wrap:break-word; }
/* ================= FOOTER ================= */
.site-footer{
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  padding-block:1.4em;
  border-top:5px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1em;
}
.footer-left p{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.8rem;
  color:var(--ash);
}
#theme-toggle{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.8rem;
  border:3px solid var(--rule);
  background:var(--paper-2);
  color:var(--ink);
  padding:.6em 1.1em;
  cursor:pointer;
}
#theme-toggle:hover{ background:var(--vermilion); color:var(--on-vermilion); border-color:var(--vermilion); }

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