:root {
  --bg:#f4f3ef;
  --fg:#1d1d1f;
  --mute:#6e6e73;
  --card:#fff;
  --line:rgba(0,0,0,.08);
  --blur:rgba(244,243,239,.72);
  --accent:#5f7f3a;
  --on-accent:#fff;
  --g1:#1d1d1f;
  --g2:#86868b;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#121214;
    --fg:#f5f5f7;
    --mute:#86868b;
    --card:#1c1c1f;
    --line:rgba(255,255,255,.12);
    --blur:rgba(18,18,20,.72);
    --accent:#a8c686;
    --on-accent:#1b2a0d;
    --g1:#f5f5f7;
    --g2:#6e6e73;
  }
}

:root[data-theme="dark"] {
  --bg:#121214;
  --fg:#f5f5f7;
  --mute:#86868b;
  --card:#1c1c1f;
  --line:rgba(255,255,255,.12);
  --blur:rgba(18,18,20,.72);
  --accent:#a8c686;
  --on-accent:#1b2a0d;
  --g1:#f5f5f7;
  --g2:#6e6e73;
}

html {
  scroll-padding-top:env(safe-area-inset-top,0px);
  -webkit-text-size-adjust:100%;
}

* {
  box-sizing:border-box;
  margin:0;
}

body {
  background:var(--bg);
  color:var(--fg);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before {
  content:"";
  position:fixed;
  inset:0 0 auto;
  height:env(safe-area-inset-top,0px);
  background:var(--blur);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  z-index:10;
}

header {
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:11;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  background:var(--blur);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}

.logo {
  font-weight:600;
  font-size:17px;
  color:var(--fg);
  text-decoration:none;
  letter-spacing:-.01em;
}

nav {
  display:flex;
  gap:28px;
}

nav a {
  font-size:13px;
  color:var(--mute);
  text-decoration:none;
  transition:color .3s;
}

nav a:hover,nav a.on {
  color:var(--fg);
}

.page {
  display:none;
}

.page.active {
  display:block;
  animation:pg .8s cubic-bezier(.2,.7,.2,1);
}

.page.leaving {
  animation:none;
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .3s ease,transform .3s ease;
}

@keyframes pg {
  from {
    opacity:0;
    transform:translateY(24px);
  }
  to {
    opacity:1;
    transform:none;
  }
}

.wrap {
  max-width:980px;
  margin:0 auto;
  padding:0 22px;
}

.hero {
  min-height:calc(100vh - 52px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 22px;
}

.eyebrow {
  font-size:clamp(17px,2.2vw,24px);
  font-weight:600;
  color:var(--accent);
  margin-bottom:14px;
}

h1 {
  font-size:clamp(48px,10vw,112px);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-.045em;
  background:linear-gradient(180deg,var(--g1) 30%,var(--g2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.sub {
  font-size:clamp(19px,2.6vw,28px);
  color:var(--mute);
  margin-top:22px;
  max-width:640px;
  line-height:1.3;
  font-weight:500;
}

.cue {
  margin-top:48px;
  font-size:13px;
  color:var(--mute);
  animation:bob 2.4s ease-in-out infinite;
}

@keyframes bob {
  50% {
    transform:translateY(8px);
  }
}

section {
  padding:120px 0;
}

.words {
  font-size:clamp(28px,5vw,56px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.03em;
}

.words span {
  opacity:.18;
  transition:opacity .4s;
}

.words span.on {
  opacity:1;
}

h2 {
  font-size:clamp(32px,6vw,64px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.05;
}

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px;
  margin-top:48px;
}

.tile {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:28px;
  padding:32px 28px;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.tile b {
  font-size:24px;
  letter-spacing:-.02em;
}

.tile p {
  color:var(--mute);
  margin-top:8px;
  font-size:16px;
  line-height:1.4;
}

.edu {
  text-align:center;
}

.edu p {
  color:var(--mute);
  font-size:clamp(19px,2.4vw,26px);
  margin-top:18px;
  font-weight:500;
}

.btn {
  display:inline-block;
  background:var(--accent);
  color:var(--on-accent,#fff);
  text-decoration:none;
  font-size:17px;
  padding:13px 26px;
  border-radius:980px;
  margin-top:32px;
  transition:transform .3s,opacity .3s;
}

.btn:hover {
  transform:scale(1.04);
  opacity:.92;
}

.btn.ghost {
  background:transparent;
  color:var(--accent);
  padding-left:0;
  padding-right:0;
}

.phead {
  padding:110px 0 40px;
  text-align:center;
}

.phead p {
  color:var(--mute);
  font-size:clamp(19px,2.4vw,26px);
  margin-top:18px;
  font-weight:500;
}

.proj {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:36px;
  padding:clamp(32px,6vw,72px);
  margin-bottom:28px;
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.proj small {
  color:var(--accent);
  font-weight:600;
  font-size:15px;
}

.proj h3 {
  font-size:clamp(32px,5.5vw,56px);
  letter-spacing:-.035em;
  line-height:1.05;
  margin:10px 0 16px;
}

.proj p {
  color:var(--mute);
  font-size:clamp(17px,2vw,21px);
  line-height:1.4;
  max-width:620px;
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px;
}

.tags i {
  font-style:normal;
  font-size:13px;
  padding:6px 13px;
  border-radius:980px;
  border:1px solid var(--line);
  color:var(--mute);
}

.contact {
  min-height:calc(100vh - 52px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 22px;
}

.links {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

.ph {
  display:flex;
  align-items:center;
  gap:14px;
}

.pl {
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid var(--line);
}

.proj {
  min-height:0;
  justify-content:flex-start;
  gap:0;
}

.proj .lead {
  color:var(--fg);
  font-size:clamp(20px,2.6vw,28px);
  font-weight:600;
  letter-spacing:-.02em;
  margin:0 0 12px;
}

.proj h3 {
  margin:22px 0 10px;
}

.media {
  margin:36px 0 8px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#000;
}

.media video,.media img {
  display:block;
  width:100%;
  height:auto;
}

.media.photo {
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}

nav {
  align-items:center;
}

#theme {
  position:absolute;
  right:22px;
  top:50%;
  margin-top:-15px;
  background:none;
  border:1px solid var(--line);
  color:var(--fg);
  width:30px;
  height:30px;
  border-radius:50%;
  cursor:pointer;
  font-size:15px;
  line-height:1;
  display:grid;
  place-items:center;
  padding:0;
  transition:background .3s;
}

#theme:hover {
  background:var(--line);
}

.theming,.theming * {
  transition:background-color .55s ease,color .55s ease,border-color .55s ease,box-shadow .55s ease!important;
}

@media (max-width:480px) {
  nav {
    gap:16px;
  }
}

.proj .btn {
  align-self:flex-start;
}

.bg {
  position:relative;
  isolation:isolate;
  background-color:#111;
  background-size:cover;
  background-position:center;
  color:#fff;
}

.bg::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.22) 45%,rgba(0,0,0,.55));
}

.bg h1 {
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:#fff;
}

.bg p,.bg .sub {
  color:rgba(255,255,255,.88);
}

.bg .eyebrow {
  color:#fff;
  opacity:.9;
}

.bg .cue {
  color:rgba(255,255,255,.75);
}

.bg-me {
  background-image:url(../images/hero-portrait.jpg);
  background-position:62% 25%;
}

.bg-laptop {
  background-image:url(../images/projects-header.jpg);
  background-position:center 42%;
}

.bg-hill {
  background-image:url(../images/contact-background.jpg);
  background-position:center 58%;
}

.hero.left {
  align-items:flex-start;
  justify-content:flex-end;
  text-align:left;
  padding:0 22px clamp(56px,11vh,120px) max(22px,calc((100vw - 980px)/2));
}

.hero.left::before {
  background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72) 100%),linear-gradient(90deg,rgba(0,0,0,.4),transparent 60%);
}

.phead.bg {
  padding:clamp(120px,22vh,220px) 22px clamp(80px,14vh,140px);
  margin-bottom:40px;
}

.phead.bg::before {
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45));
}

.contact.bg::before {
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.5) 50%,rgba(0,0,0,.68));
}

