/* Suri Matondkar — site styles
   Autumn palette pulled from the portrait: fox orange, mustard flowers,
   moss stems, berry hair, on warm oat paper with aubergine ink. */

:root {
  --bg: #f8e7cf;          /* warm oat paper */
  --ink: #3a1430;         /* aubergine ink */
  --ink-soft: #6a3a4e;
  --pumpkin: #e2621d;     /* the fox */
  --mustard: #e8a61c;     /* the little yellow flowers */
  --rust: #b3361c;
  --berry: #9e1d57;       /* the hair */
  --moss: #5b7a2c;        /* the stems */
  --chestnut: #7a3e1d;
  --cream: #fff4e2;

  --font-display: "Fraunces", Georgia, serif;
  --font-label: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Newsreader", Georgia, serif;

  --wrap: 1100px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

::selection { background: var(--mustard); color: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  /* golden-hour light + faint scattered leaves */
  background-image:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(232, 166, 28, .30), transparent 70%),
    radial-gradient(ellipse 55% 45% at 100% 30%, rgba(226, 98, 29, .16), transparent 70%),
    radial-gradient(ellipse 80% 50% at 30% 100%, rgba(158, 29, 87, .10), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg opacity='.16'%3E%3Cpath transform='translate(30 40) rotate(-25 12 12)' fill='%23e2621d' d='M12 1l1.6 4.6 3.2-1.6-.8 4.6 4.4-1-2 3.8 4.2 1.6-4.6 1.8.8 2.8-4.4-1.2-1.6 1V23h-1.6v-5.6l-1.6-1-4.4 1.2.8-2.8-4.6-1.8 4.2-1.6-2-3.8 4.4 1-.8-4.6 3.2 1.6z'/%3E%3Cpath transform='translate(250 80) rotate(35 12 12) scale(1.2)' fill='%23b3361c' d='M3 21C3 9 9 3 21 3c0 12-6 18-18 18z'/%3E%3Cpath transform='translate(150 210) rotate(15 12 12)' fill='%23e8a61c' d='M12 1l1.6 4.6 3.2-1.6-.8 4.6 4.4-1-2 3.8 4.2 1.6-4.6 1.8.8 2.8-4.4-1.2-1.6 1V23h-1.6v-5.6l-1.6-1-4.4 1.2.8-2.8-4.6-1.8 4.2-1.6-2-3.8 4.4 1-.8-4.6 3.2 1.6z'/%3E%3Cpath transform='translate(60 280) rotate(-60 12 12)' fill='%235b7a2c' d='M3 21C3 9 9 3 21 3c0 12-6 18-18 18z'/%3E%3Cpath transform='translate(300 290) rotate(80 12 12)' fill='%239e1d57' d='M3 21C3 9 9 3 21 3c0 12-6 18-18 18z'/%3E%3Ccircle cx='200' cy='60' r='4' fill='%23b3361c'/%3E%3Ccircle cx='110' cy='150' r='3' fill='%23e8a61c'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 100% 100%, 360px 360px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.6;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--cream); padding: .5rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; }

/* ---------- Header ---------- */

.site-header {
  position: relative;
  padding: 2rem 0 1rem;
}

.header-top {
  display: flex;
  justify-content: flex-end;
}

.social a {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ink);
  transition: transform .2s ease, color .2s ease;
}
.social a:hover, .social a:focus-visible { color: var(--pumpkin); transform: rotate(-10deg) scale(1.1); }
.social svg { width: 28px; height: 28px; }

/* ---------- Logo ---------- */

.logo {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2.5rem .25rem;
  text-decoration: none;
  text-align: center;
}

.logo-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-size: clamp(2.8rem, 11vw, 7.4rem);
  line-height: .98;
  letter-spacing: .03em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-word { display: inline-flex; white-space: nowrap; }

