@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
   --ink: #14221c;
   --muted: #627068;
   --paper: #f5f4ef;
   --green: #124c38;
   --green2: #0c3b2b;
   --lime: #dbe9c5;
   --line: #d8ddd8;
   --white: #fff;
   --nav: #455449
}

* {
   box-sizing: border-box
}

/* The UA's [hidden] rule loses to any author `display`, including inline styles.
   Content toggled by site-data.js relies on this holding. */
[hidden] {
   display: none !important
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   background: var(--paper);
   color: var(--ink);
   font-family: "DM Sans", Arial, sans-serif;
   line-height: 1.65
}

a {
   color: inherit
}

header.nav {
   height: 72px;
   display: flex;
   align-items: center;
   gap: 30px;
   justify-content: space-between;
   padding: 0 6vw;
   border-bottom: 1px solid var(--line);
   position: sticky;
   top: 0;
   background: #f5f4eff2;
   backdrop-filter: blur(12px);
   z-index: 20
}

.logo {
   font-weight: 700;
   font-size: 22px;
   text-decoration: none
}

.logo span {
   color: #6c9a55
}

/* ── Nav links ── */
.nav nav {
   display: flex;
   gap: 32px
}

.nav nav a {
   position: relative;
   text-decoration: none;
   color: var(--nav);
   font-size: 14.5px;
   font-weight: 500;
   letter-spacing: .005em;
   padding: 7px 1px;
   transition: color .22s ease
}

/* Underline grows from the left on hover, retracts to the right on leave. */
.nav nav a::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 2px;
   height: 1.5px;
   border-radius: 1px;
   background: var(--green);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform .3s cubic-bezier(.4, 0, .2, 1)
}

.nav nav a:hover {
   color: var(--green)
}

.nav nav a:hover::after {
   transform: scaleX(1);
   transform-origin: left
}

.nav nav a:focus-visible,
.cv:focus-visible,
.logo:focus-visible {
   outline: 2px solid var(--green);
   outline-offset: 4px;
   border-radius: 3px
}

.cv {
   border: 1px solid var(--green);
   border-radius: 30px;
   padding: 8px 17px;
   text-decoration: none;
   color: var(--green);
   font-size: 13.5px;
   font-weight: 500;
   white-space: nowrap;
   transition: background .22s ease, color .22s ease, box-shadow .22s ease
}

.cv:hover {
   background: var(--green);
   color: #fff;
   box-shadow: 0 2px 12px rgba(18, 76, 56, .18)
}


/* ── Botanical Backgrounds ── */
.hero {
   min-height: calc(100vh - 72px);
   max-width: 1240px;
   margin: auto;
   padding: 110px 6vw;
   display: grid;
   grid-template-columns: 1.5fr .7fr;
   gap: 70px;
   align-items: center;
   position: relative
}

.hero::before {
   content: "";
   position: absolute;
   top: 30px;
   right: 20px;
   width: 480px;
   height: 520px;
   opacity: .11;
   pointer-events: none;
   z-index: 0;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' fill='none' stroke='%23124c38' stroke-width='1.5'%3E%3Cpath d='M200 480 C200 480 200 100 200 40'/%3E%3Cpath d='M200 120 C160 100 100 130 80 180 C65 215 90 240 120 230 C150 220 170 180 200 120'/%3E%3Cpath d='M200 120 C240 100 300 130 320 180 C335 215 310 240 280 230 C250 220 230 180 200 120'/%3E%3Cpath d='M200 200 C170 185 120 200 100 245 C85 275 105 300 130 290 C155 280 175 245 200 200'/%3E%3Cpath d='M200 200 C230 185 280 200 300 245 C315 275 295 300 270 290 C245 280 225 245 200 200'/%3E%3Cpath d='M200 290 C175 275 135 285 118 320 C105 345 120 365 142 358 C162 350 180 325 200 290'/%3E%3Cpath d='M200 290 C225 275 265 285 282 320 C295 345 280 365 258 358 C238 350 220 325 200 290'/%3E%3Cpath d='M200 370 C182 358 155 365 142 390 C132 408 142 420 158 416 C172 410 185 395 200 370'/%3E%3Cpath d='M200 370 C218 358 245 365 258 390 C268 408 258 420 242 416 C228 410 215 395 200 370'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: contain
}

.hero::after {
   content: "";
   position: absolute;
   bottom: 60px;
   left: 20px;
   width: 250px;
   height: 300px;
   opacity: .05;
   pointer-events: none;
   z-index: 0;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 350' fill='none' stroke='%23124c38' stroke-width='1.2'%3E%3Cpath d='M150 330 C150 330 150 80 150 30'/%3E%3Cpath d='M150 80 C120 65 80 80 65 115 C52 142 72 160 95 152 C118 144 135 115 150 80'/%3E%3Cpath d='M150 80 C180 65 220 80 235 115 C248 142 228 160 205 152 C182 144 165 115 150 80'/%3E%3Cpath d='M150 160 C128 148 98 158 85 185 C75 205 88 218 105 212 C122 206 138 188 150 160'/%3E%3Cpath d='M150 160 C172 148 202 158 215 185 C225 205 212 218 195 212 C178 206 162 188 150 160'/%3E%3Cpath d='M150 240 C135 230 115 235 105 255 C98 270 108 278 120 274 C130 270 140 258 150 240'/%3E%3Cpath d='M150 240 C165 230 185 235 195 255 C202 270 192 278 180 274 C170 270 160 258 150 240'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: contain
}

.hero .hero-copy,
.hero .hero-card {
   position: relative;
   z-index: 1
}

/* ── Section leaf accents ── */
#about {
   position: relative;
   overflow: visible
}

