:root{
  --bg:#77c9ff;
  --text:#444;
  --muted:#5a5a5a;
  --accent:#c97b5b;

  --layout-max:1280px;
  --gutter:clamp(1.25rem, 4vw, 4rem);

  --radius:1.35rem;

  --headshot-w:320px;
  --intro-gap:clamp(2rem, 5vw, 4.5rem);

  --shadow-soft:0 6px 16px rgba(0,0,0,.06);
  --shadow-large:0 18px 40px rgba(0,0,0,.08);

  --space-1:.5rem;
  --space-2:.75rem;
  --space-3:1rem;
  --space-4:1.5rem;
  --space-5:2rem;
  --space-6:3rem;
  --space-7:4.5rem;
  --space-8:6rem;

  --pill-ooh:rgba(223,205,223,.95);
  --pill-event:rgba(248,228,214,.95);
  --pill-web:rgba(247,246,234,.95);
  --pill-print:rgba(208,226,214,.95);
  --pill-digital:rgba(190,219,221,.95);
  --pill-apparel:rgba(245,220,225,.95);
  --pill-photo:rgba(221,209,198,.95);
}

html.theme-warm{
  --bg:#f5a642;
  --text:#3f3832;
  --muted:#5e554c;
  --accent:#a15f42;

  --pill-ooh:rgba(232,214,196,.95);
  --pill-event:rgba(245,214,192,.95);
  --pill-web:rgba(246,236,213,.95);
  --pill-print:rgba(225,216,191,.95);
  --pill-digital:rgba(209,215,190,.95);
  --pill-apparel:rgba(239,210,207,.95);
  --pill-photo:rgba(223,202,180,.95);
}

html.theme-simple{
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:#444;
  --accent:#b8744f;

  --pill-ooh:rgba(235,235,235,.92);
  --pill-event:rgba(240,240,240,.92);
  --pill-web:rgba(232,232,232,.92);
  --pill-print:rgba(228,228,228,.92);
  --pill-digital:rgba(230,230,230,.92);
  --pill-apparel:rgba(238,238,238,.92);
  --pill-photo:rgba(236,236,236,.92);
}

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

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, sans-serif;
  font-size:18px;
  line-height:1.7;
  font-weight:400;
  letter-spacing:-0.01em;
  background:var(--bg);
  color:var(--text);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}

html.theme-warm body{
  text-shadow:0 0 1px rgba(0,0,0,.04);
}

html.theme-simple body{
  text-shadow:none;
}

h1,
.project-title{
  font-family:"Lora", serif;
  letter-spacing:-0.01em;
  line-height:1.1;
  font-size:clamp(2rem, 3vw, 2.9rem);
  margin:0;
}

h1{
  font-weight:600;
  margin:0 0 .6rem 0;
}

h2{
  font-family:"Inter", system-ui, sans-serif;
  font-size:clamp(2rem, 3.5vw, 3rem);
  font-weight:600;
}

h3,
.caption-subhead,
.project-kicker,
.contact-links,
.work-links,
.image-caption-text,
.site-footer,
.theme-btn,
.theme-label,
.theme-close{
  font-family:"Manrope", system-ui, sans-serif;
}

h3{
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:1.20rem;
  color:#333;
  margin-bottom:.75rem;
}

p,
.lede,
.project-desc{
  font-family:"Inter", system-ui, -apple-system, sans-serif;
}

a,
button,
.work-filter{
  transition:
    color .22s ease,
    border-color .22s ease,
    opacity .22s ease,
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease;
}

/* Background system */

body > *{
  position:relative;
  z-index:1;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:-5;
}

html::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("https://julianlorentz.com/images/background.jpg");
  background-size:cover;
  background-position:center;
  opacity:.22;
  z-index:-4;
  pointer-events:none;
  transition:opacity .45s ease;
}

html::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("/images/rock-background.jpg");
  background-size:cover;
  background-position:center;
  opacity:0;
  z-index:-3;
  pointer-events:none;
  transition:opacity .45s ease;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(246,248,251,.72),
    rgba(246,248,251,.78)
  );
  z-index:-2;
  pointer-events:none;
  transition:background .45s ease;
}

html.theme-warm::before{
  opacity:0;
}

html.theme-warm::after{
  opacity:.18;
}

html.theme-warm body::after{
  background:linear-gradient(
    180deg,
    rgba(255,248,240,.62),
    rgba(255,248,240,.68)
  );
}