.logo-name .l {
  display: inline-block;
  transform: rotate(var(--r, 0deg));
  text-shadow: .045em .045em 0 var(--c, var(--pumpkin));
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.logo:hover .l { transform: translateY(-.03em) rotate(calc(var(--r, 0deg) * -1)); }

/* per-letter colour + the faintest tilt; the baseline stays level */
.l:nth-child(5n+1) { --c: var(--pumpkin); --r: -.8deg; }
.l:nth-child(5n+2) { --c: var(--mustard); --r: .6deg; }
.l:nth-child(5n+3) { --c: var(--moss);    --r: -.5deg; }
.l:nth-child(5n+4) { --c: var(--berry);   --r: .8deg; }
.l:nth-child(5n+5) { --c: var(--rust);    --r: -.6deg; }


.logo-tag {
  display: inline-block;
  margin-top: 1rem;
  padding: .2rem .9rem;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: clamp(.8rem, 2.4vw, 1rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
  border-radius: 999px;
  transform: rotate(-2deg);
}

/* doodles around the name */
.doodle {
  position: absolute;
  pointer-events: none;
}
.doodle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.d-a    { width: 44px; top: 4%;  left: 2%;  color: var(--pumpkin); animation: sway 4.2s ease-in-out infinite; }
.d-b    { width: 26px; top: 40%; left: -1%; color: var(--moss);    animation: sway 3.4s ease-in-out infinite .6s; }
.d-c    { width: 30px; top: 10%; left: 22%; color: var(--mustard); animation: sway 4.6s ease-in-out infinite .3s; }
.d-fox  { width: 60px; top: 0; left: 1%; animation: none; transform: rotate(-10deg); }
.d-pen  { width: 170px; top: 0; right: 4%; }
.d-book { width: 84px; bottom: 10%; left: -9%; transform: rotate(-8deg); }

@keyframes sway {
  0%, 100% { transform: rotate(-10deg) translateY(0); }
  50% { transform: rotate(10deg) translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* compact logo on inner pages */
.site-header.compact { padding-bottom: 0; }
.site-header.compact .logo { padding: .5rem 1.5rem 1rem; }
.site-header.compact .logo-name { font-size: clamp(2.2rem, 7vw, 4.2rem); flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: .3em; }
.site-header.compact .d-pen { width: 110px; top: -30%; right: -12%; }
.site-header.compact .d-a,
.site-header.compact .d-b,
.site-header.compact .d-c,
.site-header.compact .d-book { display: none; }

/* ---------- Home intro ---------- */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 400px);
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  margin: 1.25rem auto 3.5rem;
}

.portrait {
  position: relative;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 400px;
  padding: 14px 14px 0;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 10px 10px 0 var(--mustard), 10px 10px 0 3px var(--ink);
  transform: rotate(-2.5deg);
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1);
}
.portrait:hover { transform: rotate(0deg) scale(1.01); }
.portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 2px;
}
.portrait figcaption {
  padding: .55rem 0 .8rem;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--ink);
  transform: rotate(-1deg);
}
/* washi tape holding the photo up */
.tape {
  position: absolute;
  top: -16px;
  width: 96px; height: 30px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 244, 226, .55) 0 6px, transparent 6px 12px),
    var(--tape, var(--pumpkin));
  opacity: .92;
  border: 1.5px solid rgba(58, 20, 48, .25);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 24% 8%, 100% 8%, 100% 92%, 94% 100%, 88% 90%, 82% 100%, 76% 92%, 0 92%);
}
.tape-l { left: -34px; --tape: var(--mustard); transform: rotate(-38deg); }
.tape-r { right: -34px; --tape: var(--berry); transform: rotate(38deg); }
.portrait .leaf-pin {
  position: absolute;
  right: -26px; bottom: 54px;
  width: 58px;
  color: var(--pumpkin);
  transform: rotate(24deg);
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.portrait .leaf-pin svg { display: block; width: 100%; }

/* ---------- Horizontal bars ---------- */

.bars {
  list-style: none;
  margin: 0 auto 4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.bars li { width: 88%; }
.bars li:nth-child(odd)  { align-self: flex-start; }
.bars li:nth-child(even) { align-self: flex-end; }

.bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(120px, 18vw, 190px);
  padding: 1.5rem;
  text-decoration: none;
  overflow: hidden;
  background-color: var(--bar-bg);
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), filter .3s ease;
}
.bar::after {
  /* pattern layer drifts like leaves on the wind when hovered */
  content: "";
  position: absolute; inset: -80px;
  background: var(--pattern);
  background-size: var(--pattern-size, auto);
  transition: transform 1.2s ease;
}
.bar:hover::after, .bar:focus-visible::after { transform: translate(50px, 30px); }
.bar:hover, .bar:focus-visible { transform: scale(1.015) rotate(-.4deg); filter: saturate(1.1); }
.bars li:nth-child(even) .bar:hover,
.bars li:nth-child(even) .bar:focus-visible { transform: scale(1.015) rotate(.4deg); }
.bar:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }

.bar-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .35em .8em .4em;
  font-family: var(--font-label);
  font-weight: 800;
  font-size: clamp(1.6rem, 5.5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(var(--tilt, -2deg));
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s ease;
}
.bar:hover .bar-label, .bar:focus-visible .bar-label {
  transform: rotate(0deg) translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--ink);
}
.bar-num {
  font-size: .42em;
  font-weight: 700;
  padding: .3em .5em;
  border-radius: 999px;
  background: var(--num-bg, var(--ink));
  color: var(--cream);
}
.bar-arrow {
  font-size: .7em;
  transition: transform .3s ease;
}
.bar:hover .bar-arrow, .bar:focus-visible .bar-arrow { transform: translateX(6px); }

/* 01 About — open books and quotation marks */
.bar-about {
  --bar-bg: var(--pumpkin);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='104' viewBox='0 0 220 104'%3E%3Cg transform='translate(14 14) rotate(-10) scale(2.3)' stroke='%233a1430' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath fill='%23fff4e2' d='M12 3C9 1 5 1 1 2v11c4-1 8-1 11 1z'/%3E%3Cpath fill='%23fff4e2' d='M12 3c3-2 7-2 11-1v11c-4-1-8-1-11 1z'/%3E%3Cpath fill='none' stroke-opacity='.45' stroke-width='.9' d='M4 5c2-.5 4-.4 6 .3M4 8c2-.5 4-.4 6 .3M14 5.3c2-.7 4-.8 6-.3M14 8.3c2-.7 4-.8 6-.3'/%3E%3C/g%3E%3Cg transform='translate(140 58) scale(1.5)' fill='%23f3b73a'%3E%3Cpath d='M6 14c-3 0-5-2-5-5 0-4 3-7 7-8l1 2c-2 1-4 3-4 5 3 0 5 1 5 3s-2 3-4 3z'/%3E%3Cpath d='M17 14c-3 0-5-2-5-5 0-4 3-7 7-8l1 2c-2 1-4 3-4 5 3 0 5 1 5 3s-2 3-4 3z'/%3E%3C/g%3E%3Ccircle cx='170' cy='20' r='3.5' fill='%23fff4e2'/%3E%3Ccircle cx='60' cy='86' r='2.5' fill='%23f3b73a'/%3E%3C/svg%3E");
  --pattern-size: 220px 104px;
  --num-bg: var(--pumpkin);
  --tilt: -2deg;
}