.bg .btn {
  background:#fff;
  color:#1d1d1f;
  font-weight:600;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
}

.bg .btn.ghost {
  background:transparent;
  color:#fff;
  box-shadow:none;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:5px;
}

.proj p+p {
  margin-top:12px;
}

.story {
  position:relative;
  margin-top:56px;
  padding-left:34px;
}

.story::before {
  content:"";
  position:absolute;
  left:7px;
  top:8px;
  bottom:8px;
  width:2px;
  background:var(--line);
}

.step {
  position:relative;
  padding-bottom:56px;
}

.step::before {
  content:"";
  position:absolute;
  left:-34px;
  top:10px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 6px var(--bg);
}

.step small {
  color:var(--accent);
  font-weight:600;
  font-size:15px;
}

.step h3 {
  font-size:clamp(26px,4vw,40px);
  letter-spacing:-.03em;
  line-height:1.1;
  margin:8px 0 12px;
}

.step p {
  color:var(--mute);
  font-size:clamp(17px,2vw,21px);
  line-height:1.5;
  max-width:680px;
}

.closing {
  font-size:clamp(22px,3.4vw,34px);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.2;
  max-width:640px;
  margin-top:8px;
}

.pol {
  position:absolute;
  right:22px;
  bottom:96px;
  width:min(230px,60vw);
  z-index:1;
}