#about::after {
   content: "";
   position: absolute;
   top: 40px;
   right: 5vw;
   width: 220px;
   height: 280px;
   opacity: .06;
   pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' fill='none' stroke='%23124c38' stroke-width='1'%3E%3Cpath d='M100 240 Q100 120 100 20'/%3E%3Cpath d='M100 60 Q70 45 45 70 Q30 95 55 105 Q78 100 100 60'/%3E%3Cpath d='M100 60 Q130 45 155 70 Q170 95 145 105 Q122 100 100 60'/%3E%3Cpath d='M100 130 Q78 118 58 135 Q48 152 65 158 Q80 155 100 130'/%3E%3Cpath d='M100 130 Q122 118 142 135 Q152 152 135 158 Q120 155 100 130'/%3E%3Cpath d='M100 185 Q88 178 75 188 Q68 198 78 202 Q88 200 100 185'/%3E%3Cpath d='M100 185 Q112 178 125 188 Q132 198 122 202 Q112 200 100 185'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: contain
}

.section.dark {
   max-width: none;
   background: var(--green);
   color: #fff;
   position: relative
}

.section.dark::before {
   content: "";
   position: absolute;
   top: 20px;
   left: 30px;
   width: 300px;
   height: 350px;
   opacity: .08;
   pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 400' fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M175 380 Q175 100 175 30'/%3E%3Cpath d='M175 90 Q140 72 105 95 Q85 125 115 138 Q142 130 175 90'/%3E%3Cpath d='M175 90 Q210 72 245 95 Q265 125 235 138 Q208 130 175 90'/%3E%3Cpath d='M175 180 Q148 165 120 180 Q105 205 125 215 Q148 208 175 180'/%3E%3Cpath d='M175 180 Q202 165 230 180 Q245 205 225 215 Q202 208 175 180'/%3E%3Cpath d='M175 270 Q158 258 138 268 Q128 282 140 290 Q155 285 175 270'/%3E%3Cpath d='M175 270 Q192 258 212 268 Q222 282 210 290 Q195 285 175 270'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: contain
}

.section.dark::after {
   content: "";
   position: absolute;
   bottom: 20px;
   right: 40px;
   width: 250px;
   height: 280px;
   opacity: .06;
   pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 320' fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Ccircle cx='140' cy='160' r='100'/%3E%3Ccircle cx='140' cy='160' r='70'/%3E%3Ccircle cx='140' cy='160' r='40'/%3E%3Cpath d='M140 60 Q120 30 100 60'/%3E%3Cpath d='M140 60 Q160 30 180 60'/%3E%3Cpath d='M40 160 Q10 140 40 120'/%3E%3Cpath d='M240 160 Q270 140 240 120'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: contain
}

.projects {
   background: #f5f4ef;
   position: relative
}

.projects::before {
   content: "";
   position: absolute;
   bottom: 40px;
   left: 50%;
   transform: translateX(-50%);
   width: 600px;
   height: 180px;
   opacity: .05;
   pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 200' fill='none' stroke='%23124c38' stroke-width='.8'%3E%3Cpath d='M0 100 Q50 60 100 100 Q150 140 200 100 Q250 60 300 100 Q350 140 400 100 Q450 60 500 100 Q550 140 600 100 Q650 60 700 100'/%3E%3Cpath d='M100 100 Q100 70 80 55 Q65 75 100 100'/%3E%3Cpath d='M100 100 Q100 70 120 55 Q135 75 100 100'/%3E%3Cpath d='M300 100 Q300 70 280 55 Q265 75 300 100'/%3E%3Cpath d='M300 100 Q300 70 320 55 Q335 75 300 100'/%3E%3Cpath d='M500 100 Q500 70 480 55 Q465 75 500 100'/%3E%3Cpath d='M500 100 Q500 70 520 55 Q535 75 500 100'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: contain
}

.contact {
   padding-bottom: 130px;
   position: relative
}

.contact::before {
   content: "";
   position: absolute;
   bottom: 40px;
   right: 5vw;
   width: 200px;
   height: 260px;
   opacity: .06;
   pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280' fill='none' stroke='%23124c38' stroke-width='1'%3E%3Cpath d='M110 270 Q110 80 110 20'/%3E%3Cpath d='M110 50 Q85 38 60 55 Q48 78 68 88 Q88 82 110 50'/%3E%3Cpath d='M110 50 Q135 38 160 55 Q172 78 152 88 Q132 82 110 50'/%3E%3Cpath d='M110 120 Q90 110 72 122 Q62 138 78 145 Q92 140 110 120'/%3E%3Cpath d='M110 120 Q130 110 148 122 Q158 138 142 145 Q128 140 110 120'/%3E%3Cpath d='M110 180 Q98 172 85 180 Q78 192 88 196 Q98 192 110 180'/%3E%3Cpath d='M110 180 Q122 172 135 180 Q142 192 132 196 Q122 192 110 180'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: contain
}

.lime {
   max-width: none;
   background: var(--lime);
   position: relative
}

.lime::after {
   content: "";
   position: absolute;
   top: 30px;
   right: 5vw;
   width: 230px;
   height: 280px;
   opacity: .08;
   pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 300' fill='none' stroke='%23124c38' stroke-width='.9'%3E%3Cpath d='M125 280 Q125 80 125 20'/%3E%3Cpath d='M125 55 Q98 40 72 60 Q58 85 80 95 Q102 88 125 55'/%3E%3Cpath d='M125 55 Q152 40 178 60 Q192 85 170 95 Q148 88 125 55'/%3E%3Cpath d='M125 130 Q105 118 85 130 Q75 148 90 155 Q108 148 125 130'/%3E%3Cpath d='M125 130 Q145 118 165 130 Q175 148 160 155 Q142 148 125 130'/%3E%3Cpath d='M125 200 Q112 192 100 200 Q95 212 105 215 Q115 212 125 200'/%3E%3Cpath d='M125 200 Q138 192 150 200 Q155 212 145 215 Q135 212 125 200'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: contain
}

.kicker,
.label,
.hero-card span {
   font-size: 11px;
   letter-spacing: .16em;
   font-weight: 700;
   color: var(--green)
}

.hero h1 {
   font: 700 clamp(70px, 10vw, 145px)/.83 "Playfair Display", serif;
   letter-spacing: -.065em;
   margin: 25px 0
}

.hero h1 em {
   font-weight: 600
}

.position {
   font-size: 20px;
   font-weight: 600
}