/* 02 Awards — little stacks of books with ribbon bookmarks */
.bar-awards {
  --bar-bg: var(--mustard);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='110' viewBox='0 0 220 110'%3E%3Cg transform='translate(14 6) rotate(-6) scale(1.7)' stroke='%233a1430' stroke-width='1.5'%3E%3Crect x='2' y='18' width='26' height='6' rx='1.5' fill='%23b3361c'/%3E%3Crect x='5' y='12' width='22' height='6' rx='1.5' fill='%235b7a2c'/%3E%3Crect x='3' y='6' width='24' height='6' rx='1.5' fill='%239e1d57'/%3E%3Cpath d='M8 18v6M22 12v6M9 6v6' stroke='%23fff4e2' stroke-width='1.5'/%3E%3Cpath d='M20 6v-5l2 1.6 2-1.6v5' fill='%23fff4e2' stroke-width='1.1'/%3E%3C/g%3E%3Cg transform='translate(126 52) rotate(8) scale(1.45)' stroke='%233a1430' stroke-width='1.5'%3E%3Crect x='2' y='18' width='26' height='6' rx='1.5' fill='%23b3361c'/%3E%3Crect x='5' y='12' width='22' height='6' rx='1.5' fill='%235b7a2c'/%3E%3Crect x='3' y='6' width='24' height='6' rx='1.5' fill='%239e1d57'/%3E%3Cpath d='M8 18v6M22 12v6M9 6v6' stroke='%23fff4e2' stroke-width='1.5'/%3E%3Cpath d='M20 6v-5l2 1.6 2-1.6v5' fill='%23fff4e2' stroke-width='1.1'/%3E%3C/g%3E%3Cpath transform='translate(146 10) scale(1.2)' fill='%23fff4e2' d='M8 0c.5 4 3.5 7.5 8 8-4.5.5-7.5 4-8 8-.5-4-3.5-7.5-8-8 4.5-.5 7.5-4 8-8z'/%3E%3Cpath transform='translate(40 74) scale(0.9)' fill='%23fff4e2' d='M8 0c.5 4 3.5 7.5 8 8-4.5.5-7.5 4-8 8-.5-4-3.5-7.5-8-8 4.5-.5 7.5-4 8-8z'/%3E%3Ccircle cx='100' cy='40' r='3' fill='%239e1d57'/%3E%3C/svg%3E");
  --pattern-size: 220px 110px;
  --num-bg: var(--chestnut);
  --tilt: 2deg;
}

/* 03 Work — a full bookshelf */
.bar-work {
  --bar-bg: var(--moss);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='96' viewBox='0 0 260 96'%3E%3Crect x='1' y='30' width='20' height='58' rx='2' fill='%23b3361c' stroke='%233a1430' stroke-width='2'/%3E%3Cpath d='M4 38h14M4 80h14' stroke='%23fff4e2' stroke-width='2' opacity='.8'/%3E%3Crect x='25' y='44' width='14' height='44' rx='2' fill='%23e8a61c' stroke='%233a1430' stroke-width='2'/%3E%3Cpath d='M28 52h8M28 80h8' stroke='%23fff4e2' stroke-width='2' opacity='.8'/%3E%3Crect x='43' y='24' width='24' height='64' rx='2' fill='%23fff4e2' stroke='%233a1430' stroke-width='2'/%3E%3Cpath d='M46 32h18M46 80h18' stroke='%233a1430' stroke-width='2' opacity='.8'/%3E%3Crect x='71' y='38' width='16' height='50' rx='2' fill='%239e1d57' stroke='%233a1430' stroke-width='2'/%3E%3Cpath d='M74 46h10M74 80h10' stroke='%23fff4e2' stroke-width='2' opacity='.8'/%3E%3Crect x='91' y='28' width='20' height='60' rx='2' fill='%237a3e1d' stroke='%233a1430' stroke-width='2'/%3E%3Cpath d='M94 36h14M94 80h14' stroke='%23fff4e2' stroke-width='2' opacity='.8'/%3E%3Crect x='115' y='48' width='12' height='40' rx='2' fill='%23e2621d' stroke='%233a1430' stroke-width='2'/%3E%3Cpath d='M118 56h6M118 80h6' stroke='%23fff4e2' stroke-width='2' opacity='.8'/%3E%3Crect x='131' y='32' width='22' height='56' rx='2' fill='%23435c1f' stroke='%233a1430' stroke-width='2'/%3E%3Cpath d='M134 40h16M134 80h16' stroke='%23fff4e2' stroke-width='2' opacity='.8'/%3E%3Crect x='157' y='26' width='16' height='62' rx='2' fill='%23fff4e2' stroke='%233a1430' stroke-width='2'/%3E%3Cpath d='M160 34h10M160 80h10' stroke='%233a1430' stroke-width='2' opacity='.8'/%3E%3Crect x='177' y='40' width='20' height='48' rx='2' fill='%23b3361c' stroke='%233a1430' stroke-width='2'/%3E%3Cpath d='M180 48h14M180 80h14' stroke='%23fff4e2' stroke-width='2' opacity='.8'/%3E%3Crect x='201' y='30' width='14' height='58' rx='2' fill='%23e8a61c' stroke='%233a1430' stroke-width='2'/%3E%3Cpath d='M204 38h8M204 80h8' stroke='%23fff4e2' stroke-width='2' opacity='.8'/%3E%3Crect x='219' y='36' width='18' height='52' rx='2' fill='%239e1d57' stroke='%233a1430' stroke-width='2'/%3E%3Cpath d='M222 44h12M222 80h12' stroke='%23fff4e2' stroke-width='2' opacity='.8'/%3E%3Crect x='238' y='40' width='16' height='48' rx='2' fill='%23e2621d' stroke='%233a1430' stroke-width='2' transform='rotate(14 238 88)'/%3E%3Crect x='0' y='88' width='260' height='8' fill='%233a1430'/%3E%3C/svg%3E");
  --pattern-size: 260px 96px;
  --num-bg: var(--moss);
  --tilt: -1.5deg;
}

