/* ==========================================================================
   Alan Joshy — page layouts (home, work, journal, about, contact)
   ========================================================================== */

main {
  position: relative;
  z-index: 2;
  animation: pageIn .7s var(--ease) both;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.rise {
  animation: rise .9s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

@media (prefers-reduced-motion: reduce) {

  main,
  .rise {
    animation: none;
  }
}

.sec {
  padding: clamp(5.5rem, 10vw, 8rem) 0;
  position: relative;
}

.title-xl,
.title-l,
.title-m {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.04;
  margin: 0;
}

.title-xl {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
}

.title-l {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
}

.title-m {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  letter-spacing: -.015em;
  line-height: 1.15;
}

.title-xl em,
.title-l em,
.title-m em {
  color: var(--accent-text);
}

.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 52ch;
  margin: 0;
}

.prose p {
  color: var(--fg-dim);
  margin: 0 0 1.1rem;
  max-width: 58ch;
}

.prose strong {
  color: var(--fg);
}

/* ==========================================================================
   Home — hero
   ========================================================================== */
.hero {
  position: relative;
  /* a hair short of full height, so the next section's tint shows as a thin band along the bottom */
  min-height: calc(100vh - 3.5rem);
  min-height: calc(100svh - 3.5rem);
  display: flex;
  align-items: center;
  padding: 7rem 0 5.5rem;
}

.hero>.wrap {
  width: 100%;
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding: 9.5rem 0 7rem;
  }

}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 350px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.hero-note {
  display: inline-block;
  transform: rotate(-2deg);
  margin: 0 0 .6rem;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.9rem, 7vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 0 0 1.8rem;
}

.hero-title em {
  color: var(--accent-text);
  position: relative;
  white-space: nowrap;
}

.scribble {
  position: absolute;
  left: 0;
  bottom: -.14em;
  width: 100%;
  height: .26em;
  overflow: visible;
}

.scribble path {
  fill: none;
  stroke: var(--accent-text);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 1.1s var(--ease) .9s forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.hero-sub {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--fg-dim);
  max-width: 46ch;
  margin: 0 0 2rem;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}

.taped {
  position: relative;
  margin: 0;
  width: min(100%, 350px);
  justify-self: center;
}

.taped .frame {
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* the frame stays put; only the picture inside slowly zooms */
.taped .photo {
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 5;
}

.taped img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 1.4s cubic-bezier(.22, .68, .24, 1);
}

.taped:hover img {
  transform: scale(1.1);
}

.taped figcaption {
  display: none;
}

/* Days / evenings / weekends — plain columns, no cards */
.rhythm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  margin-top: clamp(4.5rem, 9vw, 7.5rem);
}

.rhythm>div {
  padding: 2rem 2rem 0 0;
}

.rhythm>div+div {
  padding-left: 2rem;
  border-left: 1px solid var(--line);
}

.rhythm h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--accent-text);
  margin: 0 0 .4rem;
}

.rhythm p {
  margin: 0;
  color: var(--fg-dim);
  font-size: 1rem;
  max-width: 34ch;
}

/* ==========================================================================
   Home — three doors (each one deliberately different)
   ========================================================================== */
.doors {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4rem;
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 8px;
  min-height: 400px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  isolation: isolate;
  transition: transform .5s var(--ease);
}

.door:hover {
  transform: translateY(-5px);
}

.door h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0 0 .7rem;
}

.door p {
  margin: 0 0 .4rem;
  max-width: 38ch;
}

.door .go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 38ch);
  margin-top: 1.1rem;
  padding-top: .9rem;
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 16%, transparent), color-mix(in srgb, currentColor 6%, transparent)) top / 100% 1px no-repeat;
  font-weight: 600;
}

.door .go span {
  transition: transform .3s var(--ease);
}

.door:hover .go span {
  transform: translateX(6px);
}

.door-work {
  grid-column: span 7;
  background: var(--panel);
  color: var(--panel-fg);
}

.door-work p {
  color: var(--panel-dim);
}

.door-work .stat {
  position: absolute;
  top: clamp(1rem, 2vw, 1.6rem);
  right: clamp(1.2rem, 3vw, 2.4rem);
  text-align: right;
  line-height: .9;
}

.door-work .stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(5rem, 12vw, 9rem);
  letter-spacing: -.05em;
  color: var(--hl);
}

.door-work .stat span {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--panel-dim);
}

.door-hw {
  grid-column: span 5;
  color: #F4F2EC;
  background: #0E0F11;
}

.door-hw .door-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1s var(--ease);
}

.door-hw:hover .door-img {
  transform: scale(1.06);
}

.door-hw::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 12, 8, .1) 10%, rgba(15, 12, 8, .94) 88%);
}

.door-hw p {
  color: #E1DED4;
}

.door-journal {
  grid-column: span 12;
  min-height: 340px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--green);
  color: var(--green-ink);
}

.door-journal .door-text {
  max-width: 44ch;
  position: relative;
  z-index: 2;
}

.door-journal p {
  opacity: .92;
}

.stack {
  position: relative;
  flex: 0 0 min(52%, 560px);
  height: 270px;
}

.stack img {
  position: absolute;
  width: 190px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 7px solid #F4F2EC;
  border-bottom-width: 24px;
  border-radius: 2px;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55);
  transition: transform .6s var(--ease);
}