.statement {
   max-width: 750px;
   font-size: 20px;
   color: var(--muted)
}

.actions {
   display: flex;
   gap: 22px;
   margin-top: 30px;
   align-items: center
}

.actions a {
   text-decoration: none;
   font-weight: 600
}

.primary {
   background: var(--green);
   color: #fff !important;
   padding: 13px 21px;
   border-radius: 30px
}

.hero-card {
   background: var(--green);
   color: #fff;
   padding: 35px;
   min-height: 390px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   position: relative;
   z-index: 1
}

.hero-card span {
   color: #b8d49d;
   margin-bottom: auto
}

.hero-card strong {
   font: 600 30px/1.05 "Playfair Display", serif
}

.hero-card small {
   margin-top: 30px;
   color: #c8d8d1
}

.section {
   max-width: 1200px;
   margin: auto;
   padding: 105px 6vw;
   scroll-margin-top: 72px
}

.section.dark>.label,
.section.dark>h2,
.research-grid {
   max-width: 1080px;
   margin-left: auto;
   margin-right: auto
}

.dark .label {
   color: #c4dcaa
}

.section>h2 {
   font: 600 clamp(38px, 5vw, 62px)/1.05 "Playfair Display", serif;
   letter-spacing: -.035em;
   max-width: 950px;
   margin: 18px 0 55px
}

.split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px
}

.split h2 {
   font: 600 clamp(35px, 4vw, 55px)/1.1 "Playfair Display", serif;
   margin: 0
}

.split p {
   font-size: 17px;
   color: var(--muted)
}

.metrics {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin-top: 65px;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.metrics div {
   padding: 25px;
   border-right: 1px solid var(--line)
}

.metrics b {
   display: block;
   font-size: 12px;
   color: var(--green);
   letter-spacing: .08em
}

.metrics span {
   display: block;
   margin-top: 7px;
   color: var(--muted);
   font-size: 13px
}

.research-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: #ffffff2b
}

.research-grid article {
   background: var(--green);
   padding: 30px;
   min-height: 220px
}

.research-grid span {
   font-size: 11px;
   color: #b8d49d
}

.research-grid h3 {
   font: 600 25px/1.1 "Playfair Display", serif
}

.research-grid p {
   color: #d2ded8
}

.project {
   display: grid;
   grid-template-columns: 80px 1fr;
   gap: 25px;
   border-top: 1px solid var(--line);
   padding: 32px 0
}

.project-no {
   color: #779075;
   font-weight: 700
}

.project h3 {
   font: 600 32px/1.1 "Playfair Display", serif;
   margin: 0 0 8px
}

.project p {
   color: var(--muted);
   max-width: 760px
}

.project a {
   color: var(--green);
   font-weight: 700;
   text-decoration: none
}

.paper {
   background: #fff
}

.pub {
   display: grid;
   grid-template-columns: 140px 1fr;
   gap: 25px;
   padding: 27px 0;
   border-top: 1px solid var(--line)
}

.pub>span,
.book span {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .14em;
   color: var(--green)
}

.pub h3 {
   font: 600 23px/1.2 "Playfair Display", serif;
   margin: 0
}

.pub p {
   color: var(--muted);
   margin: 7px 0
}

.book {
   max-width: 980px;
   display: flex;
   justify-content: space-between;
   gap: 30px;
   padding: 28px 0;
   border-top: 1px solid #aab89f
}

.book h3 {
   font: 600 33px/1.1 "Playfair Display", serif;
   margin: 7px 0
}

.book p {
   color: #536158
}

.book-tag {
   align-self: center;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1em;
   color: #61735b
}

.links {
   background: #ecebe5
}

.link-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--line)
}

.link-grid a {
   background: var(--paper);
   padding: 20px;
   text-decoration: none;
   font-weight: 600;
   display: flex;
   justify-content: space-between
}

.note {
   font-size: 12px;
   color: var(--muted)
}

.email {
   font: 600 clamp(24px, 4vw, 45px)/1.1 "Playfair Display", serif;
   color: var(--green);
   text-decoration: none
}

.contact p {
   max-width: 800px
}

footer {
   padding: 25px 6vw;
   border-top: 1px solid var(--line);
   display: flex;
   justify-content: space-between;
   color: var(--muted);
   font-size: 12px
}

/* ── Hamburger Menu ── */
.hamburger {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   padding: 6px;
   z-index: 25
}

.hamburger span {
   display: block;
   width: 22px;
   height: 2px;
   background: var(--ink);
   margin: 5px 0;
   transition: transform .3s, opacity .3s
}

.hamburger.active span:nth-child(1) {
   transform: translateY(7px) rotate(45deg)
}

.hamburger.active span:nth-child(2) {
   opacity: 0
}

.hamburger.active span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg)
}

.nav-overlay {
   display: none;
   position: fixed;
   inset: 0;
   top: 72px;
   background: var(--paper);
   z-index: 19;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 30px;
   opacity: 0;
   transition: opacity .3s
}

.nav-overlay.open {
   display: flex;
   opacity: 1
}

.nav-overlay a {
   text-decoration: none;
   font: 600 26px/1 "Playfair Display", serif;
   color: var(--ink);
   padding: 4px 10px;
   transition: color .2s ease
}

.nav-overlay a:hover,
.nav-overlay a:focus-visible {
   color: var(--green)
}

@media(max-width:800px) {
   .hamburger {
      display: block
   }

   .nav nav {
      display: none
   }

   .hero {
      grid-template-columns: 1fr;
      padding-top: 75px
   }

   .hero-card {
      min-height: 280px
   }

   .split,
   .research-grid,
   .metrics,
   .link-grid {
      grid-template-columns: 1fr
   }

   .metrics div {
      border-right: 0;
      border-bottom: 1px solid var(--line)
   }

   .pub {
      grid-template-columns: 1fr;
      gap: 5px
   }

   .book {
      display: block
   }

   .book-tag {
      margin-top: 15px
   }

   .section {
      padding: 75px 6vw
   }

   footer {
      display: block
   }

   footer span {
      display: block;
      margin-top: 5px
   }
}