.polaroid {
  position:relative;
  background:#fff;
  padding:12px 12px 14px;
  border-radius:4px;
  box-shadow:0 18px 40px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.2);
  transform:rotate(5deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.polaroid:hover {
  transform:rotate(1deg) scale(1.04);
}

.polaroid img {
  display:block;
  width:100%;
  height:auto;
  border-radius:2px;
  background:#ddd;
}

.polaroid p {
  font-family:"Caveat","Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  font-weight:600;
  font-size:28px;
  line-height:1.1;
  color:#2b2b2b!important;
  text-align:center;
  margin:12px 0 0;
  letter-spacing:.01em;
}

.tape {
  position:absolute;
  width:96px;
  height:30px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 2px,rgba(0,0,0,.05) 2px 4px),linear-gradient(180deg,#d6d9de,#a7abb2 55%,#c8cbd0);
  opacity:.94;
  clip-path:polygon(3% 0,0 12%,3% 25%,0 38%,3% 50%,0 62%,3% 75%,0 88%,3% 100%,97% 100%,100% 88%,97% 75%,100% 62%,97% 50%,100% 38%,97% 25%,100% 12%,97% 0);
}

.tape.t1 {
  top:-6px;
  left:-30px;
  transform:rotate(-38deg);
}

.tape.t2 {
  top:-6px;
  right:-30px;
  transform:rotate(38deg);
}

@media (max-width:900px) {
  .pol {
    position:relative;
    right:auto;
    bottom:auto;
    margin:48px auto 0;
  }
}

footer {
  padding:40px 22px;
  text-align:center;
  color:var(--mute);
  font-size:12px;
  border-top:1px solid var(--line);
}

.rv {
  opacity:0;
  transform:translateY(44px) scale(.98);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);
}

.rv.in {
  opacity:1;
  transform:none;
}

.d1 {
  transition-delay:.1s;
}

.d2 {
  transition-delay:.2s;
}

.d3 {
  transition-delay:.3s;
}

@media (prefers-reduced-motion:reduce) {
  .rv {
    opacity:1;
    transform:none;
    transition:none;
  }
  .page.active {
    animation:none;
  }
  .cue {
    animation:none;
  }
}


/* ---------- 2) PROJECTS GRID ---------- */
/* Projects page: show project cards side by side in a grid */

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 24px;
  align-items: stretch;
  padding-bottom: 28px;
}

/* Cards: tighter than the full-width version */
.proj-grid .proj {
  margin-bottom: 0;
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
}

.proj-grid .proj h3 {
  font-size: clamp(26px, 3vw, 36px);
  margin: 18px 0 10px;
}

.proj-grid .proj p {
  font-size: 16px;
  line-height: 1.5;
}

/* Same-shaped media boxes so cards stay even */
.proj-grid .media,
.proj-grid .media.photo {
  max-width: none;
  margin: 24px 0 8px;
  border-radius: 18px;
  aspect-ratio: 16 / 10;
}