.stack img:nth-child(1) {
  left: 2%;
  top: 22px;
  transform: rotate(-7deg);
}

.stack img:nth-child(2) {
  left: 30%;
  top: -8px;
  transform: rotate(3deg);
  z-index: 2;
}

.stack img:nth-child(3) {
  left: 58%;
  top: 30px;
  transform: rotate(8deg);
}

.door-journal:hover .stack img:nth-child(1) {
  transform: rotate(-11deg) translateX(-12px);
}

.door-journal:hover .stack img:nth-child(2) {
  transform: rotate(1deg) translateY(-8px);
}

.door-journal:hover .stack img:nth-child(3) {
  transform: rotate(12deg) translateX(12px);
}

/* closing call to action */
/* closing band: one of the journal photos, darkened for the text; it starts with a clean edge and melts into the footer */
.cta-band {
  background:
    linear-gradient(180deg, rgba(18, 15, 11, .5) 0%, rgba(18, 15, 11, .62) 50%, var(--foot-bg) 100%),
    var(--cta-photo) center 40% / cover no-repeat;
  color: #F4F2EC;
  padding: clamp(9rem, 15vw, 13rem) 0;
  position: relative;
  overflow: hidden;
}

.cta-home {
  --cta-photo: url('../images/closing/home.webp');
  background-position: 0 0, center 72%;
}

.cta-work {
  --cta-photo: url('../images/closing/work.webp');
  /* the photo is already dark, so a lighter veil */
  background:
    linear-gradient(180deg, rgba(18, 15, 11, .12) 0%, rgba(18, 15, 11, .28) 55%, var(--foot-bg) 100%),
    var(--cta-photo) center 62% / cover no-repeat;
}

@media (max-width: 900px) {
  .cta-home {
    --cta-photo: url('../images/closing/home-1000.webp');
  }

  .cta-work {
    --cta-photo: url('../images/closing/work-1000.webp');
  }
}

.cta-band .title-xl {
  max-width: 15ch;
  margin-bottom: 2.8rem;
}

.cta-band .title-xl em {
  color: #FFC9A0;
}

.cta-band .hand {
  color: #FFD2AE;
  display: block;
  transform: rotate(-2deg);
  margin-bottom: 1.4rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
}

.cta-band .btn-cta {
  background: #F4F2EC;
  color: #141517;
  border-color: #F4F2EC;
}

.cta-band .btn-cta:hover {
  background: var(--hl);
  color: #141517;
  border-color: var(--hl);
}

.cta-band .text-link:hover {
  color: #FFC9A0;
}

/* ==========================================================================
   Inner-page heading
   ========================================================================== */
.page-head {
  padding: clamp(8.5rem, 14vw, 12rem) 0 clamp(3rem, 6vw, 5rem);
}

.page-head .hand {
  display: inline-block;
  transform: rotate(-2deg);
  margin-bottom: .5rem;
}

.page-head .lede {
  margin-top: 1.6rem;
}

/* ==========================================================================
   Work
   ========================================================================== */
.tax-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.tax-side {
  position: sticky;
  top: 6.5rem;
}

.bignum {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(5.5rem, 15vw, 11rem);
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--accent-text);
  margin: 0 0 .8rem;
}

.tax-side p {
  color: var(--fg-dim);
  margin: 0;
  max-width: 30ch;
}

.desk-row {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: .5rem 1.6rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  transition: padding-left .35s var(--ease);
}

.desk-row:last-child {
  border-bottom: 1px solid var(--line);
}

.desk-row:hover {
  padding-left: .7rem;
}

.desk-row dt {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.desk-row dd {
  margin: 0;
  color: var(--fg-dim);
  font-size: 1rem;
}

.sites-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem clamp(2rem, 6vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.project {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.browser {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  background: var(--card-bg);
  transform: rotate(-1deg);
  transition: transform .6s var(--ease);
}

.project:hover .browser {
  transform: rotate(0);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .9rem;
  background: var(--bg-3);
  border-bottom: 1px solid var(--card-border);
}

.browser-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 28%, transparent);
}

.browser-url {
  margin-left: .8rem;
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border-radius: 6px;
  padding: .25rem .9rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-body {
  background: #F1F0EB;
}

.browser-body img {
  width: 100%;
  display: block;
}

.project h3 {
  margin-bottom: 1rem;
}

.project p {
  color: var(--fg-dim);
  margin: 0 0 1.2rem;
}

.project-empty {
  margin-top: clamp(3rem, 6vw, 5rem);
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
}

.project-empty p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -.015em;
  max-width: 26ch;
  line-height: 1.15;
}

/* ==========================================================================
   Journal
   ========================================================================== */
.trip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4rem 2rem;
  align-items: center;
  margin-bottom: clamp(5.5rem, 8vw, 7rem);
}

.trip-photo {
  grid-column: 1 / 8;
  margin: 0;
  display: block;
  position: relative;
  background: #F4F2EC;
  padding: 10px 10px 10px;
  border-radius: 3px;
  box-shadow: var(--shadow);
  transform: rotate(-1.2deg);
  transition: transform .6s var(--ease);
}

.trip-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.trip-photo:hover {
  transform: rotate(0) scale(1.012);
}

.trip-text {
  grid-column: 8 / 13;
}

.trip:nth-of-type(even) .trip-photo {
  grid-column: 6 / 13;
  order: 2;
  transform: rotate(1.2deg);
}

