/* ================= shared additions ================= */
button.chip{border:0;cursor:pointer}
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);right:-10px;padding:8px 12px;border-radius:4px;background:var(--blue);color:#fff;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(-4px);pointer-events:none;transition:.15s}
.tip:hover::after{opacity:1;transform:none}
.nav-contact.on{background:var(--ink);color:#fff}

.you-cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .2s}
.you-cursor i{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:var(--ink)}
.you-cursor span{position:absolute;left:10px;top:10px;padding:3px 10px 4px;border-radius:999px;background:var(--ink);color:#fff;font:500 17px var(--sans)}

.page{max-width:1280px;margin:0 auto;padding:50px 16px 80px}
.page-title{margin:30px 0 40px;font:400 clamp(56px,11vw,150px)/.9 var(--display);letter-spacing:0;font-variation-settings:"wdth" 700;transition:font-variation-settings 1.2s cubic-bezier(.2,.7,.2,1)}
.page-title.in{font-variation-settings:"wdth" 300}
.frame{position:relative;border:1.5px solid var(--fc,#ecb22e);padding:clamp(20px,4vw,56px);background:rgba(255,255,255,.55)}
.frame>.h{position:absolute;width:12px;height:12px;border:1.5px solid var(--fc,#ecb22e);background:#fff}
.frame>.tl{top:-7px;left:-7px}.frame>.tr{top:-7px;right:-7px}.frame>.bl{bottom:-7px;left:-7px}.frame>.br{bottom:-7px;right:-7px}
.frame-tag{display:inline-block;margin-bottom:8px;padding:3px 7px;background:var(--fc,#ecb22e);color:#fff;font:600 12px var(--mono);letter-spacing:.06em}
.speech-tag{position:absolute;padding:10px 18px;border:2.5px solid var(--ink);border-radius:20px;background:var(--c,var(--pink));color:#fff;font:600 15px var(--mono);transform:rotate(var(--r,-8deg));box-shadow:3px 3px 0 var(--ink);z-index:3}

/* ================= about page ================= */
.about-layout{display:grid;grid-template-columns:110px minmax(0,1fr);gap:40px}
.side-menu{position:sticky;top:90px;align-self:start;display:grid;gap:10px;padding:12px;border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.08);z-index:10}
.side-menu a{display:grid;justify-items:center;gap:4px;padding:10px 6px;border-radius:8px;font:600 11px var(--mono);text-transform:uppercase;text-decoration:none}
.side-menu a b{font-size:20px}
.side-menu a.on{background:var(--ink);color:#fff}
.about-sections>section{margin-bottom:110px;scroll-margin-top:100px}
.bio-head{margin:0 0 30px;font:500 clamp(28px,3.8vw,48px)/1.15 var(--sans);letter-spacing:-.02em}
.bio-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:start}
.bio-note{padding:22px 24px;background:#f4d99a;font-size:16px;line-height:1.6;transform:rotate(var(--r,0deg))}
.bio-note+.bio-note{margin-top:22px}
.bio-side .polaroid{position:relative;top:0;left:0;right:auto;width:100%;max-width:240px;margin:0 auto 30px;display:block}
.principles{display:grid;gap:40px}
.principle{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px}
.principle .card-p{padding:30px 32px;background:var(--c)}
.principle h3{margin:0 0 12px;font:500 clamp(26px,3vw,40px)/1.1 var(--sans);letter-spacing:-.02em}
.principle p{margin:0;font-size:16px;line-height:1.55}
.principle .scrawl{display:flex;align-items:center;gap:14px;font:400 30px var(--scrawl);transform:rotate(-4deg)}
.principle .scrawl svg{flex:none;width:70px}
.principle.flip .card-p{order:2}
.principle.flip .scrawl{justify-content:flex-end}
.timeline-title{margin:0 0 10px;font:500 26px var(--sans);color:#777}
.tl-item{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:28px 0;border-top:1.5px solid #ddd}
.tl-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--c);font:16px var(--display);color:#fff}
.tl-item h3{margin:0 0 8px;font:500 clamp(26px,3.4vw,42px)/1.05 var(--sans);letter-spacing:-.03em}
.tl-item p{margin:0 0 14px;font-size:16px;line-height:1.55;max-width:640px}
.tl-date{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border:1.5px solid var(--ink);border-radius:4px;font:600 13px var(--mono)}
.tl-date.now{background:#bfefff;border-color:var(--blue)}

/* ================= projects / case studies ================= */
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(520px,100%),1fr));gap:40px 50px}
.cs-card{display:block;margin-top:60px;text-decoration:none;text-align:center}
.cs-folder{position:relative;padding:16px;background:#ececea}
.cs-folder::before{content:"";position:absolute;left:0;top:-56px;width:48%;height:57px;background:#ececea;clip-path:polygon(0 0,calc(100% - 60px) 0,100% 100%,0 100%)}
.cs-date{position:absolute;top:-36px;left:30px;display:flex;align-items:center;gap:10px;font:600 14px var(--mono)}
.cs-date::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink)}
.cs-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c);border-radius:4px}
.cs-thumb svg, .cs-thumb img, .cs-thumb .proj-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1);display:block}
.cs-card:hover .cs-thumb svg, .cs-card:hover .cs-thumb img, .cs-card:hover .cs-thumb .proj-img{transform:scale(1.04)}
.cs-card h3{margin:22px 0 8px;font:500 clamp(30px,3.6vw,46px)/1 var(--sans);letter-spacing:-.04em}
.cs-card p{max-width:420px;margin:0 auto;font-size:16px;line-height:1.45}

.case-head{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start;margin-top:20px}
.case-head .page-title{margin:14px 0 18px;font-size:clamp(46px,8vw,110px)}
.case-date{display:flex;align-items:center;gap:10px;font:600 13px var(--mono)}
.case-date::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink)}
.case-blurb{max-width:420px;font-size:17px;line-height:1.5}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.case-tags span{padding:8px 10px;background:#ececea;font:600 13px var(--mono)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.stat{padding:14px 16px;background:var(--c);transform:rotate(var(--r))}
.stat b{display:block;font:600 13px var(--mono);letter-spacing:.06em}
.stat span{font-size:15px}
.case-hero{position:relative;margin:50px 0 70px;border:1.5px solid var(--ink);aspect-ratio:16/7;background:var(--c)}
.case-hero svg{position:absolute;inset:0;width:100%;height:100%}
.case-hero .h{position:absolute;width:12px;height:12px;border:1.5px solid var(--ink);background:#fff;z-index:2}
.case-body{max-width:780px;margin:0 auto;font-size:17px;line-height:1.65}
.case-body h2{margin:60px 0 14px;font:500 clamp(30px,3.6vw,44px)/1.1 var(--sans);letter-spacing:-.03em}
.case-body ul{padding-left:20px}
.case-body li{margin:6px 0}
.case-body blockquote{margin:24px 0;padding:18px 22px;background:#f4d99a;font:400 26px/1.3 var(--scrawl);transform:rotate(-1deg)}
.case-nav{display:flex;justify-content:space-between;gap:16px;max-width:780px;margin:80px auto 0;font:600 13px var(--mono)}
.case-nav a{padding:12px 16px;border:2px solid var(--ink);border-radius:8px;background:#fff;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}

/* ================= work page (3d stack) ================= */
.work-page{background-color:#d92626;background-image:none;color:#fff}
.work-page .ruler{background-color:#fff}
.work-page .nav{color:var(--ink)}
.work-page .foot{color:#ffd5d5}
.stack-wrap{position:relative;height:420vh}
.stack-stick{position:sticky;top:72px;height:calc(100vh - 72px);display:grid;place-items:center;overflow:hidden;perspective:1100px}
.stack-title{position:absolute;z-index:50;text-align:center;pointer-events:none;mix-blend-mode:difference}
.stack-title h1{margin:0;font:400 clamp(56px,10vw,130px)/1 var(--sans);letter-spacing:-.04em}
.stack-title span{font:600 14px var(--mono);letter-spacing:.1em}
.stack-card{position:absolute;width:min(300px,60vw);aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:#222;box-shadow:0 30px 60px rgba(0,0,0,.35);cursor:pointer;text-decoration:none;color:#fff;will-change:transform}
.stack-card svg{position:absolute;inset:0;width:100%;height:100%}
.stack-card .lbl{position:absolute;left:10px;bottom:10px;z-index:2;padding:4px 8px;background:rgba(0,0,0,.7);font:600 11px var(--mono)}
.work-page .talk{color:var(--ink)}
.work-page .talk-copy p{color:#fff}

/* ================= playground ================= */
.game-wrap{position:relative;height:calc(100vh - 72px);min-height:480px;overflow:hidden;touch-action:none;user-select:none}
#game{display:block;width:100%;height:100%}
.game-hud{position:absolute;top:14px;left:16px;display:flex;gap:26px;font:600 12px var(--mono)}
.game-hud b{display:block;font:900 26px var(--display)}
.game-help{position:absolute;bottom:12px;left:16px;font:600 11px var(--mono);color:#888}
.game-msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.game-msg[hidden]{display:none}
.game-msg>div{padding:24px 30px;border:2.5px solid var(--ink);border-radius:14px;background:#fff;box-shadow:5px 5px 0 var(--ink);pointer-events:auto}
.game-msg h2{margin:0 0 6px;font:900 40px var(--display)}
.game-msg p{margin:0}
.game-msg button{margin-top:12px;padding:10px 18px;border:2px solid var(--ink);border-radius:8px;background:var(--lime);font:600 14px var(--mono)}

/* ================= contact page ================= */
.contact-page{position:relative;max-width:1280px;margin:0 auto;padding:50px 16px 120px;text-align:center;min-height:calc(100vh - 140px)}
.contact-page .scribble{margin:0;text-align:center}
.contact-page .boxed-label{font:900 clamp(56px,10vw,130px)/1 var(--display);padding:4px 18px;transform:rotate(-4deg);border-color:#3b4bd8}
.contact-page .boxed-label .h{border-color:#3b4bd8;background:var(--blue)}
.note-form{position:relative;width:min(380px,100%);margin:34px auto 0;padding:18px;background:#f4d99a;text-align:left;box-shadow:0 10px 24px rgba(0,0,0,.08)}
.note-form label{display:block;margin-bottom:8px;font:600 13px var(--mono);letter-spacing:.05em}
.note-form textarea,.note-form input{width:100%;border:0;background:transparent;font:16px var(--sans);outline:none;resize:none;color:var(--ink)}
.note-form textarea{min-height:100px}
.note-form input{padding:8px 0;border-bottom:1.5px dashed #a58a4c}
.note-step[hidden]{display:none}
.note-actions{display:flex;align-items:center;gap:10px;margin-top:10px}
.note-actions button{padding:7px 12px;border:0;background:var(--ink);color:#fff;font:600 12px var(--mono)}
.note-actions .back{background:transparent;color:var(--ink);text-decoration:underline}
.note-done{font:400 28px var(--scrawl)}
.available-note{margin-top:46px;font:400 28px var(--scrawl)}
.dock{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;padding:10px;border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.dock a{display:grid;justify-items:center;gap:6px;min-width:84px;padding:10px;border-radius:10px;font:600 11px var(--mono);text-transform:uppercase;text-decoration:none}
.dock a b{display:grid;place-items:center;width:28px;height:28px;border-radius:6px;background:var(--ink);color:#fff;font-size:12px}
.dock a:hover{background:#f1f1ee}
.contact-page .polaroid{top:150px}

@media (max-width:820px){
  .about-layout{grid-template-columns:1fr}
  .side-menu{top:56px;grid-auto-flow:column;justify-content:center}
  .side-menu a{grid-auto-flow:column;gap:6px}
  .bio-grid,.principle,.case-head{grid-template-columns:1fr}
  .principle.flip .card-p{order:0}
  .speech-tag{display:none}
  .stats{margin-top:0}
  .contact-page .polaroid{position:relative;top:0;display:inline-block;margin:20px 8px}
}


/* ---------- designs + photography ---------- */
.page-lede{max-width:640px;margin:-20px 0 50px;font:500 20px/1.45 var(--sans)}
.scrawl-lede{font:400 30px var(--scrawl)}
.design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:56px 40px}
.design-card{display:block;color:inherit;text-decoration:none}
.design-img{position:relative;aspect-ratio:4/3;border:2px solid var(--ink);background:var(--c);display:grid;place-items:center}
.design-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.design-img>span{padding:0 20px;font:400 clamp(30px,4vw,48px)/1 var(--display);font-variation-settings:"wdth" 300;color:var(--ink);text-align:center}
.design-img .h{position:absolute;z-index:2;width:16px;height:16px;border:2px solid var(--ink);background:var(--c)}
.design-img .tl{top:-9px;left:-9px}.design-img .tr{top:-9px;right:-9px}.design-img .bl{bottom:-9px;left:-9px}.design-img .br{bottom:-9px;right:-9px}
.design-tag{position:absolute;z-index:2;top:14px;right:14px;padding:6px 10px;background:var(--ink);color:var(--c);font:500 13px var(--mono)}
.design-card h3{margin:20px 0 6px;font:500 clamp(26px,2.8vw,36px)/1.05 var(--sans);letter-spacing:-.04em}
.design-card p{margin:0;font-size:16px;line-height:1.45;color:#333}
.design-card:hover img{transform:scale(1.03)}
.design-card.empty .design-img,.photo.empty{border:2px dashed #c6c6c7;background:repeating-linear-gradient(45deg,#fafafa 0 12px,#f2f2f2 12px 24px)}
.design-card.empty .design-img>span,.photo.empty span{font:400 26px/1.1 var(--scrawl);color:#8a8a8f;font-variation-settings:normal}
.album{margin-bottom:70px}
.album-text{max-width:640px;margin:0 0 24px;font-size:17px;line-height:1.5}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px}
.photo{position:relative;display:block;aspect-ratio:4/3;padding:0;border:0;background:#eee;overflow:hidden;cursor:zoom-in}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.photo:hover img{transform:scale(1.04)}
.photo .cap{position:absolute;left:10px;bottom:10px;padding:4px 8px;background:rgba(17,18,18,.8);color:#fff;font:500 12px var(--mono)}
.photo.empty{display:grid;place-items:center;text-align:center;cursor:default}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:16px;padding:20px;background:rgba(17,18,18,.92)}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1200px,100%);text-align:center}
.lightbox img{max-width:100%;max-height:82vh;display:block;margin:0 auto}
.lightbox figcaption{margin-top:10px;color:#fff;font:500 14px var(--mono)}
.lb-close{position:absolute;top:16px;right:16px}
.lb-close,.lb-nav{width:46px;height:46px;flex:none;border:2px solid #fff;border-radius:50%;background:none;color:#fff;font-size:18px}
.lb-close:hover,.lb-nav:hover{background:#fff;color:var(--ink)}
@media (max-width:640px){.lb-nav{position:absolute;bottom:20px}.lb-prev{left:20px}.lb-next{right:20px}}


/* ============ ENGINEERING POST-MORTEMS & HONEST DIFFS ============ */
.postmortem-section {
  margin: 54px 0 40px;
  padding: 28px 24px;
  background: #fafaf7;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--ink);
}
.pm-header {
  margin-bottom: 24px;
  border-bottom: 1.5px dashed rgba(20, 20, 20, 0.2);
  padding-bottom: 20px;
}
.pm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  font: 700 11px var(--mono);
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.pm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a1f;
}
.pm-heading {
  font: 700 24px var(--sans);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ink);
}
.pm-subhead {
  font: 400 14px/1.55 var(--sans);
  color: #444;
  margin: 0;
}
.pm-subhead em {
  font-family: var(--serif, 'Instrument Serif', Georgia, serif);
  font-size: 17px;
  color: var(--ink);
  font-style: italic;
}
.pm-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pm-item {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.pm-item[open] {
  box-shadow: 4px 4px 0 var(--ink);
}
.pm-item:hover {
  transform: translate(-1px, -1px);
}
.pm-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  background: #fff;
  list-style: none;
  user-select: none;
  font-weight: 600;
}
.pm-summary::-webkit-details-marker {
  display: none;
}
.pm-sum-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.pm-badge-num {
  font: 700 11px var(--mono);
  background: #ececea;
  color: var(--ink);
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid rgba(20,20,20,0.25);
}
.pm-title {
  font: 700 15px var(--sans);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pm-sum-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.pm-tag {
  font: 700 10px var(--mono);
  background: #f1f1ee;
  color: #555;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.pm-status-pill {
  font: 700 10px var(--mono);
  background: rgba(46, 182, 125, 0.15);
  color: #107c4f;
  border: 1px solid #2eb67d;
  padding: 2px 7px;
  border-radius: 10px;
}
.pm-chevron {
  font-size: 14px;
  color: var(--ink);
  transition: transform 0.2s ease;
  display: inline-block;
}
.pm-item[open] .pm-chevron {
  transform: rotate(180deg);
}
.pm-details-body {
  padding: 14px 18px 18px;
  border-top: 1.5px solid var(--ink);
  background: #fdfdfc;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pm-diff-card {
  padding: 12px 16px;
  border-radius: 6px;
  border: 1.5px solid var(--ink);
  font: 400 13.5px/1.5 var(--sans);
}
.pm-diff-card p {
  margin: 4px 0 0;
  color: #222;
}
.pm-card-title {
  font: 700 11px var(--mono);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.pm-diff-fail {
  background: #fff5f5;
  border-left: 5px solid #e01e5a;
}
.pm-diff-fail .pm-card-title {
  color: #b91c1c;
}
.pm-diff-fix {
  background: #f0fdf4;
  border-left: 5px solid #2eb67d;
}
.pm-diff-fix .pm-card-title {
  color: #15803d;
}
.pm-diff-metric {
  background: #f0f9ff;
  border-left: 5px solid #36c5f0;
}
.pm-diff-metric .pm-card-title {
  color: #0369a1;
}
@media (max-width: 768px) {
  .pm-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .pm-sum-right {
    width: 100%;
    justify-content: space-between;
  }
}


/* ============ COMPREHENSIVE MOBILE OPTIMIZATIONS FOR PAGES ============ */
@media (max-width: 640px) {
  .page {
    padding: 30px 14px 60px !important;
  }
  .page-title {
    font-size: clamp(34px, 9vw, 54px) !important;
    margin: 20px 0 24px !important;
    word-break: break-word !important;
  }
  .page-lede {
    font-size: 16px !important;
    margin: -10px 0 30px !important;
  }
  .scrawl-lede {
    font-size: 22px !important;
  }

  /* Projects Page */
  .cs-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .cs-folder {
    padding: 12px !important;
  }
  .cs-folder::before {
    height: 45px !important;
    top: -44px !important;
    width: 60% !important;
  }
  .cs-date {
    top: -30px !important;
    font-size: 11px !important;
  }
  .cs-title {
    font-size: 20px !important;
  }
  .more-builds-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Case Studies (case.html) */
  .case-head {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .case-head .page-title {
    font-size: clamp(32px, 8.5vw, 46px) !important;
  }
  .stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .stat {
    transform: none !important;
    padding: 12px 14px !important;
  }
  .case-hero {
    margin: 30px 0 40px !important;
    aspect-ratio: 16/9 !important;
  }
  .case-body {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .case-body h2 {
    font-size: 24px !important;
    margin: 40px 0 12px !important;
  }
  .postmortem-section {
    padding: 18px 14px !important;
    margin: 40px 0 30px !important;
    box-shadow: 4px 4px 0 var(--ink) !important;
  }
  .pm-heading {
    font-size: 20px !important;
  }
  .pm-summary {
    padding: 12px 14px !important;
  }
  .pm-details-body {
    padding: 12px 14px 14px !important;
  }
  .case-nav {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 50px !important;
  }
  .case-nav a {
    width: 100% !important;
    text-align: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  /* About Page */
  .about-layout {
    grid-template-columns: 1fr !important;
  }
  .side-menu {
    position: sticky !important;
    top: 60px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    display: flex !important;
    justify-content: space-around !important;
    z-index: 50 !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
  }
  .side-menu a {
    font-size: 11px !important;
    padding: 6px 10px !important;
    gap: 4px !important;
  }
  .bio-head {
    font-size: 24px !important;
  }
  .bio-note {
    padding: 16px 18px !important;
    font-size: 14.5px !important;
  }
  .bio-side .polaroid {
    max-width: 200px !important;
  }
  .principles {
    gap: 24px !important;
  }
  .principle .card-p {
    padding: 18px 20px !important;
  }
  .principle h3 {
    font-size: 22px !important;
  }
  .tl-item {
    grid-template-columns: 36px 1fr !important;
    gap: 10px !important;
    padding: 20px 0 !important;
  }
  .tl-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }
  .tl-item h3 {
    font-size: 22px !important;
  }
  .tl-item p {
    font-size: 14px !important;
  }

  /* Designs & Photography */
  .design-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .photo .cap {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }

  /* Contact Page */
  .contact-page {
    padding: 30px 14px 80px !important;
  }
  .contact-page .boxed-label {
    font-size: clamp(34px, 9vw, 56px) !important;
    padding: 4px 12px !important;
  }
  .note-form {
    padding: 14px !important;
  }
  .dock {
    gap: 6px !important;
    padding: 8px !important;
  }
  .dock a {
    min-width: 68px !important;
    padding: 8px 6px !important;
    font-size: 10px !important;
  }
  .dock a b {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 380px) {
  .photo-grid {
    grid-template-columns: 1fr !important;
  }
}