html.theme-simple::before{
  opacity:0;
}

html.theme-simple::after{
  opacity:0;
}

html.theme-simple body::after{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,1),
    rgba(252,252,252,1)
  );
}

html::before,
html::after,
body::before,
body::after{
  will-change:opacity, background;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Skip link */

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip-link:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  padding:.6rem .9rem;
  background:white;
  border-radius:.5rem;
  outline:2px solid rgba(0,0,0,.35);
  z-index:1002;
}

/* Theme toggle */

.theme-toggle{
  position:fixed;
  top:1.1rem;
  right:1.25rem;
  z-index:1001;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.3rem;
  border-radius:999px;
  background:rgba(255,255,255,.46);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.4);
  transition:opacity .3s ease, transform .3s ease;
}

.theme-toggle.is-hidden{
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
}

.theme-label{
  font-size:.86rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
  color:var(--text);
  opacity:.78;
  padding:0 .2rem 0 .25rem;
  white-space:nowrap;
}

.theme-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:.86rem;
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  padding:.62rem .95rem;
  border-radius:999px;
  cursor:pointer;
  opacity:.78;
}

.theme-btn:hover{
  opacity:1;
}

.theme-btn.active{
  opacity:1;
  background:rgba(255,255,255,.72);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}

.theme-close{
  appearance:none;
  border:none;
  background:none;
  font-size:1rem;
  font-weight:600;
  line-height:1;
  padding:.4rem .5rem;
  margin-left:.25rem;
  border-radius:999px;
  cursor:pointer;
  opacity:.55;
  color:var(--text);
  transition:opacity .2s ease, background .2s ease;
}

.theme-close:hover{
  opacity:.9;
  background:rgba(0,0,0,.05);
}

html.theme-warm .theme-toggle{
  background:rgba(255,248,240,.42);
  border-color:rgba(160,120,80,.14);
}

html.theme-warm .theme-btn.active{
  background:rgba(255,250,244,.76);
}