/* ═══════════════════════════════════════════════════
   IMAGERY

   One figure component (.fig) is reused everywhere so every
   photograph on the site carries the same frame, the same
   caption typography and the same hover. Aspect ratio is passed
   in per instance as --ratio, which keeps the markup declarative
   and stops images from shifting layout while they load.
   ═══════════════════════════════════════════════════ */

.fig {
   margin: 0
}

/* The frame. Fixed ratio, so nothing reflows once the file arrives. */
.fig-media {
   position: relative;
   overflow: hidden;
   aspect-ratio: var(--ratio, 3/2);
   background: #e7e6df;
   /* Hairline instead of a border, so it reads as a printed plate. */
   box-shadow: inset 0 0 0 1px rgba(20, 34, 28, .09)
}

.fig-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* Which part of the frame survives the crop. Set per image, because a
      subject sitting off-centre would otherwise be cropped straight out. */
   object-position: var(--fx, 50%) var(--fy, 50%);
   display: block;
   /* Photographs on this site are documentary, not decorative — a mild
      desaturation at rest keeps them from fighting the green palette,
      and full colour returns on hover. */
   filter: saturate(.88) contrast(1.02);
   transform: scale(var(--crop, 1));
   transform-origin: 50% var(--crop-origin, 50%);
   transition: transform .7s cubic-bezier(.2, .6, .2, 1), filter .5s ease
}

.fig:hover .fig-media img {
   filter: saturate(1) contrast(1.02);
   /* Multiply rather than replace, or hovering a cropped image would
      snap the trimmed strip back into view. */
   transform: scale(calc(var(--crop, 1) * 1.035))
}

/* Some source photos carry a camera/GPS stamp burned into the bottom band.
   Scaling from the top edge pushes that strip past the frame. Enlarging the
   element instead would fail on wide frames, where `cover` then trims the
   sides rather than the bottom and the stamp survives. */
.fig-crop-bottom img {
   --crop: 1.45;
   --crop-origin: 0%
}

/* Focal point. Named rather than numeric so the admin panel can offer a
   short list of choices instead of asking for coordinates. */
.focus-left {
   --fx: 25%
}

.focus-right {
   --fx: 75%
}

.focus-top {
   --fy: 18%
}

.focus-bottom {
   --fy: 82%
}

/* ── Caption typography ── */
.fig figcaption {
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 14px 2px 0;
   border-top: 1px solid var(--line);
   margin-top: 14px
}

.fig-kicker {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--green)
}

.fig-cap {
   font: 400 15px/1.45 "DM Sans", Arial, sans-serif;
   color: var(--ink)
}

.fig-meta {
   font-size: 12px;
   letter-spacing: .02em;
   color: var(--muted)
}

/* ── Hero: the research-focus card becomes a photographic plate ──
   Everything below is conditional on the card actually holding an image.
   With the photograph removed the card falls back to the plain green
   panel it started as, so the hero reads correctly either way. */
.hero-card:has(.hero-card-img) {
   padding: 0;
   overflow: hidden;
   isolation: isolate
}

.hero-card-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: var(--fx, 50%) var(--fy, 50%);
   z-index: -2;
   filter: saturate(.75)
}

/* Deep green scrim: the card's own colour, laid over the photograph so
   the existing white type keeps its contrast at every viewport size.
   The flat wash guarantees the floor; the gradient on top keeps the
   photograph legible near the top of the card. */
.hero-card:has(.hero-card-img)::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background:
      linear-gradient(180deg, rgba(12, 59, 43, .58) 0%, rgba(12, 59, 43, .8) 42%, rgba(12, 59, 43, .96) 100%),
      rgba(12, 59, 43, .34)
}

.hero-card-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-end
}

.hero-card:has(.hero-card-img) .hero-card-body {
   padding: 35px 35px 0
}

/* A credit with no photograph to credit is noise. */
.hero-card-credit {
   display: none
}

.hero-card:has(.hero-card-img) .hero-card-credit {
   display: block;
   margin: 18px 35px 26px;
   padding-top: 14px;
   border-top: 1px solid rgba(255, 255, 255, .22);
   font-size: 11px;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #bcd0c4
}

/* ── About: a staggered portrait pair ── */
.about-split {
   grid-template-columns: .85fr 1fr;
   align-items: start
}

.about-copy h2 {
   font: 600 clamp(35px, 4vw, 55px)/1.1 "Playfair Display", serif;
   margin: 0 0 26px
}

.about-copy p {
   font-size: 17px;
   color: var(--muted)
}

/* Every rule below is scoped to the About block. The shared .fig
   component keeps its own framing for the gallery and the banner. */
.about-portraits {
   position: relative
}

/* ── About supplementary cards ──
   A 2×2 block under the paragraphs. It occupies the void the text column used
   to leave below itself, which is also what levelled the section's bottom
   edge against the taller photo column beside it. */
.about-facts {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-top: 36px
}

.about-fact {
   min-height: 152px;
   margin: 0;
   padding: 22px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 14px;
   box-shadow: 0 2px 10px rgba(18, 76, 56, .06)
}

.about-fact b {
   font: 600 36px/1 "Playfair Display", serif;
   color: var(--green);
   letter-spacing: -.02em
}

.about-fact>span {
   margin-top: 10px;
   font-size: 13px;
   line-height: 1.45;
   color: var(--muted)
}

/* The image card carries its own caption on a scrim, so it needs no extra
   height below the picture and stays the same size as its text siblings. */
.about-fact-img {
   position: relative;
   padding: 0;
   overflow: hidden
}

.about-fact-img img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.about-fact-img figcaption {
   position: relative;
   margin-top: auto;
   padding: 22px 14px 12px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #fff;
   background: linear-gradient(180deg, rgba(12, 59, 43, 0) 0%, rgba(12, 59, 43, .88) 100%)
}

.about-fact-quote {
   background: var(--lime);
   border-color: #c2d6a8
}