.trip:nth-of-type(even) .trip-photo:hover {
  transform: rotate(0) scale(1.012);
}

.trip:nth-of-type(even) .trip-text {
  grid-column: 1 / 6;
  order: 1;
}

.trip-text .hand {
  display: block;
  margin-bottom: .8rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.trip-text h2 {
  margin-bottom: 1rem;
}

.trip-text p {
  color: var(--fg-dim);
  margin: 0 0 1.2rem;
  max-width: 40ch;
}

.map-band {
  /* the green carries straight on behind the footer (see .site-footer.on-map) */
  background: var(--green);
  color: var(--green-ink);
  padding: clamp(6rem, 9vw, 7rem) 0 0;
  position: relative;
}

.map-band-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 4rem);
}

.map-band h2 {
  margin: 0 0 1rem;
}

.map-band h2 em {
  color: inherit;
  opacity: .8;
}

.map-band p {
  max-width: 40ch;
  margin: 0 0 1.6rem;
  opacity: .92;
}

.map-btn {
  background: none;
  border: 0;
  padding: 0 0 2px;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
}

.journal-note {
  margin-top: 2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
  color: var(--fg-faint);
}

.journal-ask {
  margin: 1rem 0 0;
  font-size: 1.1rem;
  color: var(--fg-dim);
}

/* ---- the mini map ---- */
.mini-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--green-ink);
  clip-path: inset(-400px -80px 0 -80px);   /* the footer map takes over below this line */
}

/* the Journal page's footer: same green, with the southern end of the map running behind it */
.site-footer.on-map {
  background: var(--green);
  overflow: hidden;
  /* the southern part of the map gets its own strip above the footer content, so nothing overlaps */
  padding-top: calc(var(--fm-height, 0px) + clamp(2rem, 4vw, 3rem));
}

.site-footer.on-map .wrap {
  position: relative;
  z-index: 1;
}

.footer-map {
  position: absolute;
  top: 0;
  left: var(--fm-left, 50%);
  width: var(--fm-width, 40%);
  height: auto;
  color: #E8EEF6;
  pointer-events: none;
  /* fade out toward the bottom and the right edge instead of ending in a hard cut */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%), linear-gradient(90deg, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%), linear-gradient(90deg, #000 70%, transparent 100%);
  mask-composite: intersect;
}

.mini-map text {
  font-family: var(--font-hand);
  font-size: 34px;
  font-weight: 500;
  fill: currentColor;
  paint-order: stroke;
  stroke: var(--green);
  stroke-width: 8px;
  stroke-linejoin: round;
}

.mini-map .ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: .35;
}

.mini-map .dot {
  fill: currentColor;
}

.mini-map .pin {
  cursor: pointer;
}

.mini-map .pin .dot,
.mini-map .pin .ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .3s var(--ease);
}

.mini-map .pin:hover .dot,
.mini-map .pin:focus-visible .dot {
  transform: scale(1.5);
}

.mini-map .pin:hover .ring,
.mini-map .pin:focus-visible .ring {
  transform: scale(1.35);
  opacity: .8;
}

.mini-map .pin:hover text,
.mini-map .pin:focus-visible text {
  fill: #FFC9A0;
}

.mini-map .mm-bike {
  filter: brightness(0) invert(.93);
  transform-box: fill-box;
  transform-origin: 50% 90%;
}

/* the route draws itself once and the pins arrive one by one (armed by script; static without it) */
.mini-map .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.mini-map.armed .draw {
  stroke-dashoffset: 1;
}

.mini-map.armed.drawn .draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.2s cubic-bezier(.65, 0, .35, 1);
}

.mini-map.armed .pin,
.mini-map.armed .home {
  opacity: 0;
}

.mini-map.armed.drawn .pin {
  opacity: 1;
  transition: opacity .5s ease var(--d, 0s);
}

.mini-map.armed.drawn .home {
  opacity: 1;
  transition: opacity .5s ease;
}

@media (max-width: 760px) {
  .map-band-grid {
    grid-template-columns: 1fr;
  }

  .mini-map text {
    font-size: 46px;
  }

  .mini-map .minor text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mini-map.armed.drawn .draw,
  .mini-map.armed.drawn .pin,
  .mini-map.armed.drawn .home {
    transition: none;
  }
}

