/* Home page only. Loaded by index.html. Does not replace style.css, so other pages are unaffected. */

/* Layout concept: the real shaanrehsi.com look (black, lavender-to-violet glow, Orbitron title, floating pill nav, glowing 3-up project cards) with a Latest row, six featured cards, and previews of the three new pages stacked below. */
:root {
  --background-web-color: #000000;
  --heading-colour: #ffffff;
  --shadow-colour1: #e7d8ff;
  --shadow-colour2: #b375ff;
  --shadow-colour3: #6e00e3;
  --shadow-colour4: #500bb1;
  --text-color: #ffffff;
  --muted: rgba(255,255,255,.75);
  --faint: #ababab;
  --font-title: "Orbitron", "Arial Black", sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-body); }
html { scroll-behavior: smooth; }
body { background: var(--background-web-color); color: var(--text-color); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--shadow-colour2); outline-offset: 3px; }


.container { padding: 15px max(16px, env(safe-area-inset-right, 0px), 15%) 15px max(16px, env(safe-area-inset-left, 0px), 15%); }

/* NAV (floating pill, as on the live site) */
nav { position: fixed; top: calc(15px + env(safe-area-inset-top, 0px)); left: 30%; transform: translateX(-50%); z-index: 1000; }
nav ul { display: flex; list-style: none; padding: 0 30px; }
nav ul li { border: 2px solid transparent; border-radius: 5px; padding: 10px; transition: background .2s; }
nav ul li:not(:last-child) { margin-right: 10px; }
nav ul li a { color: #fff; text-transform: uppercase; font-size: 14px; text-shadow: 0 0 30px #e0d8d8; }
nav.scrolled ul li { border: 2px solid var(--shadow-colour4); background: #000; box-shadow: 0 4px 14px hsla(277,100%,80%,.3); }
nav ul li:hover { background: var(--shadow-colour1); border-color: var(--shadow-colour2); border-right-color: var(--shadow-colour3); border-bottom-color: var(--shadow-colour4); }
nav ul li:hover a { color: #000; text-shadow: none; }
.menu-btn, .menu-close { display: none; background: none; border: 0; color: #fff; cursor: pointer; }
.social { position: fixed; top: calc(20px + env(safe-area-inset-top, 0px)); right: max(24px, env(safe-area-inset-right, 0px)); z-index: 1000; display: flex; gap: 14px; }
.social a { display: inline-flex; color: #fff; }
.social a:hover { transform: translateY(-5px); color: var(--shadow-colour1); }
.social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* HEADER */
#header { position: relative; display: grid; place-items: center; }
.header-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 120px 16px 40px; }
.header-text h1 { font-family: var(--font-title); letter-spacing: 5px; font-size: clamp(2rem, 6vw, 4rem); line-height: 1.1; color: var(--shadow-colour1); text-shadow: -2px -2px 0 var(--shadow-colour2), 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; }
.horizontal-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin-top: 14px; }
.horizontal-line p { font-weight: 300; letter-spacing: 2px; font-size: clamp(1rem, 2.2vw, 1.6rem); text-transform: uppercase; color: var(--shadow-colour1); text-shadow: -2px -2px 0 var(--shadow-colour2), 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; }
.horizontal-line .sep { opacity: .6; }
.zoom { transition: all .4s cubic-bezier(.175,.885,.32,1.275); cursor: default; display: inline-block; }
.zoom:hover { transform: scale(1.12); }

.sub-title { font-size: 40px; font-weight: 600; color: var(--shadow-colour2); text-wrap: balance; }
.kicker { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; display: block; }

/* LATEST (new) */
#latest { padding: 40px 0 10px; }
.latest-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.latest { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--shadow-colour4); border-radius: 10px; background: #000; transition: transform .3s, box-shadow .3s, border-color .3s; }
.latest:hover { transform: translateY(-4px); box-shadow: 0 8px 20px hsla(271,100%,70%,.45); border-color: var(--shadow-colour2); }
.latest img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; display: block; }
.pill { display: inline-block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid var(--shadow-colour2); color: var(--shadow-colour1); border-radius: 20px; padding: 2px 10px; margin-bottom: 6px; }
.latest h3 { font-size: 1.05rem; font-weight: 600; color: var(--shadow-colour2); line-height: 1.25; }
.latest p { font-weight: 300; font-size: .85rem; color: var(--muted); line-height: 1.35; margin-top: 4px; }

/* PROJECTS */
#projects { padding: 70px 0 50px; }
.work-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 50px; }
.work { position: relative; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 4px 14px hsla(271,100%,70%,.4); transition: transform .3s, box-shadow .3s; }
.work:hover { transform: translateY(-6px); box-shadow: 0 10px 25px hsla(271,100%,70%,.6); }
.work-image-container { position: relative; }
.work img { width: 100%; height: 220px; object-fit: cover; display: block; }
.layer { position: absolute; inset: 0; background: rgba(0,0,0,.4); display: flex; justify-content: center; align-items: center; opacity: 0; transition: .3s; font-size: 1.8rem; color: #fff; }
.work:hover .layer { opacity: 1; }
.tag { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--shadow-colour1); color: #000; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.work-label { padding: 15px; }
.work-label h3 { font-size: 1.3rem; font-weight: 600; color: var(--shadow-colour2); }
.work-label p { font-weight: 300; color: var(--muted); font-size: .9rem; line-height: 1.5rem; }
.btn { display: block; margin: 50px auto; width: fit-content; border: 1px solid var(--shadow-colour1); padding: 14px 50px; border-radius: 6px; color: #fff; background: transparent; font-size: 1rem; cursor: pointer; transition: background .5s; box-shadow: 0 4px 14px hsla(277,65%,62%,.9); }
.btn:hover { background: var(--shadow-colour1); color: var(--shadow-colour4); }
.btn.btn2 { display: inline-block; margin: 0; background: var(--shadow-colour2); color: #000; padding: 12px 28px; }
.btn.btn2:hover { background: #fff; color: #000; }
.btn.small { margin: 0; padding: 12px 28px; display: inline-block; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }

/* PREVIEW BAND */
.band { border-top: 1px dashed var(--shadow-colour4); margin-top: 20px; }
.band-label { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; padding-top: 24px; font-size: 13px; color: var(--faint); letter-spacing: 2px; text-transform: uppercase; }
.page-prev { padding: 30px 0 60px; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 28px; }
.split p { font-weight: 300; line-height: 1.7; color: var(--muted); margin-top: 16px; }
.split img { width: 100%; border-radius: 5px; box-shadow: 0 4px 14px hsla(277,65%,62%,.5); display: block; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.gallery img { width: 100%; height: 200px; object-fit: cover; border-radius: 5px; box-shadow: 0 4px 14px hsla(277,65%,62%,.5); display: block; }
.post { border: 1px solid var(--shadow-colour4); border-radius: 10px; padding: 18px; box-shadow: 0 4px 14px hsla(271,100%,70%,.25); }
.post .frame { aspect-ratio: 4 / 3; border-radius: 6px; margin-block: 12px; background: linear-gradient(150deg, var(--shadow-colour4), var(--shadow-colour2)); display: grid; place-items: center; text-align: center; font-family: var(--font-title); letter-spacing: 3px; color: var(--shadow-colour1); padding: 12px; line-height: 1.3; }
.post small { color: var(--faint); }

.rows { margin-top: 28px; border-top: 1px solid var(--shadow-colour4); }
.row-item { display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px; gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--shadow-colour4); align-items: baseline; }
.row-item h3 { font-size: 1.15rem; font-weight: 600; color: var(--shadow-colour2); }
.row-item p { font-weight: 300; color: var(--muted); font-size: .95rem; line-height: 1.55; margin-top: 4px; }
.row-item .meta { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); }
.row-item.empty { border-style: dashed; opacity: .7; }
.role { justify-self: start; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid var(--shadow-colour2); border-radius: 20px; padding: 3px 12px; color: var(--shadow-colour1); }

/* ABOUT + CONTACT */
#about { padding: 70px 0; font-weight: 300; }
.row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
.about-col-1 { flex-basis: 33%; min-width: 0; }
.about-col-1 img { width: 100%; border-radius: 5px; box-shadow: 0 4px 14px hsla(277,65%,62%,.5); display: block; }
.about-col-2 { flex-basis: 60%; min-width: 0; }
.about-col-2 p { line-height: 1.7; margin-top: 12px; }
.tab-titles { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 22px 0 30px; }
.tab-links { font-size: 18px; font-weight: 500; cursor: pointer; position: relative; background: none; border: 0; color: #fff; }
.tab-links::after { content: ""; width: 0; height: 3px; background: var(--shadow-colour2); position: absolute; left: 0; bottom: -8px; transition: .5s; }
.tab-links.active-link::after { width: 50%; }
.tab-contents { display: none; }
.tab-contents.active-tab { display: block; }
.tab-contents li { list-style: none; margin: 10px 0; line-height: 1.6; }
.tab-contents li span { color: var(--shadow-colour2); font-size: 14px; }
.contact-container { padding: 50px max(16px, env(safe-area-inset-right, 0px), 15%) 50px max(16px, env(safe-area-inset-left, 0px), 15%); color: var(--faint); }
.contact-container p { margin-top: 24px; font-size: 18px; overflow-wrap: anywhere; }
.social-icons { margin-top: 26px; display: flex; gap: 16px; }
.social-icons a { color: var(--faint); display: inline-flex; }
.social-icons a:hover { color: #fff; transform: translateY(-5px); }
.social-icons svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-container .btn2 { margin-top: 28px; }
.copyright { text-align: center; padding: 25px 16px; background: #000; color: grey; font-weight: 300; }

.work-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.work.wide:hover { transform: none; }
.work.wide .wide-img, .work.wide .work-image-container { display: block; height: 100%; }
.work.wide img { height: 100%; min-height: 280px; }
.work.wide .work-label { padding: 28px; }
.work.wide h3 { font-size: 2rem; }
.work.wide p { font-size: 1rem; line-height: 1.7; margin-top: 10px; }
.inline-link { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 28px; padding: 16px 0; border-top: 1px solid var(--shadow-colour4); border-bottom: 1px solid var(--shadow-colour4); font-weight: 300; color: var(--muted); }
.inline-link b { color: var(--shadow-colour2); font-weight: 600; }
.inline-link:hover b { color: #fff; }
#work { padding: 60px 0 20px; }
#music { padding: 50px 0 40px; }
.h2 { font-size: 1.5rem; font-weight: 600; color: var(--shadow-colour1); margin-top: 6px; }
.split.mc { margin: 28px 0 44px; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.mini { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--shadow-colour4); align-items: baseline; }
.mini h3 { font-size: 1.05rem; font-weight: 600; color: var(--shadow-colour2); }
.mini p { font-weight: 300; color: var(--muted); font-size: .9rem; line-height: 1.5; margin-top: 3px; }
.mini .meta { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); }
.mini.empty { border-bottom-style: dashed; opacity: .65; }
.cols2 .rows { margin-top: 14px; }
.code { margin-top: 36px; width: min(520px, 100%); border: 1px solid var(--shadow-colour4); border-radius: 10px; background: #000; box-shadow: 0 4px 14px hsla(271,100%,70%,.4); text-align: left; overflow: hidden; }
.code-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--shadow-colour4); font-size: 12px; color: var(--faint); letter-spacing: 1px; }
.code-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--shadow-colour4); display: block; }
.code-bar span { margin-left: 8px; }
.code pre { padding: 14px 16px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: clamp(11.5px, 2.8vw, 14px); line-height: 1.9; color: var(--shadow-colour1); overflow-x: auto; position: relative; z-index: 0; isolation: isolate; }
.code pre span { font-family: inherit; }
.code .ln { display: block; position: relative; padding-left: 6px; }
.code em { font-style: normal; color: var(--shadow-colour2); margin-right: 8px; }
.code .ln::before { content: ""; position: absolute; left: -16px; right: -16px; top: 0; bottom: 0; background: var(--shadow-colour3); opacity: 0; animation: step 3s steps(1) infinite; z-index: -1; }
.code .ln:nth-child(4)::before { animation-delay: 1s; }
.code .ln:nth-child(5)::before { animation-delay: 2s; }
@keyframes step { 0% { opacity: .35; } 33.3% { opacity: 0; } 100% { opacity: 0; } }
.cur { display: inline-block; width: 8px; height: 1em; background: var(--shadow-colour2); vertical-align: text-bottom; margin-left: 3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.lead { font-weight: 300; color: var(--muted); margin-top: 10px; max-width: 60ch; line-height: 1.6; }
#archive { padding: 50px 0 20px; }
#workshops { padding: 30px 0 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 14px; }
.chip { background: transparent; color: #fff; border: 1px solid var(--shadow-colour4); border-radius: 20px; padding: 6px 16px; font-size: 14px; cursor: pointer; }
.chip:hover { border-color: var(--shadow-colour2); }
.chip.on { background: var(--shadow-colour1); color: #000; border-color: var(--shadow-colour2); }
.arch-list { border-top: 1px solid var(--shadow-colour4); }
.arch { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 230px) 24px; gap: 4px 16px; align-items: baseline; padding: 13px 8px; border-bottom: 1px solid var(--shadow-colour4); transition: background .2s; }
.arch:hover { background: rgba(179,117,255,.12); }
.arch .meta { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); }
.arch .t { font-weight: 500; }
.arch .tags { font-size: 13px; color: var(--shadow-colour2); text-transform: capitalize; }
.arch .go { color: var(--shadow-colour2); text-align: right; }
.arch:hover .go { color: #fff; }
.work-list.two { margin-bottom: 0; }
nav ul li.sub a { font-size: 13px; color: var(--faint); text-shadow: none; }
nav ul li.sub:hover a { color: #000; }

/* DESKTOP: left sidebar nav */
.brand { display: none; }
@media (min-width: 769px) {
  .page { margin-left: 230px; }
  nav { top: 0; bottom: 0; left: 0; transform: none; width: 230px; display: flex; flex-direction: column; background: #000; border-right: 1px solid var(--shadow-colour4); padding: calc(28px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
  .brand { display: block; font-family: var(--font-title); font-size: 15px; letter-spacing: 3px; line-height: 1.3; color: var(--shadow-colour1); text-shadow: -1px -1px 0 var(--shadow-colour2); }
  nav ul { flex-direction: column; padding: 0; margin-top: 0; }
  nav ul li, nav.scrolled ul li { margin: 0 0 8px; border: 2px solid transparent; background: transparent; box-shadow: none; padding: 10px 12px; }
  nav ul li:not(:last-child) { margin-right: 0; }
  nav ul li a { display: block; font-size: 15px; letter-spacing: 1px; }
  nav ul li.sub.first { margin-top: 18px; border-top: 1px solid var(--shadow-colour4); border-radius: 0 0 5px 5px; }
  nav ul li.active { border-color: var(--shadow-colour4); border-left: 3px solid var(--shadow-colour2); }
  nav ul li:hover { background: var(--shadow-colour1); border-color: var(--shadow-colour2); border-right-color: var(--shadow-colour3); border-bottom-color: var(--shadow-colour4); }
  .social { position: static; margin-top: auto; flex-wrap: wrap; }
  .container { padding-left: max(24px, 6%); padding-right: max(24px, 6%); }
  .contact-container { padding-left: max(24px, 6%); padding-right: max(24px, 6%); }
  .header-text { padding-top: 70px; }
}
@media (max-width: 768px) {
  .arch { grid-template-columns: minmax(0, 1fr) 24px; }
  .arch .meta, .arch .tags { grid-column: 1; }
  .arch .go { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  nav ul li.sub a { color: #fff; }
}

/* RESUME */
#resume { padding: 50px 0 40px; border-top: 1px solid var(--shadow-colour4); }
.sel { user-select: all; }
.rgroup { margin-top: 30px; }
.rgroup[hidden] { display: none; }
.profile { font-weight: 300; line-height: 1.75; max-width: 70ch; color: var(--muted); }
.rgroup details { border-bottom: 1px solid var(--shadow-colour4); }
.rgroup .h2 { margin-bottom: 8px; }
.rgroup summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 4px 16px; align-items: baseline; padding: 14px 4px; }
.rgroup summary::-webkit-details-marker { display: none; }
.rgroup summary::after { content: "+"; color: var(--shadow-colour2); font-size: 20px; text-align: right; }
.rgroup details[open] summary::after { content: "−"; }
.rgroup summary:hover { background: rgba(179,117,255,.1); }
.role-t { font-weight: 600; color: var(--shadow-colour2); font-size: 1.05rem; }
.role-t small { display: block; font-weight: 300; font-size: .85rem; color: var(--muted); margin-top: 2px; }
.date { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.rgroup details ul { margin: 0 0 16px 26px; }
.rgroup details li { list-style: disc; font-weight: 300; color: var(--muted); line-height: 1.6; margin: 5px 0; }
.rgroup details li .pill { margin: 0 6px 0 0; }
.skills3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 12px; }
.skills3 h3 { font-size: 1rem; font-weight: 600; color: var(--shadow-colour2); margin-bottom: 8px; }
.skills3 li { list-style: none; font-weight: 300; color: var(--muted); line-height: 1.6; margin: 5px 0; }
.pill { display: inline-block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid var(--shadow-colour2); color: var(--shadow-colour1); border-radius: 20px; padding: 1px 9px; }
@media (max-width: 768px) {
  .rgroup summary { grid-template-columns: minmax(0, 1fr) 18px; }
  .rgroup .date { grid-column: 1; }
  .rgroup summary::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .skills3 { grid-template-columns: minmax(0, 1fr); }
}

nav ul li.brandli a { font-family: var(--font-title); font-size: 14px; letter-spacing: 3px; line-height: 1.3; color: var(--shadow-colour1); text-shadow: -1px -1px 0 var(--shadow-colour2); }
nav ul li.brandli:hover a { color: #000; text-shadow: none; }
@media (min-width: 769px) { nav ul li.brandli { margin-bottom: 22px; } }
.intro { margin-top: 22px; max-width: 52ch; font-weight: 300; line-height: 1.7; color: var(--muted); font-size: 1.05rem; }
[hidden] { display: none !important; }

@media (max-width: 768px) {
  .page { padding-top: calc(60px + env(safe-area-inset-top, 0px)); }
  .page .header-text { padding-top: 40px; }
  .social-icons { flex-wrap: wrap; gap: 14px 24px; }
}
.social-icons a { align-items: center; gap: 8px; }
.social-icons a span { font-size: 14px; letter-spacing: .5px; }
@media (max-width: 768px) {
  #sidemenu.open ~ .menu-btn { visibility: hidden; }
  nav ul li.brandli a { color: #fff; text-shadow: none; }
}

/* Tall opening screen: Recent Projects starts below the fold */
#header { min-height: 100vh; min-height: 100svh; padding-top: 10vh; }
.cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); animation: bob 2.4s ease-in-out infinite; white-space: nowrap; }
.cue:hover { color: #fff; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .cue { animation: none !important; } }
.work.wide img { object-position: left center; }

/* Centre the name block in the opening screen */
#header { padding-top: 0; }
#header .header-text { padding: 0 16px; }
@media (max-width: 768px) { #header { min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); } }
/* Opening screen is never shorter than 800px, so Recent Projects stays below the fold even in short windows */
#header { min-height: max(100vh, 800px); min-height: max(100svh, 800px); }
@media (max-width: 768px) { #header { min-height: max(calc(100vh - 60px), 640px); min-height: max(calc(100svh - 60px), 640px); } }
/* Nudge the name block up a little from dead centre */
#header .header-text { padding: 0 16px 100px; }
@media (max-width: 768px) { #header .header-text { padding: 0 16px 60px; } }
/* Smaller gap between the name block and Recent Projects */
#header { min-height: max(100vh, 680px); min-height: max(100svh, 680px); }
#header .header-text { padding: 0 16px 70px; }
#work { padding-top: 24px; }
@media (max-width: 768px) { #header { min-height: max(calc(100vh - 60px), 600px); min-height: max(calc(100svh - 60px), 600px); } #header .header-text { padding: 0 16px 40px; } }

.code .cm { display: block; color: #8a7aa8; padding: 0 0 6px 6px; white-space: pre-wrap; line-height: 1.6; }

/* Code window: lines wrap instead of widening the page on phones */
.code { min-width: 0; max-width: 100%; }
#header .header-text { min-width: 0; max-width: 100%; }
.code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.code .gap { display: block; height: .9em; }
@media (max-width: 1000px) {
  .cols2 { gap: 28px; }
  .work-list, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .container { padding-left: max(16px, env(safe-area-inset-left, 0px), 5%); padding-right: max(16px, env(safe-area-inset-right, 0px), 5%); }
  .contact-container { padding-left: max(16px, env(safe-area-inset-left, 0px), 8%); padding-right: max(16px, env(safe-area-inset-right, 0px), 8%); }
  nav { left: 0; right: 0; transform: none; top: env(safe-area-inset-top, 0px); padding: 0 20px; min-height: 56px; background: var(--shadow-colour2); }
  nav ul { position: fixed; top: 0; right: -220px; width: 220px; height: 100vh; flex-direction: column; background: var(--shadow-colour2); padding: 80px 0 0; transition: right .5s; z-index: 100; }
  nav ul.open { right: 0; }
  nav ul li, nav.scrolled ul li { border: 0; border-radius: 0; background: transparent; box-shadow: none; margin: 0 0 6px; padding: 8px 16px; }
  nav ul li:hover { background: rgba(0,0,0,.25); }
  nav ul li:hover a { color: #fff; }
  .menu-btn { display: block; position: absolute; right: 16px; top: 8px; font-size: 30px; z-index: 101; line-height: 1; padding: 4px 8px; }
  .menu-close { display: block; position: absolute; top: 14px; right: 16px; font-size: 28px; z-index: 101; }
  .social { top: calc(14px + env(safe-area-inset-top, 0px)); left: 16px; right: auto; gap: 12px; }
  .social svg { width: 20px; height: 20px; }
  .header-text { padding-top: 110px; }
  .sub-title { font-size: 32px; }
  .work-list, .work-list.two { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .work.wide { grid-template-columns: minmax(0, 1fr); }
  .work.wide img { height: auto; min-height: 0; }
  .cols2 { grid-template-columns: minmax(0, 1fr); }
  .mini { grid-template-columns: 76px minmax(0, 1fr); }
  .latest-list { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .row-item { grid-template-columns: minmax(0, 1fr); }
  .about-col-1, .about-col-2 { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .code .ln::before, .cur { animation: none !important; } * { transition: none !important; scroll-behavior: auto !important; } }