.about-fact-quote p {
   margin: 0;
   font: italic 600 17px/1.35 "Playfair Display", serif;
   color: var(--green2)
}

/* One column, one width. Both plates share it, so the pair reads as a
   stacked set rather than two loose pictures. */
.about-portraits {
   max-width: 370px
}

/* Both photographs share one plate treatment: soft corner, hairline in the
   site green, and a shadow that lifts them off the paper. */
.about-portraits .fig-media {
   border-radius: 14px;
   box-shadow:
      0 18px 40px rgba(18, 76, 56, .15),
      0 2px 6px rgba(18, 76, 56, .08),
      inset 0 0 0 1px rgba(18, 76, 56, .26)
}

/* The second photograph sits in its own row beneath the portrait's caption.
   It is in normal flow, which is what guarantees it can never reach the
   name and title above it or the paragraph column beside it. */
.fig-portrait-alt {
   margin-top: 30px
}

/* ── About captions ──
   A short green rule above each caption, echoing the section labels, so the
   text reads as a deliberate caption rather than stray copy. */
.about-portraits figcaption {
   border-top: 0;
   padding: 0;
   margin-top: 26px
}

.about-portraits figcaption::before {
   content: "";
   display: block;
   width: 30px;
   height: 2px;
   border-radius: 2px;
   background: var(--green);
   margin-bottom: 12px
}

.about-portraits .fig-kicker {
   font-size: 11px;
   letter-spacing: .12em
}

/* Captions wrap; they never truncate. */
.about-portraits .fig-cap {
   font-size: 15px;
   line-height: 1.5;
   overflow-wrap: anywhere;
   text-overflow: clip;
   white-space: normal
}

/* The second caption is a supporting note, so it sits a step down in
   weight from the name and title above it. */
.fig-portrait-alt figcaption {
   margin-top: 18px
}

.fig-portrait-alt figcaption::before {
   width: 20px;
   margin-bottom: 9px
}

.about-portraits .fig-portrait-alt .fig-cap {
   font-size: 13.5px;
   line-height: 1.45;
   color: var(--muted)
}

/* Air between the picture block and the heading it introduces. */
.about-portraits {
   margin-bottom: 10px
}

.fig-portrait>figcaption {
   margin-top: 30px
}

/* ── Gallery ── */
.gallery {
   background: #fff
}

.gallery-intro {
   max-width: 620px;
   margin: -35px 0 55px;
   color: var(--muted);
   font-size: 17px
}

.gallery-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 46px 34px
}

.gallery-item {
   grid-column: span 2
}

/* Lead image gets half the row; the two that follow share the rest. The
   staggered top margins below break the shelf line so the grid scans as
   a scrapbook instead of a table. */
.gallery-item-lead {
   grid-column: span 3
}

.gallery-item:nth-child(2) {
   grid-column: span 3
}

.gallery-item:nth-child(4) {
   margin-top: 44px
}

.gallery-item:nth-child(5) {
   margin-top: 88px
}

/* ── Wide banner (teaching) ── */
.fig-banner {
   margin-top: 60px
}

.fig-banner figcaption {
   flex-direction: row;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 6px 18px
}

.fig-banner .fig-cap {
   margin-right: auto
}

@media(max-width:1000px) {
   .gallery-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 40px 26px
   }

   .gallery-item,
   .gallery-item-lead,
   .gallery-item:nth-child(2) {
      grid-column: span 2
   }

   .gallery-item:nth-child(4),
   .gallery-item:nth-child(5) {
      margin-top: 0
   }
}

@media(max-width:800px) {

   /* Portraits lead on mobile: the face before the biography. The two
      plates keep stacking, so nothing can overlap on a narrow screen. */
   .about-split {
      grid-template-columns: 1fr;
      gap: 0
   }

   .about-portraits {
      order: -1;
      max-width: 420px;
      margin: 0 0 46px
   }

   /* Cards go full-width and stack, below the paragraph text. */
   .about-facts {
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 30px
   }

   .about-fact {
      min-height: 0;
      padding: 20px
   }

   /* Without a fixed height the image card would collapse to nothing,
      since its picture is absolutely positioned. */
   .about-fact-img {
      min-height: 170px
   }

   .gallery-grid {
      grid-template-columns: 1fr;
      gap: 42px
   }

   .gallery-intro {
      margin-top: -25px
   }

   .hero-card:has(.hero-card-img) .hero-card-body {
      padding: 28px 28px 0
   }

   .hero-card:has(.hero-card-img) .hero-card-credit {
      margin: 16px 28px 22px
   }
}

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

   .fig-media img,
   .fig:hover .fig-media img {
      transform: none;
      transition: none
   }
}

/* ═══════════════════════════════════════════════════
   ADMIN DASHBOARD STYLES
   ═══════════════════════════════════════════════════ */

/* ── Login ── */
.admin-login {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   padding: 24px;
   overflow: hidden
}

/* Same botanical line-art the public pages use, so the gate feels part of the site. */
.admin-login::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: min(760px, 120vw);
   height: min(760px, 120vw);
   opacity: .045;
   pointer-events: none;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' fill='none' stroke='%23124c38' stroke-width='1.5'%3E%3Cpath d='M200 480 C200 480 200 100 200 40'/%3E%3Cpath d='M200 120 C160 100 100 130 80 180 C65 215 90 240 120 230 C150 220 170 180 200 120'/%3E%3Cpath d='M200 120 C240 100 300 130 320 180 C335 215 310 240 280 230 C250 220 230 180 200 120'/%3E%3Cpath d='M200 200 C170 185 120 200 100 245 C85 275 105 300 130 290 C155 280 175 245 200 200'/%3E%3Cpath d='M200 200 C230 185 280 200 300 245 C315 275 295 300 270 290 C245 280 225 245 200 200'/%3E%3Cpath d='M200 290 C175 275 135 285 118 320 C105 345 120 365 142 358 C162 350 180 325 200 290'/%3E%3Cpath d='M200 290 C225 275 265 285 282 320 C295 345 280 365 258 358 C238 350 220 325 200 290'/%3E%3C/svg%3E")
}