html.theme-simple .theme-toggle{
  background:rgba(255,255,255,.92);
  border-color:rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

html.theme-simple .theme-btn.active{
  background:rgba(240,240,240,.95);
}

/* Layout */

.container{
  width:min(var(--layout-max),100%);
  padding:0 var(--gutter);
  margin:0 auto;
}

.section{
  margin-bottom:var(--space-5);
}

/* Intro */

.section.intro{
  padding-top:var(--space-4);
}

.intro-row{
  display:grid;
  grid-template-columns:minmax(260px, var(--headshot-w)) 1fr;
  gap:var(--intro-gap);
  align-items:center;
}

.headshot{
  width:100%;
  max-width:var(--headshot-w);
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
  border-radius:var(--radius);
  display:block;
  margin:0 auto;
  box-shadow:var(--shadow-soft);
}

.contact-links{
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:.015em;
  margin:var(--space-3) 0 var(--space-5) 0;
}

.contact-links a,
.site-footer a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.contact-links a:hover,
.site-footer a:hover{
  color:var(--accent);
  border-color:var(--accent);
}

.sep{
  margin:0 .75rem;
  color:rgba(68,68,68,.12);
}

html.theme-warm .sep{
  color:rgba(80,60,40,.14);
}

html.theme-simple .sep{
  color:rgba(0,0,0,.22);
}

.lede,
.project-desc{
  font-size:clamp(1.15rem, 1.8vw, 1.35rem);
  line-height:1.6;
  color:var(--muted);
  font-weight:400;
}

.lede{
  max-width:54ch;
}

/* Featured section */

.work{
  padding-top:var(--space-1);
}

.work-section-header{
  position:relative;
  padding-top:var(--space-4);
  margin-bottom:var(--space-4);
}

.work-section-header::before{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin-bottom:1rem;
  background:rgba(0,0,0,.10);
  box-shadow:
    0 -2px 60px rgba(0,0,0,.66),
    0 -1px 30px rgba(0,0,0,.65);
}

.work-links-wrap{
  position:relative;
}

.work-links{
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.015em;
  opacity:.95;
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  align-items:center;
  margin:0 0 var(--space-6) 0;
}

.work-filter{
  appearance:none;
  border:none;
  background:none;
  padding:0 0 .08em 0;
  margin:0;
  font:inherit;
  line-height:1.2;
  color:inherit;
  cursor:pointer;
  border-bottom:1px solid transparent;
  opacity:.78;
}

.work-filter:hover,
.work-filter.active{
  color:var(--accent);
  border-color:var(--accent);
  opacity:1;
}

/* Projects */

.project-stack{
  display:grid;
  gap:var(--space-7);
}

.project-card{
  display:none;
  gap:var(--space-4);
  padding-bottom:var(--space-5);
  margin-bottom:var(--space-5);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.project-card.active{
  display:grid;
}

.project-kicker{
  display:inline-block;
  width:fit-content;
  align-self:start;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#777;
  line-height:1;
  padding:.35rem .6rem;
  border-radius:999px;
  margin:0 0 .4rem 0;
  position:relative;
  top:.08rem;
  background:rgba(201,123,91,.14);
}

html.theme-warm .project-kicker{
  color:#6e5a4d;
}

.project-card[data-category="ooh"] .project-kicker{
  background:var(--pill-ooh);
}

.project-card[data-category="event"] .project-kicker{
  background:var(--pill-event);
}

.project-card[data-category="web"] .project-kicker{
  background:var(--pill-web);
}

.project-card[data-category="print"] .project-kicker{
  background:var(--pill-print);
}

.project-card[data-category="digital"] .project-kicker{
  background:var(--pill-digital);
}

.project-card[data-category="apparel"] .project-kicker{
  background:var(--pill-apparel);
}

.project-card[data-category="photo"] .project-kicker{
  background:var(--pill-photo);
}

.project-title{
  font-weight:600;
  margin:0;
}

.project-desc{
  max-width:62ch;
  margin:0;
}

.project-image{
  width:100%;
  aspect-ratio:5/3;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
  opacity:0;
  transform:translateY(4px);
  box-shadow:var(--shadow-soft);
  transition:
    opacity .42s ease,
    transform .42s ease,
    box-shadow .35s ease;
}

.project-image.is-visible{
  opacity:1;
  transform:translateY(0);
}

.project-card:hover .project-image{
  box-shadow:var(--shadow-large);
}

html.theme-warm .project-image{
  box-shadow:0 10px 28px rgba(80,50,30,.12);
}

html.theme-simple .project-image{
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.image-caption{
  margin-top:.35rem;
  padding:0 .15rem;
}

.image-caption-text{
  font-size:.95rem;
  line-height:1.6;
  color:#666;
  margin:0;
  font-weight:500;
}

/* Footer */

.site-footer{
  font-size:.92rem;
  color:rgba(120,120,120,.7);
  padding:var(--space-6) 0;
}

html.theme-warm .site-footer{
  color:rgba(120,100,80,.65);
}

/* Mobile */

@media(max-width:900px){

  .intro-row{
    grid-template-columns:1fr;
    gap:var(--space-5);
    text-align:left;
  }

  .headshot{
    width:min(100%, 420px);
    max-width:none;
    margin:0;
  }

  h1{
    font-size:clamp(2rem, 3vw, 2.9rem);
    line-height:1.1;
  }

  .image-caption-text{
    font-size:.98rem;
    line-height:1.55;
  }

  .work-links{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    scroll-behavior:smooth;
    padding-bottom:.25rem;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(
      to right,
      black 0,
      black 20px,
      black calc(100% - 20px),
      transparent 100%
    );
    mask-image:linear-gradient(
      to right,
      black 0,
      black 20px,
      black calc(100% - 20px),
      transparent 100%
    );
  }

  .work-links::-webkit-scrollbar{
    display:none;
  }

  .work-filter{
    flex:0 0 auto;
  }
}

@media(max-width:900px) and (orientation:landscape){
  html::before,
  html::after{
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
  }
}

@media(max-width:640px){

  body{
    font-size:17px;
  }

  .section{
    margin-bottom:var(--space-6);
  }

  .intro-row{
    gap:var(--space-4);
  }

  h1{
    font-size:clamp(2rem, 3vw, 2.9rem);
    line-height:1.1;
  }

  .image-caption-text{
    font-size:.9rem;
    line-height:1.5;
  }

  .lede,
  .project-desc{
    font-size:clamp(1.15rem, 1.8vw, 1.35rem);
    line-height:1.6;
  }

  .theme-toggle{
    top:.85rem;
    right:.85rem;
    padding:.25rem;
  }

  .theme-label{
    font-size:.8rem;
  }

  .theme-btn{
    font-size:.8rem;
    padding:.56rem .82rem;
  }
}