*{box-sizing:border-box} :root{--paper:#e6e0d7;--red:#d7353a}html,body{width:100%;min-height:100%;margin:0;overflow-x:hidden;overflow-y:auto}body{background:#0e0d0d;color:var(--paper);font-family:"Special Elite",monospace}.site{position:relative;width:100%;height:auto;min-height:100dvh;overflow:hidden;padding:18px 4.2vw 3vh;background:radial-gradient(ellipse at 20% 60%,rgba(100,35,32,.16),transparent 42%),repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px),#111010}.site:before{content:"";position:absolute;inset:12px;border:1px solid #e6e0d740;pointer-events:none}.topbar{height:76px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #e6e0d726;position:relative;z-index:2}.wordmark{color:var(--paper);font:clamp(24px,3.4vw,46px) "Permanent Marker",cursive;text-decoration:none;transform:rotate(-7deg);letter-spacing:-3px}.wordmark span{color:var(--red);font-size:.6em;margin-left:5px}nav{display:flex;gap:clamp(24px,4.5vw,70px);padding-top:15px}nav a{text-decoration:none;text-transform:uppercase;color:#ddd8d2;font:500 13px Oswald,sans-serif;letter-spacing:2px;padding-bottom:12px}nav a:hover,nav a.active{color:var(--red);border-bottom:2px solid var(--red)}.header-star{font:40px "Permanent Marker";transform:rotate(20deg)}.content{min-height:calc(100dvh - 100px);height:auto;display:grid;grid-template-columns:minmax(270px,.95fr) minmax(390px,1.05fr) minmax(125px,.35fr);gap:clamp(24px,4vw,65px);align-items:center;position:relative;z-index:1;padding:2vh 1.5vw 1vh}.portrait-panel{height:min(72vh,700px);min-height:390px;position:relative;display:flex;align-items:center}.portrait-frame{width:100%;height:91%;padding:12px;background:#d8d1c7;transform:rotate(-2deg);clip-path:polygon(2% 0,98% 2%,100% 97%,4% 100%,0 5%);position:relative;box-shadow:0 15px 45px #000}.portrait-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.12) sepia(.12);display:block}.photo-x{position:absolute;right:7%;top:2%;color:var(--red);font:clamp(40px,6vw,85px) "Permanent Marker";transform:rotate(12deg)}.tape{position:absolute;z-index:2;width:130px;height:30px;background:#cac2bfa6;transform:rotate(-8deg)}.tape-one{top:1%;left:24%}.scrap-note{position:absolute;bottom:1%;left:3%;z-index:3;background:#d9d0c3;color:#171414;padding:8px 15px;font:clamp(12px,1.35vw,18px) "Permanent Marker";line-height:1.6;transform:rotate(-7deg);box-shadow:3px 4px #0006}.scribble{position:absolute;color:var(--paper);font:70px "Permanent Marker"}.scribble-left{top:18%;left:-9%;transform:rotate(-20deg)}.smile{position:absolute;bottom:0;right:8%;font:70px "Special Elite";transform:rotate(15deg)}.intro{align-self:center;padding-top:1vh;min-width:0}.eyebrow{font:clamp(22px,3vw,42px) "Permanent Marker";margin:0 0 -2px 8px;transform:rotate(-4deg)}h1{font:clamp(54px,7.4vw,112px)/.98 Oswald,sans-serif;font-weight:700;letter-spacing:-4px;margin:0 0 28px;color:#e7e2dc;text-shadow:2px 2px #777;position:relative}h1:after{content:"";position:absolute;left:0;right:10%;bottom:-8px;height:5px;border-radius:50%;border-top:3px solid var(--red);transform:rotate(-3deg)}.red-star{color:var(--red);font:.55em "Permanent Marker";display:inline-block;transform:rotate(18deg);vertical-align:top}.bio{max-width:520px;font-size:clamp(13px,1.22vw,17px);line-height:1.7;letter-spacing:.3px}.bio p{margin:8px 0}.bio .meta{color:#f0ece7;margin-bottom:12px}.socials{display:flex;gap:24px;margin:24px 0}.socials a{color:#e9e5df;text-decoration:none;width:32px;height:32px;display:grid;place-items:center;transition:color .2s,transform .2s}.socials svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.socials svg .dot{fill:currentColor;stroke:none}.socials a:nth-child(2) svg,.socials a:nth-child(3) svg{fill:currentColor;stroke:none}.socials a:nth-child(3) svg .play{fill:#111010}.socials a:hover{color:var(--red);transform:translateY(-3px)}.collage{height:76%;position:relative;align-self:center;overflow:visible}.collage-photo{position:absolute;background-size:cover;background-position:center;border:7px solid #d4cec4;filter:grayscale(1) contrast(1.2);box-shadow:0 10px 25px #0008}.photo-a{width:125%;height:36%;top:0;right:-20%;transform:rotate(3deg);background-image:url("https://images.unsplash.com/photo-1501386761578-eac5c94b800a?w=500&auto=format&fit=crop&q=80")}.photo-b{width:110%;height:31%;top:40%;right:-3%;transform:rotate(-4deg);background-image:url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?w=500&auto=format&fit=crop&q=80")}.photo-c{width:105%;height:27%;bottom:0;right:-15%;transform:rotate(5deg);background-image:url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?w=500&auto=format&fit=crop&q=80")}.butterfly{position:absolute;top:10%;left:-20%;color:#e4ded5;font:80px serif;transform:rotate(30deg);z-index:2}.chain{position:absolute;right:-35%;top:35%;font:42px serif;color:#bcb5ad;writing-mode:vertical-rl}.side-star{position:absolute;right:-15%;top:55%;color:var(--red);font:64px "Permanent Marker";transform:rotate(20deg)}.grain{pointer-events:none;position:absolute;inset:0;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:screen}@media(max-width:900px){.site{padding:14px 5vw 2vh}.content{grid-template-columns:minmax(210px,.8fr) minmax(300px,1.2fr);gap:28px}.collage{display:none}.portrait-panel{height:65vh}h1{font-size:clamp(52px,10vw,90px)}}@media(max-width:620px){html,body{overflow:auto}.site{height:auto;min-height:100dvh;overflow:hidden;padding:16px 6vw 35px}.site:before{inset:8px}.topbar{height:65px;align-items:flex-start}.wordmark{font-size:25px}nav{gap:12px;padding-top:9px}nav a{font-size:10px;letter-spacing:1px;padding-bottom:8px}.header-star{display:none}.content{height:auto;display:flex;flex-direction:column;align-items:stretch;gap:25px;padding:25px 2vw 0}.portrait-panel{height:48vh;min-height:300px;max-height:440px;width:85%;margin:auto}.intro{padding:0 2px}.eyebrow{font-size:26px}h1{font-size:clamp(58px,15vw,88px);margin-bottom:22px}.bio{font-size:14px}.socials{margin:16px 0 22px}}
/* Contact section */
.contact-section {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 40px));
  margin: 72px auto 64px;
  padding: 38px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(20,19,19,.94);
  box-shadow: 10px 10px 0 rgba(190,35,43,.22);
}
.contact-heading { max-width: 560px; margin-bottom: 28px; }
.contact-heading h2 {
  margin: 6px 0 12px;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.2rem, 7vw, 4rem);
  line-height: .98;
  letter-spacing: .02em;
}
.contact-heading h2 span:first-child { color: #c72b35; }
.contact-heading p:last-child { color: #c5c0bc; line-height: 1.6; }
.contact-form { display: grid; gap: 10px; }
.contact-form label {
  margin-top: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #eee9e4;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 13px 14px;
  color: #f7f3ee;
  background: #111010;
  border: 1px solid #514b48;
  border-radius: 0;
  font: inherit;
  outline: none;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: #c72b35; }
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-submit {
  justify-self: start;
  margin-top: 14px;
  padding: 13px 20px;
  border: 0;
  background: #c72b35;
  color: white;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.contact-submit:hover { background: #e13a45; transform: translate(-2px,-2px); }
.contact-submit:disabled { opacity: .6; cursor: wait; transform: none; }
.form-status { min-height: 1.4em; margin: 4px 0 0; color: #ddd; }
.form-status.error { color: #ff7a82; }
@media (max-width: 600px) {
  .contact-section { width: calc(100% - 28px); margin: 42px auto; padding: 24px 18px; }
}

/* Keep the full page scrollable so the contact section is reachable on desktop and mobile. */
@media (min-width: 621px) {
  html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
  .site { height: auto; min-height: 100dvh; overflow: visible; }
  .content { min-height: calc(100dvh - 100px); height: auto; }
  .contact-section { display: block; position: relative; z-index: 2; margin-bottom: 80px; }
}
.contact-section { scroll-margin-top: 24px; }