.proj-grid .media img,
.proj-grid .media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proj-grid .media video {
  object-fit: contain;
}

.proj-grid .media.photo img {
  object-position: center 65%;
}

/* Pin tags and button to the bottom so both cards line up */
.proj-grid .tags {
  margin-top: auto;
  padding-top: 22px;
}

.proj-grid .btn {
  margin-top: 22px;
}

/* ---------- 3) EFFECTS ---------- */
/* ==========================================================
   Extra polish: gradients, glows, hover effects, hero hop.
   Delete this file (and its <link>) to go back to the plain look.
   ========================================================== */

/* Second accent colour used in gradients */
:root { --accent-2: #3f5f27; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent-2: #7fa85a; }
}
:root[data-theme="dark"] { --accent-2: #7fa85a; }

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- Hero: "Alpin." hops one letter at a time ---------- */
.jump span {
  display: inline-block;
  animation: hop 3.4s infinite;
  animation-delay: calc(var(--i) * 0.36s);
  will-change: transform;
}

@keyframes hop {
  0%   { transform: translateY(0);        animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  5%   { transform: translateY(-0.16em);  animation-timing-function: cubic-bezier(.7, 0, .8, .3); }
  10%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.hero h1 { text-shadow: 0 6px 34px rgba(0, 0, 0, .28); }

/* ---------- Image sections: drifting colour glow ---------- */
.bg { overflow: hidden; }

.bg::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 18% 30%, rgba(168, 198, 134, .38), transparent 70%),
    radial-gradient(34% 44% at 82% 72%, rgba(120, 150, 255, .28), transparent 70%),
    radial-gradient(28% 36% at 60% 18%, rgba(255, 190, 120, .18), transparent 70%);
  mix-blend-mode: screen;
  animation: drift 18s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1.06); }
  to   { transform: translate3d(3%, 2%, 0)  scale(1); }
}

/* ---------- Header: gradient scroll-progress line + nav underline ---------- */
header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: calc(var(--progress, 0) * 100%);
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  pointer-events: none;
}

nav a { position: relative; padding: 4px 0; }

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

nav a:hover::after,
nav a.on::after { transform: scaleX(1); }

#theme { transition: background .3s, transform .5s cubic-bezier(.2, .7, .2, 1); }
#theme:hover { transform: rotate(25deg); }

/* ---------- Headings and text ---------- */
h2 {
  background: linear-gradient(90deg, var(--fg) 25%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.wrap .btn:not(.ghost) {
  background-image: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: transform .3s, opacity .3s, box-shadow .3s;
}

.wrap .btn:not(.ghost):hover {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- Story timeline: softly pulsing dots ---------- */
.step::before { animation: pulse 2.8s ease-out infinite; }
.step:nth-child(2)::before { animation-delay: .5s; }
.step:nth-child(3)::before { animation-delay: 1s; }
.step:nth-child(4)::before { animation-delay: 1.5s; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 6px var(--bg), 0 0 0 6px  color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 6px var(--bg), 0 0 0 20px color-mix(in srgb, var(--accent) 0%,  transparent); }
}

/* ---------- Project cards: sheen, lift, cursor spotlight ---------- */
.proj {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%);
}

.proj::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
}

.proj:hover::before { opacity: 1; }

.proj.rv {
  transition:
    opacity 1s cubic-bezier(.2, .7, .2, 1),
    transform .7s cubic-bezier(.2, .7, .2, 1),
    filter 1s cubic-bezier(.2, .7, .2, 1),
    box-shadow .5s ease,
    border-color .4s ease;
}

.proj.rv.in:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 22px 50px rgba(0, 0, 0, .12);
}

.tags i { transition: color .3s, border-color .3s, transform .3s; }
.tags i:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

/* ---------- Scroll reveal gets a soft blur-in ---------- */
.rv { filter: blur(4px); }
.rv.in { filter: none; }

/* ---------- Footer gradient line ---------- */
footer { position: relative; }

footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .6;
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .jump span, .bg::after, .step::before { animation: none; }
  .rv { filter: none; }
  .proj.rv.in:hover { transform: none; }
}