:root{--cream:#f8f4e9;--paper:#fffdf6;--green:#284e3c;--leaf:#577348;--brown:#8b583a;--gold:#eebc54;--blue:#39747c;--ink:#26372f;--muted:#606a60;--line:#d8ddcd}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}
a{color:inherit;text-underline-offset:5px}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
img{max-width:100%;display:block}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.12;letter-spacing:-.045em}
h1{font-size:clamp(3.2rem,6vw,5.8rem);font-weight:600;margin-bottom:26px}
h1 em{font-family:Georgia,serif;font-weight:normal;color:var(--green)}
h2{font-size:clamp(2rem,3.5vw,3.2rem);font-weight:500;margin-bottom:22px}
h3{font-size:1.35rem;letter-spacing:-.025em}
p{margin-bottom:20px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.skip{position:absolute;top:-100px;background:var(--gold);padding:15px;z-index:20}
.skip:focus{top:5px}
.wrap{max-width:1240px;margin:auto;padding-inline:36px}
.header{max-width:1440px;margin:auto;padding:22px 36px;display:flex;align-items:center;gap:48px;border-bottom:1px solid var(--line)}
.brand{font-size:36px;letter-spacing:-2px;font-weight:800;display:flex;align-items:center;text-decoration:none;line-height:1}
.brand img{object-fit:contain;margin-right:5px}
.brand-dot{color:var(--brown);margin-left:3px}
.header nav{display:flex;gap:8px}
.header nav a{padding:11px 16px;text-decoration:none;font-size:14px;font-weight:600;border-radius:24px}
.header nav a[aria-current],.header nav a:hover{background:#e4e9d9;color:var(--green)}
.header-note{margin-left:auto;font:10px monospace;letter-spacing:1px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center;padding-block:72px 68px}
.eyebrow{font-family:monospace;font-size:11px;font-weight:bold;letter-spacing:1.5px;line-height:1.6}
.pixel{display:inline-block;width:9px;height:9px;background:var(--leaf);box-shadow:6px -6px 0 #b4c390;margin-right:14px}
.lead{font-size:21px;line-height:1.5;letter-spacing:-.35px}
.hero-copy>p:not(.eyebrow){max-width:450px}
.hero-copy .small{margin-top:27px}
.small,small{font-size:12px;line-height:1.6;color:var(--muted)}
.actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:26px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:25px;background:var(--green);color:var(--paper);text-decoration:none;border:1px solid var(--green);border-radius:7px;padding:14px 21px;font-size:14px;font-weight:600;min-height:48px}
.button:hover{background:#193c2c}
.text-link{display:inline-block;font-size:14px;font-weight:bold;padding-block:12px}
.hero-visual{position:relative;padding-bottom:32px}
.map{position:relative;min-height:470px;background:#e8eadb url('assets/map.svg') center/cover;border:1px solid #cdd5c3;border-radius:15px;overflow:hidden}
.hero-map{height:490px;transform:rotate(2deg);border-radius:100px 16px 16px 16px}
.map-label,.map-caption{position:absolute;left:20px;font:10px monospace;letter-spacing:1px;background:var(--paper);padding:8px 10px;border-radius:4px}
.map-label{top:20px}
.map-caption{bottom:16px;font-size:9px}
.north{position:absolute;right:20px;bottom:20px;text-align:center;font-size:12px;line-height:1.2}
.pin{position:absolute;display:flex;align-items:center;justify-content:center;width:46px;height:46px;background:var(--green);color:white;border:3px solid var(--paper);border-radius:50% 50% 50% 7px;text-decoration:none;font:700 14px monospace;box-shadow:0 4px 0 #26372f20;z-index:2}
.pin:hover{transform:translateY(-4px)}
.pin-0{left:28%;top:40%}
.pin-1{left:68%;top:24%;background:var(--brown)}
.pin-2{left:57%;top:67%;background:var(--blue)}
.pin-3{left:15%;top:70%;background:#695714}
.map-mascot{position:absolute;width:205px;right:1%;top:31%;transform:rotate(-12deg);pointer-events:none}
.floating-card{position:absolute;bottom:34px;left:-25px;right:25px;display:flex;align-items:center;gap:15px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px;box-shadow:0 12px 30px #26372f12;text-decoration:none}
.floating-card strong,.floating-card .small{display:block}
.floating-card .eyebrow{font-size:8px}
.floating-card>span:last-child{margin-left:auto}
.mascot-note{text-align:right;font:italic 12px Georgia,serif;position:relative;top:16px}
.number{display:grid;place-items:center;background:#e3e9d7;color:var(--green);font:700 15px monospace;width:44px;height:44px;flex-shrink:0;border-radius:9px}
.intro-strip{background:var(--green);color:var(--cream)}
.strip-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:26px}
.strip-inner p{margin:0;font-size:14px;line-height:1.5}
.strip-inner a{font-size:12px;text-decoration:none;padding-block:10px}
.strip-inner a:hover{text-decoration:underline}
.section{padding-block:64px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:28px}
.section-heading h2,.section-heading p{margin-bottom:8px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{border:1px solid var(--line);padding:30px;border-radius:10px;background:var(--paper)}
.step>span{font:11px monospace;letter-spacing:1px;color:var(--leaf);display:block;margin-bottom:38px}
.step p{font-size:15px;color:var(--muted);margin-bottom:0}
.step a{margin-top:15px;display:inline-block}
.step h2{font-size:26px}
.end-banner{display:flex;align-items:center;gap:35px;background:#e6ead9;border-radius:14px;padding:28px 40px;margin-block:30px 75px}
.end-banner img{width:150px}
.end-banner h2{margin-bottom:8px;font-size:34px}
.end-banner p{margin-bottom:0}
.end-banner .button{margin-left:auto;flex-shrink:0}
footer{padding:40px max(36px,calc((100vw - 1168px)/2));border-top:1px solid var(--line);display:flex;gap:40px;align-items:start}
footer>p{font-size:14px}
footer>div{margin-left:auto;font-size:13px}
footer .small{margin-top:15px}
.page-title{font-size:clamp(2.7rem,5vw,4.5rem)}
.notice{background:#eeeddf;border-left:3px solid var(--brown);padding:16px 20px;font-size:13px;line-height:1.6;border-radius:0 6px 6px 0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0}
.filters button{border:1px solid #b7c1af;color:var(--green);border-radius:30px;background:transparent;padding:11px 18px;font-size:13px;min-height:44px}
.filters button[aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}
.explore-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}
.explore-grid .map{height:590px}
.list-heading{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:0 0 13px}
.list-heading span{color:var(--muted)}
.observation{display:flex;gap:15px;align-items:start;padding:20px 16px;border:1px solid var(--line);background:var(--paper);text-decoration:none;border-radius:9px;margin-bottom:10px}
.observation:hover{border-color:var(--leaf);background:#f0f0e2}
.observation .eyebrow{font-size:9px;letter-spacing:1px}
.observation h3{font-size:18px;margin:7px 0}
.observation p{font-size:11px;margin-bottom:9px;color:var(--muted)}
.arrow{margin-left:auto}
.condition,.badge{display:inline-block;border-radius:4px;padding:4px 8px;background:#f3e6c5;color:#665020;font-size:11px}
.lighting{background:#eddfd4;color:var(--brown)}
.preparedness{background:#d9e8e7;color:var(--blue)}
.spaces{background:#f1e6c5;color:#695714}
.back{display:inline-block;padding-block:25px;font-size:14px}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:42px;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.detail h2{font-size:34px}
.detail-art{align-self:start;position:relative}
.detail-art img{border-radius:12px;width:100%;aspect-ratio:1.2;object-fit:cover}
.art-caption{display:block;font:9px monospace;letter-spacing:1px;margin-top:10px}
.detail .lead{font-size:18px;margin-top:20px}
.attributes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.attributes>div{background:var(--paper);padding:12px}
.attributes dt{font-size:11px;color:var(--muted)}
.attributes dd{font-size:13px;margin:3px 0}
.detail:target{background:#f0efdf;box-shadow:0 0 0 20px #f0efdf}
.capture-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;max-width:1100px}
.capture-anole{width:210px;margin:18px auto}
.capture-panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 15px 45px #26372f08;align-self:start}
.panel-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:22px;font-size:14px}
.photo-placeholder{min-height:170px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px dashed #a7b69c;background:#e9eddf;border-radius:8px;color:var(--green);gap:4px}
.photo-placeholder>span{font-size:35px}
.photo-placeholder strong{font-size:14px}
label{display:block;font-size:12px;font-weight:bold;margin:22px 0 8px}
input,select,textarea{width:100%;min-width:0;background:var(--paper);color:var(--ink);border:1px solid #aebaa8;border-radius:6px;padding:12px;font-size:16px}
textarea{resize:vertical}
form .small{font-size:11px;margin:8px 0}
.template-hint{font-size:12px;background:#e9eddf;padding:12px;margin-top:12px;border-radius:5px}
.full{width:100%;margin-top:20px}
.review h2{font-size:30px}
.review dt{font-weight:bold;font-size:12px;margin-top:16px}
.review dd{margin:4px 0 18px;overflow-wrap:anywhere;white-space:pre-wrap}
.review p{font-size:14px}
.narrow{max-width:860px}
.narrow>.step{margin-top:25px}
.rounded{border-radius:12px}
.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
[hidden]{display:none!important}

@media(min-width:1400px){.hero{padding-block:90px}
}
@media(max-width:1050px){.header-note{display:none}
.hero{gap:30px}
.floating-card{left:-12px;right:12px}
.capture-layout{gap:45px}
.strip-inner{flex-wrap:wrap}
.split{gap:35px}
.hero-map{height:450px}
.hero h1{font-size:4rem}
.end-banner{margin-inline:30px}
footer{gap:22px}
.explore-grid{grid-template-columns:1fr 1fr}
.observation{padding:15px 10px;gap:10px}
}
@media(max-width:720px){.wrap{padding-inline:22px}
.header{padding:14px 20px;gap:10px;flex-wrap:wrap;justify-content:space-between}
.brand{font-size:30px}
.brand img{width:44px;height:36px}
.header nav{gap:0}
.header nav a{font-size:12px;padding:10px}
.hero{grid-template-columns:1fr;padding-block:38px 30px;gap:28px}
.hero h1{font-size:clamp(2.7rem,10vw,4rem)}
.hero .eyebrow{font-size:9px;letter-spacing:1px}
.lead{font-size:19px}
.hero-copy>p:not(.eyebrow){max-width:none}
.hero-copy .small{margin-top:19px}
.actions{gap:10px 18px;margin-top:20px}
.hero-map{min-height:350px;height:350px;border-top-left-radius:65px;transform:rotate(1deg)}
.map-mascot{width:175px}
.floating-card{left:8px;right:8px;bottom:31px;padding:15px;gap:10px}
.floating-card strong{font-size:14px}
.mascot-note{font-size:11px}
.strip-inner{display:grid;grid-template-columns:1fr 1fr;gap:8px 15px;padding-block:23px}
.strip-inner p{grid-column:1/-1;margin-bottom:8px}
.strip-inner p br{display:none}
.strip-inner p strong{margin-left:5px}
.strip-inner a{font-size:11px;min-height:44px;display:flex;align-items:center}
.section{padding-block:40px}
.split,.three,.explore-grid,.detail,.capture-layout{grid-template-columns:1fr;gap:26px}
.section-heading{align-items:start;flex-direction:column;gap:14px}
.three{gap:12px}
.step{padding:24px}
.step>span{margin-bottom:22px}
.end-banner{margin:15px 22px 45px;padding:24px;flex-wrap:wrap;gap:15px}
.end-banner img{width:105px}
.end-banner h2{font-size:28px}
.end-banner .button{margin-left:0}
.end-banner>div{flex:1;min-width:170px}
footer{padding:30px 22px;flex-wrap:wrap;gap:22px}
footer>div{margin:0;width:100%}
footer>p{flex:1;min-width:180px}
.page-title{font-size:2.8rem}
.filters{gap:7px}
.filters button{font-size:12px;padding:10px 13px}
.explore-grid .map{height:360px;min-height:360px}
.list-heading{font-size:11px}
.observation{padding:17px 14px}
.detail-art img{aspect-ratio:1.65}
.detail h2{font-size:29px}
.detail:target{box-shadow:0 0 0 10px #f0efdf}
.capture-layout{gap:15px}
.capture-anole{display:none}
.capture-intro>.small{margin-top:15px}
.capture-panel{padding:20px}
.template-grid{grid-template-columns:1fr}
.template-grid .step{min-width:0}
.narrow{max-width:100%}
.sample-word{letter-spacing:0}
}
@media(max-width:370px){.header{justify-content:center}
.header nav{width:100%;justify-content:space-between}
.wrap{padding-inline:17px}
.hero h1{font-size:2.65rem}
.floating-card .eyebrow{font-size:7px}
.floating-card{padding:12px}
.number{width:37px;height:37px}
.panel-top{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}


button:disabled{opacity:.6;cursor:not-allowed}

/* About: restrained field-notebook details, scoped away from demo controls. */
.about-page .notebook-label {
  display: inline-block;
  padding: 8px 12px;
  border-left: 3px solid var(--brown);
  background: #eeeddf;
}
.about-page .notebook-figure { margin: 0; min-width: 0; }
.about-page .notebook-figure figcaption {
  padding: 12px 0;
  border-bottom: 1px dashed #b8c2ae;
  color: var(--muted);
  font: 11px/1.6 monospace;
}
.about-page .anole-field-note {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px dashed #b8c2ae;
}
.about-page .anole-field-note img { width: 100px; height: auto; flex-shrink: 0; }
.about-page .anole-field-note p { margin: 0; font-size: 14px; }
.about-page .capability-notes {
  margin-bottom: 64px;
  padding: 30px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brown);
  border-radius: 4px 4px 12px 12px;
  background: var(--paper);
}
.about-page .capability-notes h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.about-page .capability-grid,
.about-page .people-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.about-page .capability-grid h3 { font-size: 19px; }
.about-page .capability-grid p { font-size: 15px; }
.about-page .note-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--leaf); }
.about-page .future-dot { background: var(--gold); }
.about-page .independent-note { margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.about-page .template-note { position: relative; border-top: 3px solid var(--marker, var(--leaf)); }
.about-page .template-note > span { color: var(--ink); }
.about-page .template-note > span::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--marker, var(--leaf)); margin-right: 10px; }
.about-page .template-lighting { --marker: var(--brown); }
.about-page .template-preparedness { --marker: var(--blue); }
.about-page .template-spaces { --marker: var(--gold); }
.about-page .template-note a { padding-block: 10px; min-height: 44px; }
.about-page .people-section { padding-block: 64px 32px; }
.about-page .people-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.about-page .trail-mark {
  display: block;
  flex: 0 0 100px;
  height: 52px;
  border: 2px dashed #b9ad91;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0 50% 50% 50%;
  transform: rotate(-18deg);
  margin-right: 16px;
}
.about-page .person-card { padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.about-page .person-initials { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 24px; background: #eddfd4; color: var(--brown); font: bold 13px monospace; border-radius: 4px 12px 4px 4px; }
.about-page .advisor-initials { background: #d9e8e7; color: var(--blue); }
.about-page .person-card h3 { margin-bottom: 8px; font-size: 24px; }
.about-page .person-card .person-role { color: var(--green); font-size: 13px; font-weight: bold; margin-bottom: 22px; }
.about-page .person-card p { font-size: 15px; }
.about-page .person-card .text-link { margin-top: 4px; min-height: 44px; }
.about-page .end-banner { margin-inline: 0; margin-bottom: 12px; }
.about-page .end-banner .eyebrow { margin-bottom: 12px; }
@media (max-width: 720px) {
  .about-page .capability-notes { padding: 22px; margin-bottom: 40px; }
  .about-page .capability-grid,
  .about-page .people-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .about-page .capability-grid > div + div { border-top: 1px dashed #b8c2ae; padding-top: 20px; }
  .about-page .anole-field-note { align-items: flex-start; gap: 10px; }
  .about-page .anole-field-note img { width: 72px; }
  .about-page .people-section { padding-block: 40px 20px; }
  .about-page .people-heading { display: block; }
  .about-page .trail-mark { width: 70px; height: 30px; margin: 0 12px 25px auto; }
  .about-page .person-card { padding: 22px; }
}

/* Explore map milestone; the static observation list is always available. */
.official-source { border: 1px solid #a8c5c5; border-left: 4px solid var(--blue); border-radius: 8px; padding: 20px; background: #e5eeea; margin-bottom: 30px; }
.official-source .eyebrow { margin-bottom: 2px; }
.official-source .text-link { font-size: 18px; }
.official-source p:last-child { font-size: 13px; margin: 5px 0 0; }
.community-heading { font-size: 27px; }
.map-column { min-width: 0; }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.map-toolbar button { border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--green); padding: 10px 14px; min-height: 44px; font-size: 13px; }
.interactive-map { height: 510px; width: 100%; border: 1px solid #b9c7b2; border-radius: 12px; background: #e5e9dd; z-index: 0; font-family: Arial, Helvetica, sans-serif; }
.map-fallback { padding: 25px; font-size: 14px; }
.map-column > .small { margin-top: 12px; }
.interactive-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; color: var(--green); }
.interactive-map .leaflet-control-attribution { font-size: 11px; color: #26372f; background: #fffdf6; }
.anole-map-marker { display: grid; place-items: center; border: 3px solid var(--paper); border-radius: 50% 50% 50% 8px; box-shadow: 0 3px 8px #26372f40; font: bold 14px monospace; }
.anole-map-marker.walkways { background: #e3e9d7; color: var(--green); }
.interactive-map .leaflet-popup-content { line-height: 1.5; font-size: 13px; }
.interactive-map .leaflet-popup-content p { margin: 10px 0; }
.interactive-map .leaflet-popup-content a { display: inline-block; padding-block: 12px; }
.interactive-map a.leaflet-popup-close-button { width: 44px; height: 44px; font-size: 24px; }
.interactive-map .leaflet-popup-content-wrapper { background: var(--paper); color: var(--ink); padding-top: 18px; }
.observation .observation-meta { margin: 12px 0 8px; font-size: 12px; }
.observation .follow-up { border-top: 1px dashed var(--line); padding-top: 9px; margin-bottom: 0; font-size: 12px; }
@media (max-width: 720px) {
  .interactive-map { height: 370px; }
  .map-toolbar .eyebrow { font-size: 9px; }
  .official-source { padding: 16px; }
}

/* Provenance labels distinguish sources without implying imported records exist. */
.source-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 30px; }
.source-key p { margin: 0; padding: 15px; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 6px; background: var(--paper); font-size: 13px; }
.source-key strong, .source-key span { display: block; }
.source-key span { margin-top: 6px; color: var(--muted); }
.source-key .source-listing { border-top-color: var(--brown); border-top-style: dashed; }
.source-key .source-community { border-top-color: var(--leaf); background: #eef0e3; }
@media (max-width: 720px) { .source-key { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* Shared community projects. */
.header{gap:24px;flex-wrap:wrap}.header nav{flex-wrap:wrap}.header nav a{padding:11px 13px}
.heat{--accent:#96611b;--tint:#f2e5c8}.maintenance{--accent:#9b4f38;--tint:#f1dfd6}.wildlife{--accent:#3e6848;--tint:#e0ead8}.accessibility{--accent:#496a85;--tint:#dfe8ef}
.landing-art{margin:0}.landing-art>img{width:100%;border-radius:70px 12px 12px 12px}.landing-art figcaption{display:flex;align-items:center;gap:14px;font:italic 15px Georgia,serif;margin-top:18px}.landing-art figcaption img{width:85px}
.project-grid,.sample-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.project-tile{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:14px;padding:28px}.project-tile h2{font-size:32px;margin-top:20px}.tile-top,.tile-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}.project-symbol{display:grid;place-items:center;width:66px;height:66px;border-radius:18px;background:var(--tint);color:var(--accent);font-size:38px}.project-tile .button,.phone-content>.button{background:var(--accent);border-color:var(--accent)}.tile-bottom .small{margin:12px 0 0}.qr{background:white;width:138px;flex:0 0 138px;line-height:0}.qr svg{display:block;width:100%;height:auto}.qr .small{line-height:1.6}.walkthrough{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}.walk-icon{height:110px;background:#e6ead9;border-radius:50% 12px 50% 12px;display:grid;place-items:center;font-size:60px;color:var(--green);margin-bottom:25px}.walkthrough .step>span{margin-bottom:15px}.map-toolbar{margin-top:24px}.sample-grid{margin-top:24px}.observation{border-left:4px solid var(--accent,var(--green));overflow-wrap:anywhere}.observation .number{background:var(--tint)}.anole-map-marker{background:var(--accent,var(--green));color:white}.phone-page{max-width:780px;margin:auto}.phone-page .header{justify-content:space-between}.phone-content{padding-top:28px}.phone-content h1{font-size:clamp(2rem,7vw,3rem);color:var(--accent)}.phone-content .interactive-map{height:310px}.phone-content .notice{font-size:12px}.phone-content .observation{margin-top:24px}.phone-footer{padding:20px;display:block;text-align:center;font-size:12px}.phone-content .full{background:var(--accent);border-color:var(--accent)}
#photo-preview,.review img{max-width:100%;max-height:300px;object-fit:contain;margin-top:16px;border-radius:8px}#remove-photo{margin-top:12px;padding:10px;background:var(--paper);border:1px solid var(--line);border-radius:6px;color:var(--green)}.sample-detail{scroll-margin-top:16px;max-width:850px}.sample-detail .observation{pointer-events:none}.phone-page .header>a:last-child{font-size:14px}
@media(max-width:850px){.project-grid{grid-template-columns:1fr}.walkthrough{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.header nav{width:100%;gap:2px}.header nav a{font-size:12px;padding:10px 9px}.project-tile{padding:22px}.tile-bottom{gap:12px}.qr{width:112px;flex-basis:112px}.tile-bottom .button{padding:12px;font-size:13px}.walkthrough,.sample-grid{grid-template-columns:1fr}.phone-content .interactive-map{height:280px}.phone-page .header{flex-wrap:nowrap}.phone-page .header .brand{font-size:27px}.phone-content .page-title{font-size:2.4rem}}
@media(max-width:370px){.tile-bottom{flex-wrap:wrap}.header nav{justify-content:flex-start}.project-tile h2{font-size:29px}}

/* A continuous sequence keeps every step connected at every screen width. */
.connected-steps { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 860px; }
.connected-steps .step { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 28px; }
.connected-steps .walk-icon { grid-row: 1 / 4; margin: 0; }
.connected-steps .step > span { margin-bottom: 8px; }
.connected-steps h2 { margin-bottom: 12px; }
.step-arrow { text-align: center; color: var(--green); font-size: 38px; line-height: 1; padding: 10px; }
.topic-fields { margin: 24px 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.topic-fields legend { padding-inline: 6px; font-size: 14px; font-weight: bold; }
.topic-fields label { display: flex; gap: 12px; align-items: center; margin: 8px 0; min-height: 36px; font-size: 14px; }
.topic-fields input { width: 19px; height: 19px; flex: 0 0 19px; accent-color: var(--green); }
.topic-swatch { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 16px; border-left: 5px solid var(--accent); border-radius: 6px; background: var(--tint); color: var(--accent); font-weight: bold; font-size: 14px; }
#topic-card { margin-bottom: 24px; overflow-wrap: anywhere; }
#preview-topic { color: var(--accent); font-size: 26px; }
#preview-brief { white-space: pre-wrap; }
@media (max-width: 600px) {
  .connected-steps .step { display: block; }
  .connected-steps .walk-icon { width: 90px; height: 90px; margin-bottom: 20px; }
}