/* ==========================================================================
   About
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}

.about-grid .taped {
  position: sticky;
  top: 7rem;
}

.about-copy p {
  font-size: 1.14rem;
  color: var(--fg-dim);
  margin: 0 0 1.3rem;
  max-width: 54ch;
}

.about-copy p.big {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--fg);
  margin-bottom: 1.8rem;
}

.about-copy p.big em {
  color: var(--accent-text);
}

.about-close {
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

.about-close .title-xl {
  max-width: 18ch;
}

.close-links {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  margin: 2rem 0 0;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.reach {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.2rem;
}

.reach a.big-link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  transition: color .25s var(--ease);
}

.reach a.big-link:hover {
  color: var(--accent-text);
}

.reach small {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--fg-faint);
  font-size: 1rem;
}

.reach .btn-cta {
  justify-self: start;
  margin-top: .4rem;
}

.letter {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--shadow);
}

.letter-hello {
  font-family: var(--font-hand);
  font-size: 2.1rem;
  color: var(--accent-text);
  margin: 0 0 1.2rem;
}

.field {
  display: grid;
  gap: .2rem;
  margin-bottom: 1.5rem;
}

.field label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fg-dim);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  padding: .55rem 0;
  color: var(--fg);
  font: inherit;
  font-size: 1.05rem;
  transition: border-color .25s var(--ease);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--accent-text);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948a76' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 18px;
  padding-right: 1.8rem;
}

.field select option {
  background: var(--bg);
  color: var(--fg);
}

.field-error {
  min-height: 0;
  margin: .35rem 0 0;
  font-size: .92rem;
  color: #B3321E;
}

.field-error:empty {
  display: none;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-bottom-color: #B3321E;
}

.legal h2 {
  margin: 2.8rem 0 .7rem;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal a:not(.text-link) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-note {
  text-align: center;
  color: var(--fg-faint);
  font-size: .92rem;
  margin: 1rem 0 0;
}

.form-success-state {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  gap: .7rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.form-success-state.is-visible {
  opacity: 1;
  transform: none;
}

.success-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  margin: 0;
}

.success-desc {
  color: var(--fg-dim);
  margin: 0;
  max-width: 32ch;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {

  .hero-grid,
  .tax-grid,
  .sites-head,
  .project,
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* phones: more air between every block of the hero (kept at the end so nothing earlier overrides it) */
  .hero-grid {
    gap: 6rem;
  }

  .hero-note {
    margin-bottom: 1.1rem;
  }

  .hero-title {
    line-height: 1.06;
    margin-bottom: 2.2rem;
  }

  .hero-sub {
    line-height: 1.72;
    margin-bottom: 2.6rem;
  }

  .hero-links {
    gap: 1.4rem 1.8rem;
  }

  .hero-grid .taped {
    justify-self: center;
    width: min(74%, 280px);
    margin: 0 auto;
  }

  .tax-side,
  .about-grid .taped {
    position: static;
  }

  /* Work page on phones: separate blocks instead of one long column of text */
  .page-head .lede {
    margin-top: 2rem;
    line-height: 1.72;
  }

  .tax-grid {
    gap: 3.6rem;
  }

  .tax-side {
    padding-top: 2.6rem;
    border-top: 1px solid var(--line);
  }

  .bignum {
    margin-bottom: .4rem;
  }

  .tax-side p {
    line-height: 1.7;
  }

  .tax-grid .prose {
    margin-bottom: 2.6rem !important;
  }

  .desk-row {
    padding: 1.7rem 0;
    gap: .6rem;
  }

  .desk-row dt {
    font-size: 1.35rem;
  }

  .sites-head {
    gap: 1.6rem;
  }

  .about-grid .taped {
    width: min(70%, 280px);
    margin-inline: auto;
  }

  .door-work,
  .door-hw {
    grid-column: span 12;
  }

  .door-journal {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 1.5rem;
  }

  .stack {
    flex: none;
    width: 100%;
    height: 260px;
  }

  .stack img {
    width: 150px;
  }

  .trip,
  .trip:nth-of-type(even) {
    grid-template-columns: 1fr;
    row-gap: 2.6rem;            /* photo → handwritten note → title */
    margin-bottom: 7.5rem;
  }

  .trip-text .hand {
    margin-bottom: .6rem;
  }

  .trip-text h2 {
    margin-bottom: 1.2rem;
  }

  .trip-text p {
    line-height: 1.72;
    margin-bottom: 1.6rem;
  }

  .trip-photo,
  .trip-text,
  .trip:nth-of-type(even) .trip-photo,
  .trip:nth-of-type(even) .trip-text {
    grid-column: 1 / -1;
    order: 0;
  }

}