.admin-login-card {
   position: relative;
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 18px;
   padding: 40px 38px 30px;
   width: 100%;
   max-width: 412px;
   text-align: left;
   box-shadow: 0 1px 2px rgba(20, 34, 28, .04), 0 12px 40px rgba(20, 34, 28, .07)
}

.admin-login-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 26px
}

.admin-login-head .logo {
   font-size: 21px
}

.admin-login-eyebrow {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--green);
   background: var(--lime);
   border-radius: 20px;
   padding: 5px 11px
}

.admin-login-title {
   font: 600 38px/1.05 "Playfair Display", serif;
   letter-spacing: -.02em;
   margin: 0 0 7px
}

.admin-login-sub {
   color: var(--muted);
   font-size: 14px;
   margin: 0 0 26px
}

.admin-login-card .admin-field-group {
   margin-bottom: 16px
}

.admin-login-card .admin-label {
   margin-top: 0
}

.admin-label-row {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 10px
}

.admin-link-btn {
   background: none;
   border: none;
   padding: 0;
   margin-bottom: 6px;
   font-family: inherit;
   font-size: 12px;
   font-weight: 600;
   color: var(--green);
   cursor: pointer;
   text-decoration: underline;
   text-underline-offset: 2px
}

.admin-link-btn:hover {
   opacity: .75
}

/* Password field with reveal toggle */
.admin-input-wrap {
   position: relative
}

.admin-input-wrap .admin-input {
   padding-right: 44px
}

.admin-eye {
   position: absolute;
   top: 50%;
   right: 6px;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   padding: 0;
   border: none;
   border-radius: 7px;
   background: none;
   color: var(--muted);
   cursor: pointer;
   transition: color .2s, background .2s
}

.admin-eye:hover {
   color: var(--green);
   background: rgba(18, 76, 56, .07)
}

.admin-eye .admin-eye-off {
   display: none
}

.admin-eye[aria-pressed="true"] .admin-eye-on {
   display: none
}

.admin-eye[aria-pressed="true"] .admin-eye-off {
   display: block
}

.admin-caps {
   display: block;
   margin-top: 7px;
   font-size: 11.5px;
   font-weight: 500;
   color: #92400e
}

/* Submit button with inline spinner */
.admin-login-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   width: 100%;
   padding: 13px 20px;
   border-radius: 30px;
   margin-top: 22px
}

.admin-spinner {
   visibility: hidden;
   opacity: 0;
   width: 14px;
   height: 14px;
   border: 2px solid rgba(255, 255, 255, .35);
   border-top-color: #fff;
   border-radius: 50%;
   animation: admin-spin .6s linear infinite;
   transition: opacity .2s
}

.admin-login-btn.is-loading .admin-spinner {
   visibility: visible;
   opacity: 1
}

#loginBtnLabel {
   min-width: 85px;
   text-align: left
}

@keyframes admin-spin {
   to {
      transform: rotate(360deg)
   }
}

@media(prefers-reduced-motion:reduce) {
   .admin-spinner {
      animation-duration: 1.6s
   }
}

.admin-login-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-top: 24px;
   padding-top: 18px;
   border-top: 1px solid var(--line);
   font-size: 12px
}

.admin-login-foot a {
   color: var(--muted);
   text-decoration: none;
   transition: color .2s
}

.admin-login-foot a:hover {
   color: var(--green)
}

.admin-login-secure {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   color: var(--muted)
}

.admin-error {
   background: #fef2f2;
   color: #b91c1c;
   border: 1px solid #fecaca;
   border-radius: 9px;
   padding: 11px 14px;
   font-size: 13px;
   line-height: 1.5;
   margin-bottom: 18px;
   text-align: left
}

.admin-error.is-success {
   background: #f0fdf4;
   color: #166534;
   border-color: #bbf7d0
}

@media(max-width:420px) {
   .admin-login-card {
      padding: 32px 24px 24px
   }

   .admin-login-title {
      font-size: 32px
   }
}

.admin-label {
   display: block;
   text-align: left;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .06em;
   color: var(--muted);
   margin-bottom: 6px;
   margin-top: 16px
}

.admin-input {
   display: block;
   width: 100%;
   padding: 12px 14px;
   border: 1px solid var(--line);
   border-radius: 8px;
   font-family: inherit;
   font-size: 14px;
   background: var(--paper);
   color: var(--ink);
   outline: none;
   transition: border-color .2s
}

.admin-input:focus {
   border-color: var(--green);
   box-shadow: 0 0 0 3px rgba(18, 76, 56, .1)
}

.admin-input.invalid {
   border-color: #ef4444
}

.admin-btn {
   display: inline-block;
   cursor: pointer;
   border: none;
   font-family: inherit;
   font-size: 14px;
   font-weight: 600;
   margin-top: 22px;
   transition: opacity .2s
}

.admin-btn:hover {
   opacity: .88
}

.admin-btn:disabled {
   opacity: .45;
   cursor: not-allowed
}

/* ── Dashboard Layout ── */
.admin-nav {
   justify-content: space-between
}

.admin-nav-center {
   display: flex;
   align-items: center;
   gap: 14px;
   flex: 1;
   justify-content: center
}

.admin-badge {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .14em;
   color: var(--green);
   text-transform: uppercase
}

.admin-user {
   font-size: 13px;
   color: var(--muted)
}

.admin-signout {
   cursor: pointer;
   background: none;
   font-family: inherit
}

.admin-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: calc(100vh - 72px - 56px)
}

.admin-edit-panel {
   padding: 40px 35px 120px;
   overflow-y: auto;
   max-height: calc(100vh - 72px - 56px);
   border-right: 1px solid var(--line)
}

.admin-section {
   margin-bottom: 45px;
   padding-bottom: 40px;
   border-bottom: 1px solid var(--line)
}

.admin-section:last-child {
   border-bottom: none
}

.admin-section .label {
   margin-bottom: 20px
}

.admin-field-group {
   margin-bottom: 16px
}

.admin-field-hint {
   display: block;
   font-size: 11px;
   color: var(--muted);
   margin-top: 5px
}