/* 04 Contact — fountain-pen nibs and ink drops */
.bar-contact {
  --bar-bg: var(--berry);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='110' viewBox='0 0 210 110'%3E%3Cg transform='translate(14 4) rotate(-24 12 14) scale(1.6)' stroke='%233a1430' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath fill='%23e8a61c' d='M12 2 20 10 12 26 4 10z'/%3E%3Cpath d='M12 14v12' stroke-width='1.2'/%3E%3Ccircle cx='12' cy='13' r='2' fill='%233a1430' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(124 50) rotate(22 12 14) scale(1.35)' stroke='%233a1430' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath fill='%23e8a61c' d='M12 2 20 10 12 26 4 10z'/%3E%3Cpath d='M12 14v12' stroke-width='1.2'/%3E%3Ccircle cx='12' cy='13' r='2' fill='%233a1430' stroke='none'/%3E%3C/g%3E%3Cpath transform='translate(128 8) scale(1.3)' fill='%23fff4e2' d='M8 0C8 0 2 7 2 11a6 6 0 0 0 12 0C14 7 8 0 8 0z'/%3E%3Cpath transform='translate(44 74) scale(1)' fill='%23f3b73a' d='M8 0C8 0 2 7 2 11a6 6 0 0 0 12 0C14 7 8 0 8 0z'/%3E%3Ccircle cx='96' cy='52' r='3' fill='%23fff4e2'/%3E%3C/svg%3E");
  --pattern-size: 210px 110px;
  --num-bg: var(--berry);
  --tilt: 1.5deg;
}

/* ---------- Inner pages ---------- */

.page {
  max-width: 820px;
  margin: 1.5rem auto 3rem;
}

.page-title {
  display: inline-block;
  margin: 0 0 2rem;
  padding: .2em .6em .25em;
  font-family: var(--font-label);
  font-weight: 800;
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
  background: var(--accent, var(--pumpkin));
  color: var(--accent-text, var(--cream));
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(-1.5deg);
}

.page h2 {
  margin: 2.5rem 0 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.1;
}
.page h2::after {
  content: "";
  display: block;
  width: 80px; height: 8px;
  margin-top: .4rem;
  border-radius: 8px;
  background: var(--accent, var(--pumpkin));
}

