/* Carlos Real Property — Lake Atitlán
   Visual system: a surveyor's document, not a brochure. */

:root{
  --ink:#10211F;
  --water:#1E4D4A;
  --water-deep:#163C39;
  --haze:#AFC4BF;
  --paper:#EDEEE9;
  --paper-lift:#F6F6F2;
  --sediment:#D8D2C4;
  --accent:#B5306A;
  --muted:#4A5F5C;
  --rule:#C6CFCB;

  --t-xs:.78rem;
  --t-s:.9rem;
  --t-base:1.0625rem;
  --t-m:1.3rem;
  --t-l:1.75rem;
  --t-xl:2.4rem;
  --t-2xl:3.3rem;

  --sp-1:.4rem; --sp-2:.8rem; --sp-3:1.2rem; --sp-4:2rem;
  --sp-5:3rem; --sp-6:4.5rem; --sp-7:7rem;

  --measure:66ch;
  --page:min(1180px, 92vw);
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:var(--t-base);
  line-height:1.62;
  font-optical-sizing:auto;
}

h1,h2,h3,h4,.fig,.wordmark,nav a,button,.btn,th,.tag{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
}

h1,h2,h3,h4{line-height:1.12;margin:0;font-weight:600;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5.2vw,var(--t-2xl))}
h2{font-size:clamp(1.5rem,3.1vw,var(--t-xl))}
h3{font-size:var(--t-m)}
p{margin:0 0 var(--sp-3)}
a{color:inherit}

.wrap{width:var(--page);margin-inline:auto}
.measure{max-width:var(--measure)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--rule);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:68px}
.wordmark{
  font-weight:600;font-size:var(--t-s);letter-spacing:.02em;
  text-decoration:none;display:flex;align-items:center;gap:.6rem;
}
.wordmark .mark{display:block;width:26px;height:26px;flex:none}
.wordmark b{font-weight:600}
.wordmark span{color:var(--muted);font-weight:400}

.site-nav{display:flex;align-items:center;gap:var(--sp-3)}
.site-nav a{
  font-size:var(--t-s);text-decoration:none;color:var(--muted);
  padding:.4rem 0;border-bottom:1.5px solid transparent;
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{padding:var(--sp-6) 0 var(--sp-5)}
.hero h1{max-width:19ch}
.hero .lede{font-size:var(--t-m);max-width:46ch;color:var(--muted);margin-top:var(--sp-3)}

.section-figure{
  width:100%;display:block;margin-top:var(--sp-5);
  background:var(--paper-lift);border:1px solid var(--rule);
}
figure{margin:0}
figcaption{
  font-size:var(--t-xs);color:var(--muted);
  padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--rule);
  background:var(--paper-lift);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-size:var(--t-s);font-weight:600;
  text-decoration:none;padding:.72rem 1.3rem;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;
}
.btn:hover,.btn:focus-visible{background:var(--water);border-color:var(--water)}
.btn-quiet{background:transparent;color:var(--ink)}
.btn-quiet:hover,.btn-quiet:focus-visible{background:var(--ink);color:var(--paper)}

/* ---------- sections ---------- */
section{padding:var(--sp-6) 0}
section + section{padding-top:0}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.section-head p{margin:0;color:var(--muted);max-width:44ch}

.band{background:var(--water);color:var(--paper)}
.band h2,.band h3{color:var(--paper)}
.band p{color:var(--haze)}
.band a{color:var(--paper)}
.band-inner{padding:var(--sp-6) 0}

/* ---------- parcel list ---------- */
.parcels{display:grid;gap:var(--sp-4)}
.parcel{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--sp-4);align-items:start;
  border-top:1px solid var(--ink);padding-top:var(--sp-3);
}
.parcel h3{font-size:var(--t-l);max-width:26ch}
.parcel .type{color:var(--muted);margin:.4rem 0 var(--sp-3)}
.parcel .plan{width:100%;height:auto;display:block;background:var(--paper-lift);border:1px solid var(--rule)}