/* ── Publication Cards ── */
.admin-pub-card {
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 18px;
   margin-bottom: 14px;
   transition: box-shadow .2s
}

.admin-pub-card:hover {
   box-shadow: 0 2px 16px rgba(0, 0, 0, .06)
}

.admin-pub-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px
}

.admin-select {
   padding: 6px 10px;
   border: 1px solid var(--line);
   border-radius: 6px;
   font-family: inherit;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1em;
   color: var(--green);
   background: var(--paper);
   cursor: pointer
}

.admin-btn-secondary {
   background: none;
   border: 1px solid var(--green);
   color: var(--green);
   border-radius: 30px;
   padding: 10px 20px;
   font-family: inherit;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: background .2s, color .2s
}

.admin-btn-secondary:hover {
   background: var(--green);
   color: #fff
}

.admin-btn-secondary:disabled {
   opacity: .4;
   cursor: not-allowed
}

.admin-btn-danger-sm {
   background: none;
   border: 1px solid #ef4444;
   color: #ef4444;
   border-radius: 6px;
   padding: 4px 10px;
   font-size: 12px;
   cursor: pointer;
   font-family: inherit;
   transition: background .2s, color .2s
}

.admin-btn-danger-sm:hover {
   background: #ef4444;
   color: #fff
}

/* ── Academic Link Cards ── */
.admin-link-card {
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 18px;
   margin-bottom: 14px;
   transition: box-shadow .2s
}

.admin-link-card:hover {
   box-shadow: 0 2px 16px rgba(0, 0, 0, .06)
}

.admin-link-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px
}

.admin-link-card-title {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1em;
   color: var(--green);
   text-transform: uppercase
}

.admin-link-card-fields {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 16px
}

@media(max-width:600px) {
   .admin-link-card-fields {
      grid-template-columns: 1fr
   }
}

/* ── Media Cards (images & gallery) ── */
.admin-subhead {
   font: 700 11px/1 "DM Sans", Arial, sans-serif;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--muted);
   margin: 26px 0 14px
}

.admin-media-card {
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 18px;
   margin-bottom: 14px;
   transition: box-shadow .2s
}

.admin-media-card:hover {
   box-shadow: 0 2px 16px rgba(0, 0, 0, .06)
}

.admin-media-head {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   margin-bottom: 14px
}

/* The thumbnail is the drop target, so it has to look like one. */
.admin-media-thumb {
   position: relative;
   flex: 0 0 88px;
   width: 88px;
   height: 66px;
   border-radius: 8px;
   overflow: hidden;
   background: var(--paper);
   border: 1px solid var(--line);
   cursor: pointer
}

.admin-media-thumb:hover,
.admin-media-thumb:focus-visible,
.admin-media-thumb.drag-over {
   border-color: var(--green);
   outline: none;
   box-shadow: 0 0 0 3px rgba(18, 76, 56, .12)
}

.admin-media-thumb-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: none
}

.admin-media-thumb-empty {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   letter-spacing: .06em;
   color: var(--muted)
}

.admin-media-thumb-hint {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 3px 0;
   text-align: center;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #fff;
   background: rgba(12, 59, 43, .82);
   opacity: 0;
   transition: opacity .2s
}

.admin-media-thumb:hover .admin-media-thumb-hint,
.admin-media-thumb:focus-visible .admin-media-thumb-hint,
.admin-media-thumb.drag-over .admin-media-thumb-hint {
   opacity: 1
}

.admin-media-head-text {
   flex: 1;
   min-width: 0
}

.admin-media-title {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--green)
}

.admin-media-where {
   font-size: 11px;
   color: var(--muted);
   margin-top: 3px
}

.admin-media-tools {
   display: flex;
   gap: 5px;
   flex-shrink: 0
}

.admin-media-tools button:disabled {
   opacity: .35;
   cursor: not-allowed
}

.admin-media-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 16px
}

.admin-media-row .admin-select {
   width: 100%
}

.admin-req {
   font-weight: 400;
   text-transform: none;
   letter-spacing: 0;
   color: var(--muted)
}

@media(max-width:600px) {
   .admin-media-row {
      grid-template-columns: 1fr
   }
}

/* ── Image Upload ── */
.admin-upload-zone {
   border: 2px dashed var(--line);
   border-radius: 12px;
   padding: 35px 20px;
   text-align: center;
   transition: border-color .2s, background .2s;
   cursor: pointer
}

.admin-upload-zone.drag-over {
   border-color: var(--green);
   background: rgba(18, 76, 56, .04)
}

.admin-upload-icon {
   font-size: 32px;
   margin-bottom: 8px
}

.admin-upload-browse {
   color: var(--green);
   font-weight: 600;
   cursor: pointer;
   text-decoration: underline
}

.admin-og-preview {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 12px;
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 10px
}

.admin-og-preview img {
   width: 200px;
   height: auto;
   border-radius: 6px;
   object-fit: cover
}

.admin-progress {
   height: 6px;
   background: var(--line);
   border-radius: 3px;
   overflow: hidden;
   margin-top: 10px
}

.admin-progress-bar {
   height: 100%;
   width: 0;
   background: var(--green);
   transition: width .3s;
   border-radius: 3px
}

/* ── CV Manager ── */
.admin-mode-tabs {
   display: inline-flex;
   gap: 4px;
   padding: 4px;
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 10px;
   margin-bottom: 16px
}

.admin-mode-tab {
   background: none;
   border: none;
   border-radius: 7px;
   padding: 7px 16px;
   font-family: inherit;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .04em;
   color: var(--muted);
   cursor: pointer;
   transition: background .2s, color .2s
}

.admin-mode-tab.active {
   background: var(--green);
   color: #fff
}

.admin-file-card {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 14px;
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 10px
}

.admin-file-icon {
   font-size: 26px;
   line-height: 1;
   flex-shrink: 0
}

.admin-file-meta {
   flex: 1;
   min-width: 0
}

.admin-file-name {
   font-size: 14px;
   font-weight: 600;
   word-break: break-all
}