@media (max-width: 640px) {
  .rhythm {
    grid-template-columns: 1fr;
  }

  .rhythm>div,
  .rhythm>div+div {
    padding: 1.3rem 0;
    border-left: 0;
  }

  .rhythm>div+div {
    border-top: 1px solid var(--line);
  }

  .desk-row {
    grid-template-columns: 1fr;
  }

  .door {
    min-height: 340px;
  }

  .door-work .stat b {
    font-size: 5rem;
  }

  .stack img {
    width: 125px;
  }

  .stack {
    height: 220px;
  }

  .hero-title em {
    white-space: normal;
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Laptop screens: when the window is short, everything scales down with it, so
   the first screen holds more of the page (an image, the form) without scrolling.
   Three steps, by usable window height.
   ========================================================================== */
@media (min-width: 901px) and (max-height: 980px) {
  html {
    font-size: 15px;
  }

  .hero {
    padding: 6rem 0 2.6rem;
    min-height: calc(100vh - 3rem);
    min-height: calc(100svh - 3rem);
  }

  .hero-title {
    font-size: clamp(2.6rem, min(6.6vw, 11vh), 5.2rem);
    margin-bottom: 1.2rem;
  }

  .hero-sub {
    margin-bottom: 1.4rem;
  }

  .taped {
    width: min(100%, 340px, 46vh);
  }

  .page-head {
    padding: clamp(6.2rem, 13vh, 8rem) 0 clamp(1.4rem, 3vh, 2.4rem);
  }

  .page-head .lede {
    margin-top: 1rem;
  }

  .title-xl {
    font-size: clamp(2.3rem, min(5.6vw, 9vh), 4.2rem);
  }

  .sec {
    padding: clamp(3.4rem, 7vh, 5.5rem) 0;
  }

  .door {
    min-height: clamp(300px, 42vh, 400px);
  }

  .door-journal {
    min-height: clamp(260px, 36vh, 340px);
  }

  .trip {
    margin-bottom: clamp(3rem, 8vh, 5rem);
  }

  .trip-photo img {
    aspect-ratio: 16 / 9;
    max-height: 44vh;
  }

  .about-grid .taped {
    width: min(100%, 320px, 46vh);
  }

  .about-copy p.big {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    margin-bottom: 1.1rem;
  }

  .about-copy p {
    margin-bottom: .9rem;
  }

  .reach {
    margin-top: 1.4rem;
    gap: 1.1rem;
  }

  .letter {
    padding: clamp(1.2rem, 3vh, 2rem) clamp(1.4rem, 3vw, 2.2rem);
  }

  .letter-hello {
    font-size: 1.8rem;
    margin-bottom: .6rem;
  }

  
  .field {
    margin-bottom: clamp(.8rem, 2vh, 1.2rem);
    gap: 0;
  }

  .field textarea {
    height: clamp(64px, 9vh, 92px);
    min-height: 64px;
  }

  .field input,
  .field textarea,
  .field select {
    padding-block: .4rem;
  }

  .form-note {
    margin-top: .7rem;
  }

  .bignum {
    font-size: clamp(4rem, min(10vw, 17vh), 8rem);
  }

  .desk-row {
    padding: .9rem 0;
  }

  .cta-band {
    padding: clamp(5rem, 12vh, 8.5rem) 0;
  }

  .site-footer {
    padding-top: clamp(3.5rem, 9vh, 5.5rem);
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 901px) and (max-height: 700px) {
  html {
    font-size: 13px;
  }
}

/* ==========================================================================
   Typeface: upright grotesque headings, no italic accent words, no handwriting
   ========================================================================== */
.hero-title,
.title-xl,
.title-l,
.title-m,
.door h2,
.page-head h1,
.about-copy p.big,
.bignum,
.door-work .stat b,
.success-title,
.reach a.big-link {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
}

.bignum,
.door-work .stat b {
  font-weight: 700;
  letter-spacing: -.05em;
}

.about-copy p.big {
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.22;
}

/* the accent word keeps its colour, loses the italic and the hand-drawn underline */
.title-xl em,
.title-l em,
.title-m em,
.hero-title em,
.about-copy p.big em,
.cta-band .title-xl em,
.map-band h2 em,
.error-headline em {
  font-style: normal;
  font-weight: inherit;
}

.scribble {
  display: none;
}

/* small notes that used to be handwritten */
.hand,
.hero-note,
.door-work .stat span,
.journal-note,
.mini-map text,
.ride-hud-toast {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  letter-spacing: .01em;
}

.door-work .stat span {
  font-size: 1rem;
}

.rhythm h3,
.reach small,
.field label,
.footer-cols .fh {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
}

.letter-hello {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -.02em;
}

.door-work .stat b {
  font-weight: 600;
  font-size: clamp(4.2rem, 10vw, 7.4rem);
}

/* ==========================================================================
   Premium pass: calm, spacious, restrained. Sizes stay compact; the air comes
   from spacing between things, which scales with the screen height.
   ========================================================================== */
.sec {
  padding: clamp(5rem, 13vh, 10rem) 0;
}

.hero-note,
.page-head .hand {
  transform: none;
}

.hero-note {
  font-size: .92rem;
  letter-spacing: .02em;
  margin-bottom: 1.1rem;
  color: var(--fg-faint);
}

.title-xl,
.title-l,
.title-m,
.hero-title,
.door h2 {
  text-wrap: balance;
}

p,
.lede {
  text-wrap: pretty;
}

.hero-title {
  letter-spacing: -.045em;
  margin-bottom: 1.8rem;
}

.lede,
.hero-sub {
  line-height: 1.62;
}

.doors {
  gap: clamp(1rem, 2vw, 1.6rem);
}

.door {
  padding: clamp(1.8rem, 3.4vw, 3rem);
  min-height: clamp(340px, 50vh, 480px);
}

.door-journal {
  min-height: clamp(300px, 44vh, 400px);
}

.taped .frame {
  box-shadow: 0 34px 60px -44px rgba(0, 0, 0, .4);
}

.btn-cta,
.btn-line {
  padding: .85rem 1.75rem;
  letter-spacing: .01em;
}

.site-footer {
  padding-top: clamp(5rem, 14vh, 8.5rem);
}

.reveal {
  transform: translateY(32px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.reveal.is-visible {
  transform: none;
}

/* ==========================================================================
   Phones: Journal trips become swipeable cards
   ========================================================================== */
.deck-dots {
  display: none;
}

@media (max-width: 860px) {
  .sec {
    padding: clamp(4.5rem, 12vw, 6.5rem) 0;
  }

  .trip-deck {
    display: flex;
    gap: .9rem;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) .4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .trip-deck::-webkit-scrollbar {
    display: none;
  }

  .trip-deck .trip,
  .trip-deck .trip:nth-of-type(even) {
    flex: 0 0 82%;
    display: block;
    margin: 0;
    scroll-snap-align: start;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    opacity: 1;
    transform: none;
  }

  .trip-deck .trip-photo,
  .trip-deck .trip:nth-of-type(even) .trip-photo {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    transform: none;
  }

  .trip-deck .trip-photo img {
    aspect-ratio: 4 / 3;
    max-height: none;
  }

  .trip-deck .trip-text,
  .trip-deck .trip:nth-of-type(even) .trip-text {
    padding: 1.3rem 1.3rem 1.6rem;
  }

  .trip-deck .trip-text h2 {
    font-size: 1.7rem;
    margin-bottom: .7rem;
  }

  .trip-deck .trip-text p {
    font-size: .98rem;
    line-height: 1.55;
    margin-bottom: 1.1rem;
  }

  .deck-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: 1rem 0 0;
  }

  .deck-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--line);
    cursor: pointer;
    transition: width .3s var(--ease), background .3s ease;
  }

  .deck-dots button.on {
    width: 22px;
    background: var(--fg);
  }
}

/* very small phones: the big "150+" goes above the title instead of beside it */
@media (max-width: 360px) {
  .door-work .stat {
    position: static;
    text-align: left;
    margin-bottom: 1.2rem;
  }

  .door-work .stat b {
    font-size: 4.2rem;
  }
}

/* tablets and phones: the tiles are as tall as their content (the photo tile keeps some height) */
@media (max-width: 900px) {
  .door,
  .door-journal {
    min-height: 0;
  }

  .door-hw {
    min-height: 340px;
  }
}

@media (max-width: 600px) {
  .door-work .stat {
    position: static;
    text-align: left;
    margin-bottom: 1.2rem;
  }

  .door-work .stat b {
    font-size: 4.4rem;
  }
}

/* ==========================================================================
   Social page: rounded cards, each with its own mark blended into the corner
   ========================================================================== */
.sx-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.3rem);
}