/* ---------- data ---------- */
.data{width:100%;border-collapse:collapse;margin:0 0 var(--sp-4)}
.data caption{text-align:left;font-size:var(--t-s);color:var(--muted);padding-bottom:var(--sp-2)}
.data th,.data td{
  text-align:left;padding:.62rem .9rem .62rem 0;
  border-bottom:1px solid var(--rule);vertical-align:baseline;
}
.data th{font-weight:600;font-size:var(--t-s);width:42%;color:var(--muted)}
.data td{font-variant-numeric:tabular-nums}

.figures{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin:var(--sp-3) 0 var(--sp-4)}
.fig{display:block}
.fig b{display:block;font-size:var(--t-l);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.05}
.fig span{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:.25rem}

.facts{list-style:none;margin:0 0 var(--sp-4);padding:0}
.facts li{padding:.55rem 0 .55rem 1.4rem;border-bottom:1px solid var(--rule);position:relative}
.facts li::before{
  content:"";position:absolute;left:0;top:1.05em;
  width:.6rem;height:1.5px;background:var(--accent);
}

.tag{
  display:inline-block;font-size:var(--t-xs);font-weight:600;
  padding:.2rem .5rem;border:1.5px solid var(--accent);color:var(--accent);
}
.tag-flat{border-color:var(--rule);color:var(--muted)}

/* pending state — an honest UI state, not a placeholder apology */
.pending{
  border:1.5px dashed var(--rule);background:var(--paper-lift);
  padding:var(--sp-4);color:var(--muted);
}
.pending h3{color:var(--ink);margin-bottom:var(--sp-2)}
.pending p{margin-bottom:0;max-width:52ch}

/* ---------- prose blocks ---------- */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:var(--sp-4) var(--sp-5)}
.notes h3{margin-bottom:var(--sp-2);font-size:var(--t-base);letter-spacing:0}
.notes p{margin-bottom:0;color:var(--muted)}

/* ---------- form ---------- */
form{max-width:34rem}
label{display:block;font-family:"Archivo",sans-serif;font-size:var(--t-s);font-weight:600;margin-bottom:.35rem}
input,textarea,select{
  width:100%;font:inherit;font-size:var(--t-base);
  padding:.65rem .8rem;margin-bottom:var(--sp-3);
  background:var(--paper-lift);border:1.5px solid var(--rule);color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
textarea{min-height:8rem;resize:vertical}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--ink);margin-top:var(--sp-6);padding:var(--sp-5) 0 var(--sp-4)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4)}
.foot-grid h3{font-size:var(--t-s);margin-bottom:var(--sp-2)}
.foot-grid p,.foot-grid li{color:var(--muted);font-size:var(--t-s)}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{padding:.2rem 0}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{text-decoration:underline}
.colophon{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--rule);font-size:var(--t-xs);color:var(--muted);display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between}

/* ---------- a11y + motion ---------- */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp-3);top:var(--sp-3);z-index:100;background:var(--ink);color:var(--paper);padding:.6rem 1rem}

.draw{stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);animation:draw 1.7s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .draw{stroke-dashoffset:0}
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  :root{--sp-6:3.2rem;--sp-7:4.5rem}
  .parcel{grid-template-columns:1fr;gap:var(--sp-3)}
  .site-nav{gap:var(--sp-2)}
  .site-nav a{font-size:var(--t-xs)}
}
@media (max-width:560px){
  .site-head .wrap{min-height:60px}
  .wordmark span{display:none}
  .figures{gap:var(--sp-3)}
}

/* ---------- small screens: drawings and header ---------- */
@media (max-width:700px){
  /* SVG text is sized in viewBox units, so it shrinks with the drawing.
     Scale it back up and drop the secondary labels rather than let them collide. */
  .section-figure text{font-size:24px}
  .section-figure .lbl{display:none}
  .plan text{font-size:22px}
}
@media (max-width:560px){
  .site-head .wrap{flex-wrap:wrap;min-height:0;padding-block:.55rem;gap:.3rem}
  .wordmark{width:100%;white-space:nowrap}
  .site-nav{width:100%;gap:1.1rem}
}