.admin-file-sub {
   font-size: 11px;
   color: var(--muted);
   margin-top: 3px;
   word-break: break-all
}

.admin-verify-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   margin-top: 14px
}

.admin-btn-sm {
   padding: 7px 14px !important;
   font-size: 12px !important;
   margin-top: 0 !important
}

.admin-chip {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .09em;
   text-transform: uppercase;
   padding: 6px 11px;
   border-radius: 20px;
   border: 1px solid;
   white-space: nowrap
}

.admin-chip-idle {
   color: #92400e;
   border-color: #fcd34d;
   background: #fffbeb
}

.admin-chip-ok {
   color: #166534;
   border-color: #bbf7d0;
   background: #f0fdf4
}

.admin-chip-bad {
   color: #b91c1c;
   border-color: #fecaca;
   background: #fef2f2
}

.admin-chip-busy {
   color: var(--muted);
   border-color: var(--line);
   background: var(--white)
}

.admin-notice {
   font-size: 12px;
   line-height: 1.55;
   padding: 10px 13px;
   border-radius: 8px;
   margin-top: 10px;
   border: 1px solid
}

.admin-notice-info {
   background: #f0f9ff;
   border-color: #bae6fd;
   color: #075985
}

.admin-notice-warn {
   background: #fffbeb;
   border-color: #fde68a;
   color: #92400e
}

.admin-notice-error {
   background: #fef2f2;
   border-color: #fecaca;
   color: #b91c1c
}

.admin-notice ul {
   margin: 5px 0 0;
   padding-left: 17px
}

.admin-notice li {
   margin-bottom: 3px
}

.admin-code {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 4px;
   padding: 1px 5px
}

/* ── Modal (PDF preview) ── */
.admin-modal {
   position: fixed;
   inset: 0;
   z-index: 200;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px
}

.admin-modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(20, 34, 28, .55)
}

.admin-modal-card {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 940px;
   height: min(88vh, 940px);
   background: var(--paper);
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 24px 70px rgba(0, 0, 0, .3)
}

.admin-modal-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
   padding: 16px 22px;
   border-bottom: 1px solid var(--line);
   background: var(--white)
}

.admin-modal-head h2 {
   font: 600 22px/1.2 "Playfair Display", serif;
   margin: 0
}

.admin-modal-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 0;
   padding: 14px 22px 18px
}

.admin-pdf-frame {
   flex: 1;
   width: 100%;
   min-height: 0;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: #fff
}

.admin-modal-foot {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
   padding: 13px 22px;
   border-top: 1px solid var(--line);
   background: var(--white)
}

.admin-modal-foot .admin-btn {
   margin-top: 0;
   padding: 9px 18px;
   font-size: 13px
}

.admin-modal-foot .admin-btn-secondary {
   padding: 9px 18px
}

.admin-modal-spacer {
   flex: 1
}

@media(max-width:680px) {
   .admin-modal {
      padding: 0
   }

   .admin-modal-card {
      height: 100vh;
      max-width: none;
      border-radius: 0
   }

   .admin-modal-foot {
      gap: 8px
   }

   .admin-modal-spacer {
      display: none
   }
}


/* ── Preview Panel ── */
.admin-preview-panel {
   display: flex;
   flex-direction: column;
   background: #e8e7e2;
   overflow: hidden
}

.admin-preview-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 18px;
   border-bottom: 1px solid var(--line);
   background: var(--paper)
}

.admin-preview-label {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .14em;
   color: var(--green)
}

.admin-viewport-btns {
   display: flex;
   gap: 4px
}

.admin-vp-btn {
   background: none;
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 5px 12px;
   font-size: 11px;
   font-family: inherit;
   font-weight: 600;
   letter-spacing: .04em;
   color: var(--muted);
   cursor: pointer;
   transition: border-color .2s, background .2s, color .2s
}

.admin-vp-btn.active {
   background: var(--green);
   color: #fff;
   border-color: var(--green)
}

.admin-preview-frame-wrap {
   flex: 1;
   display: flex;
   justify-content: center;
   overflow: auto;
   padding: 16px
}

.admin-preview-frame {
   width: 100%;
   max-width: 100%;
   height: 100%;
   min-height: 500px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: #fff;
   transition: max-width .4s ease
}

/* ── Status Bar ── */
.admin-status-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   height: 56px;
   background: var(--white);
   border-top: 1px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 30px;
   z-index: 25
}

.admin-unsaved {
   font-size: 13px;
   color: var(--muted)
}

.admin-unsaved.has-changes {
   color: #d97706;
   font-weight: 600
}

.admin-status-actions {
   display: flex;
   gap: 10px;
   align-items: center
}

.admin-status-actions .admin-btn {
   margin-top: 0;
   padding: 9px 18px;
   font-size: 13px
}

.admin-status-actions .admin-btn-secondary {
   padding: 9px 18px
}

/* ── Toast Notifications ── */
.admin-toast-container {
   position: fixed;
   top: 85px;
   right: 20px;
   z-index: 100;
   display: flex;
   flex-direction: column;
   gap: 8px
}

.admin-toast {
   padding: 13px 20px;
   border-radius: 10px;
   font-size: 13px;
   font-weight: 500;
   color: #fff;
   transform: translateX(120%);
   transition: transform .3s ease;
   box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
   max-width: 360px
}

.admin-toast.show {
   transform: translateX(0)
}

.admin-toast-success {
   background: #166534
}

.admin-toast-error {
   background: #b91c1c
}

.admin-toast-warning {
   background: #d97706
}

/* ── Admin Responsive ── */
@media(max-width:1024px) {
   .admin-layout {
      grid-template-columns: 1fr
   }

   .admin-preview-panel {
      display: none
   }

   .admin-edit-panel {
      max-height: none;
      border-right: none
   }
}

@media(max-width:600px) {
   .admin-login-card {
      padding: 35px 24px
   }

   .admin-edit-panel {
      padding: 25px 18px 120px
   }

   .admin-status-bar {
      padding: 0 15px
   }

   .admin-nav-center {
      display: none
   }
}