.sx-card {
  --r: 28px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 210px;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--fg) 7%, transparent), transparent 60%),
    var(--card-bg);
  transition: transform .5s var(--ease), border-color .4s ease, box-shadow .5s var(--ease);
}

.sx-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--fg) 38%, transparent);
  box-shadow: var(--shadow);
}

/* the big mark fading into the corner */
.sx-mark {
  position: absolute;
  z-index: -1;
  right: -34px;
  bottom: -40px;
  width: clamp(170px, 22vw, 260px);
  height: clamp(170px, 22vw, 260px);
  color: var(--fg);
  opacity: .075;
  transform: rotate(-9deg);
  transition: transform .8s var(--ease), opacity .5s ease;
  -webkit-mask-image: linear-gradient(135deg, transparent 8%, #000 70%);
  mask-image: linear-gradient(135deg, transparent 8%, #000 70%);
}

.sx-mark svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.sx-card:hover .sx-mark {
  opacity: .14;
  transform: rotate(-3deg) scale(1.06);
}

/* the small solid mark, in the same silver / charcoal finish as the tab bar */
.sx-chip {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: auto;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--chip-a), var(--chip-b));
  color: var(--chip-fg);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.sx-chip svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.sx-name {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -.03em;
  line-height: 1;
}

.sx-note {
  color: var(--fg-dim);
  max-width: 34ch;
}

.sx-arrow {
  position: absolute;
  top: 1.3rem;
  right: 1.5rem;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 1.05rem;
  transition: transform .4s var(--ease), background .3s ease, color .3s ease;
}

.sx-card:hover .sx-arrow {
  transform: translate(3px, -3px);
  background: var(--fg);
  color: var(--bg);
}

/* the placing: WhatsApp is the tall lead card, two beside it, two underneath */
.sx-wa { grid-column: span 7; grid-row: span 2; min-height: 440px; }
.sx-li { grid-column: span 5; }
.sx-ig { grid-column: span 5; }
.sx-x  { grid-column: span 6; }
.sx-em { grid-column: span 6; }

.sx-wa .sx-name {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
}

/* the lead card is the inverse of the page, so it stands out in both themes */
.sx-wa {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--bg) 14%, transparent), transparent 60%),
    var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.sx-wa .sx-note {
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--bg) 72%, transparent);
}

.sx-wa .sx-mark {
  right: -50px;
  bottom: -60px;
  width: clamp(260px, 34vw, 400px);
  height: clamp(260px, 34vw, 400px);
  color: var(--bg);
  opacity: .1;
}

html[data-theme="light"] .sx-wa .sx-chip {
  background: linear-gradient(145deg, #ECEDF0, #A3A7AF);
  color: #16171A;
}

.sx-wa .sx-arrow {
  border-color: color-mix(in srgb, var(--bg) 35%, transparent);
}

.sx-wa:hover .sx-arrow {
  background: var(--bg);
  color: var(--fg);
}

.sx-wa:hover {
  border-color: var(--fg);
}

.social-more {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.8rem;
  margin-top: 1.8rem;
}

@media (max-width: 860px) {
  .sx-wa,
  .sx-li,
  .sx-ig,
  .sx-x,
  .sx-em {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 190px;
  }

  .sx-wa {
    min-height: 260px;
  }

  .sx-card {
    --r: 24px;
  }
}

@media (min-width: 600px) and (max-width: 860px) {
  .sx-li,
  .sx-ig,
  .sx-x,
  .sx-em {
    grid-column: span 6;
  }
}

/* ==========================================================================
   Phones: a main button, then the other options as a tidy list (no wrapping pile of links)
   ========================================================================== */
@media (max-width: 600px) {
  .cta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 420px;
  }

  .cta-row .btn-cta {
    justify-content: center;
    text-align: center;
    margin-bottom: 1.1rem;
  }

  .cta-row .text-link,
  .close-links .text-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .95rem 0;
    background: none;
    border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    font-weight: 500;
  }

  .cta-row .text-link:last-child,
  .close-links .text-link:last-child {
    border-bottom: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  }

  .cta-row .text-link::after,
  .close-links .text-link::after {
    content: "\2192";
    transition: transform .3s var(--ease);
  }

  .cta-row .text-link:active::after,
  .close-links .text-link:active::after {
    transform: translateX(4px);
  }

  .close-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 420px;
  }
}