.card {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--accent, var(--pumpkin));
  padding: clamp(1.25rem, 4vw, 2rem);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list li {
  position: relative;
  padding: .7rem 0 .7rem 2rem;
  border-bottom: 2px dashed rgba(58, 20, 48, .18);
}
.list li:last-child { border-bottom: 0; }
.list li::before {
  /* small leaf bullet */
  content: "";
  position: absolute; left: 0; top: 1.05rem;
  width: 16px; height: 16px;
  background: var(--accent, var(--pumpkin));
  border-radius: 0 100% 0 100%;
  transform: rotate(-10deg);
}
.list .year {
  display: inline-block;
  margin-right: .4rem;
  padding: 0 .45rem;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .85rem;
  border-radius: 6px;
  background: var(--ink);
  color: var(--cream);
  vertical-align: .15em;
}

.page p { margin: 0 0 1.1rem; }

.note {
  font-family: var(--font-label);
  font-size: .95rem;
  padding: .8rem 1rem;
  border: 2px dashed var(--ink);
  border-radius: 12px;
  background: rgba(255, 255, 255, .45);
}

.big-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: .25rem 0 1.25rem;
  padding: .6rem 1.2rem;
  font-family: var(--font-label);
  font-weight: 800;
  font-size: clamp(1.05rem, 3.5vw, 1.4rem);
  text-decoration: none;
  color: var(--ink);
  background: var(--mustard);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--ink);
  overflow-wrap: anywhere;
  transition: transform .2s ease, box-shadow .2s ease;
}
.big-link:hover, .big-link:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.big-link.alt { background: var(--moss); color: var(--cream); }

/* mini navigation at the bottom of inner pages */
.mini-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin: 3rem 0 1rem;
  padding: 0;
  list-style: none;
}
.mini-nav a {
  display: inline-block;
  padding: .45rem 1rem;
  font-family: var(--font-label);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .95rem;
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 999px;
  transition: transform .2s ease;
}
.mini-nav a:hover, .mini-nav a:focus-visible { transform: rotate(-3deg) scale(1.05); }
.mini-nav .n-home { background: var(--cream); color: var(--ink); }
.mini-nav .n-about { background: var(--pumpkin); }
.mini-nav .n-awards { background: var(--mustard); color: var(--ink); }
.mini-nav .n-work { background: var(--moss); }
.mini-nav .n-contact { background: var(--berry); }
.mini-nav a[aria-current="page"] { background: var(--ink); color: var(--cream); }

/* ---------- Footer ---------- */

.site-footer {
  padding: 2rem 0 3rem;
  text-align: center;
  font-family: var(--font-label);
  font-size: .9rem;
  color: var(--ink-soft);
}

/* ---------- Small screens ---------- */

@media (max-width: 720px) {
  body { font-size: 1.1rem; }
  .intro { grid-template-columns: 1fr; text-align: center; }
  .intro-text p { margin-left: auto; margin-right: auto; }
  .portrait { max-width: 290px; padding: 10px 10px 0; }
  .portrait figcaption { font-size: 1.25rem; }
  .tape { width: 72px; height: 24px; }
  .tape-l { left: -26px; }
  .tape-r { right: -26px; }
  .bars li { width: 100%; }
  .bar-label { box-shadow: 5px 5px 0 var(--ink); border-width: 3px; }
  .logo { padding: 1.25rem .5rem .25rem; }
  .logo-name { font-size: 13.5vw; letter-spacing: 0; }
  .d-a { width: 30px; top: 2%; left: 4%; }
  .d-fox { width: 42px; top: 0; left: 2%; }
  .d-pen { width: 96px; top: 10%; right: -1%; }
  .d-b, .d-c, .d-book { display: none; }
  .site-header.compact .d-pen { display: none; }
}

/* links inside award / publication lists */
.list a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent, var(--pumpkin));
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
  transition: background-color .2s ease, text-decoration-color .2s ease;
}
.list a:hover, .list a:focus-visible {
  background: var(--accent, var(--pumpkin));
  color: var(--accent-text, var(--cream));
  text-decoration-color: transparent;
  border-radius: 3px;
  outline: none;
}