/* phones: "Home, Kochi" sits under its dot instead of off the left edge */
@media (max-width: 760px) {
  .mini-map .home text {
    text-anchor: start;
    transform: translate(-20px, 26px);
  }
}

/* the header's "Say hello" is pointless on the page it links to */
.header-actions .btn-cta[aria-current="page"] {
  display: none;
}

@media (max-width: 600px) {
  .btn-wide {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    text-align: center;
  }
}

/* project title as the link: the arrow says "this opens the site" */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Work, on tablets and phones: the 150+ card, then the services as a stack of cards
   (like stacked notifications: swipe or tap the top one away to reveal the next)
   ========================================================================== */
.dr-ic {
  display: none;
}

.tax-cta {
  margin-top: 2rem;
}

@media (max-width: 860px) {
  .tax-side {
    position: relative;
    top: auto;
    isolation: isolate;
    overflow: hidden;
    padding: 1.7rem 1.5rem 1.6rem;
    border: 1px solid var(--line);
    border-radius: 28px;
    background:
      radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--fg) 9%, transparent), transparent 60%),
      var(--card-bg);
  }

  .tax-side .bignum {
    margin: 0 0 .6rem;
    font-weight: 600;
    font-size: clamp(4.4rem, 22vw, 6rem);
    background: linear-gradient(145deg, var(--chip-a), var(--chip-b));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .tax-side p:last-child {
    max-width: 28ch;
  }

  /* the card face (the same whether it is in the stack or, without scripts, in a plain list) */
  .desk-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 0;
    padding: .4rem 0;
  }

  .desk-row,
  .desk-row:last-child {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1.05rem;
    align-items: center;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--card-bg);
  }

  .desk-row:hover {
    padding-left: 1.3rem;
  }

  .dr-ic {
    display: grid;
    place-items: center;
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    background: linear-gradient(145deg, var(--chip-a), var(--chip-b));
    color: var(--chip-fg);
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
  }

  .dr-ic svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
  }

  .desk-row dt {
    grid-column: 2;
    margin: 0;
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
  }

  .desk-row dd {
    grid-column: 2;
    margin: .4rem 0 0;
    font-size: .95rem;
    line-height: 1.45;
  }

  /* ---- the stack ---- */
  .desk-list.stack {
    display: block;
    position: relative;
    padding: 0;
    touch-action: pan-y;   /* swiping up or down scrolls the page; the cards turn on a sideways swipe or a tap */
    -webkit-user-select: none;
    user-select: none;
  }

  .desk-list.stack .desk-row {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: calc(10 - var(--d, 0));
    transform-origin: 50% 100%;
    /* --e is the depth while a finger is dragging (cards behind rise as the top one leaves); otherwise --d */
    transform: translate3d(0, calc(var(--e, var(--d, 0)) * 17px), 0) scale(calc(1 - var(--e, var(--d, 0)) * .055));
    opacity: calc(1 - var(--e, var(--d, 0)) * .12);
    transition: transform .45s cubic-bezier(.22, .7, .2, 1), opacity .3s ease, box-shadow .3s ease;
    cursor: grab;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  /* while a finger is on the stack, nothing lags behind it */
  .desk-list.stack.dragging .desk-row {
    transition: none;
    cursor: grabbing;
  }

  .desk-list.stack .desk-row.is-top {
    box-shadow: var(--shadow);
    background: color-mix(in srgb, var(--fg) 5%, var(--card-bg));
    border-color: color-mix(in srgb, var(--fg) 24%, transparent);
  }

  .desk-list.stack .desk-row.is-top:active {
    cursor: grabbing;
  }

  /* only the top card shows its words; the ones behind are just their edges */
  .desk-list.stack .desk-row > * {
    transition: opacity .35s ease;
  }

  .desk-list.stack .desk-row:not(.is-top) > * {
    opacity: 0;
  }

  .tax-cta {
    margin-top: 1rem;
  }

}

@media (min-width: 601px) and (max-width: 860px) {
  .desk-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
  }

  .desk-row:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-list.stack .desk-row {
    transition: none !important;
  }
}

/* a card dragged toward the screen edge shouldn't make the whole page slide sideways */
@media (max-width: 600px) {
  main {
    overflow-x: clip;
  }
}

/* a link inside a sentence: underlined, with a small arrow that says it opens another site */
.inline-link {
  color: var(--fg);
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: 1px;
  transition: color .25s ease;
}

.inline-link:hover {
  color: var(--accent-text);
}

.contact-more {
  margin: 1rem 0 0;
}

/* Work page: a row of builds you can swipe or scroll sideways, the rest named in a sentence */
.build-deck {
  display: flex;
  gap: 1rem;
  margin: clamp(2rem, 5vw, 3rem) calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter) .6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.build-deck::-webkit-scrollbar {
  display: none;
}

.feature {
  flex: 0 0 min(520px, 84%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--card-bg);
}

.feature-photo {
  display: block;
  overflow: hidden;
}

.feature-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

.feature-photo:hover img {
  transform: scale(1.04);
}

.feature-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.3rem 1.4rem 1.5rem;
}

.feature-text p {
  margin: 0 0 1rem;
  color: var(--fg-dim);
  font-size: .98rem;
  line-height: 1.55;
}

.feature-text p:last-child {
  margin: auto 0 0;
}

.feature-text h3 {
  margin-bottom: .6rem;
  font-size: 1.5rem;
}

.also {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  max-width: 62ch;
  color: var(--fg-dim);
  line-height: 1.8;
}

.also a:not(.text-link) {
  color: var(--fg);
  background: linear-gradient(color-mix(in srgb, currentColor 45%, transparent), color-mix(in srgb, currentColor 45%, transparent)) 0 100% / 100% 1px no-repeat;
  transition: background-size .3s var(--ease), color .25s ease;
}

.also a:not(.text-link):hover {
  color: var(--accent-text);
}

/* the Electronics section on the Work page is for phones and portrait tablets; wider screens have the Electronics page in the top menu */
@media (min-width: 861px) {
  #electronics {
    display: none;
  }
}

/* Social + Contact merged on phones: the Social page also holds the message form */
.social-form {
  display: none;
}

@media (max-width: 860px) {
  .social-form {
    display: block;
    margin-top: clamp(2.4rem, 8vw, 3.4rem);
  }

  .social-form h2 {
    margin-bottom: 1.2rem;
  }

  .social-more .desk-only {
    display: none;
  }
}

/* Social on phones: WhatsApp stays the lead card, the rest sit together as one grouped list */
@media (max-width: 600px) {
  .sx-grid {
    display: block;
  }

  .sx-wa {
    min-height: 0;
    margin-bottom: 1.1rem;
  }

  .sx-wa .sx-mark {
    opacity: .07;
  }

  .sx-wa .sx-arrow {
    display: none;
  }

  .sx-li,
  .sx-ig,
  .sx-x,
  .sx-em {
    display: grid;
    grid-template-columns: 46px 1fr 14px;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    align-items: center;
    min-height: 0;
    padding: .95rem 1.1rem;
    border-radius: 0;
    border-top-width: 0;
    background: var(--card-bg);
    transform: none;
    box-shadow: none;
  }

  .sx-li {
    border-top-width: 1px;
    border-radius: 24px 24px 0 0;
  }

  .sx-em {
    border-radius: 0 0 24px 24px;
  }

  .sx-li:hover,
  .sx-ig:hover,
  .sx-x:hover,
  .sx-em:hover {
    transform: none;
    box-shadow: none;
  }

  .sx-li .sx-mark,
  .sx-ig .sx-mark,
  .sx-x .sx-mark,
  .sx-em .sx-mark,
  .sx-li .sx-arrow,
  .sx-ig .sx-arrow,
  .sx-x .sx-arrow,
  .sx-em .sx-arrow,
  .sx-li .sx-note,
  .sx-ig .sx-note,
  .sx-x .sx-note,
  .sx-em .sx-note {
    display: none;
  }

  .sx-li .sx-chip,
  .sx-ig .sx-chip,
  .sx-x .sx-chip,
  .sx-em .sx-chip {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 14px;
  }

  .sx-li .sx-chip svg,
  .sx-ig .sx-chip svg,
  .sx-x .sx-chip svg,
  .sx-em .sx-chip svg {
    width: 22px;
    height: 22px;
  }

  .sx-li .sx-name,
  .sx-ig .sx-name,
  .sx-x .sx-name,
  .sx-em .sx-name {
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: -.01em;
  }

  
  .sx-li::after,
  .sx-ig::after,
  .sx-x::after,
  .sx-em::after {
    content: "";
    grid-column: 3;
    grid-row: 1 / 3;
    width: 8px;
    height: 8px;
    border-top: 1.6px solid var(--fg-faint);
    border-right: 1.6px solid var(--fg-faint);
    transform: rotate(45deg);
  }
}

/* The subject dropdown, drawn to match the site instead of the browser's own menu */
.dd {
  position: relative;
}

.dd-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.dd-btn {
  width: 100%;
  padding: .55rem 1.8rem .55rem 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948a76' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 18px;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  color: var(--fg);
  font: inherit;
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .25s var(--ease);
}

.dd-btn:focus-visible,
.dd.open .dd-btn {
  outline: none;
  border-bottom-color: var(--accent-text);
}

.dd-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + .5rem);
  margin: 0;
  padding: .4rem;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity .2s ease, transform .3s var(--ease), visibility 0s .3s;
}

.dd.open .dd-list {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.dd-list li {
  padding: .7rem .9rem;
  border-radius: 12px;
  color: var(--fg-dim);
  font-size: 1rem;
  line-height: 1.3;
  cursor: pointer;
}

.dd-list li.on,
.dd-list li:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
}

.dd-list li[aria-selected="true"] {
  color: var(--fg);
  font-weight: 500;
}

.dd-list li[aria-selected="true"]::after {
  content: "";
  float: right;
  width: 6px;
  height: 11px;
  margin: .1rem .2rem 0 0;
  border: solid var(--accent-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Social cards: just the name, no handles or numbers */