/* Project overview — a fact table, a full-bleed plan band, one wide elevation with arch details, olive infrastructure list, FAQ. */
.plan-panel { max-width: 38rem; }
.plan-list { margin-top: 1.5rem; border-top: 1px solid var(--line-light); }
.plan-list li { padding: .8rem 0; border-bottom: 1px solid var(--line-light); color: rgba(250, 243, 229, .9); }
.plan-list strong { color: var(--sand); font-weight: 600; }

.wide-fig { margin: 0; }
.wide-fig button { display: block; width: 100%; padding: 0; border: 0; background: var(--sand); cursor: zoom-in; overflow: hidden; }
.wide-fig img { width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.wide-fig button:hover img { transform: scale(1.03); }
.wide-fig figcaption { display: flex; flex-wrap: wrap; gap: .4rem .85rem; align-items: center; margin-top: .85rem; font-size: .86rem; color: var(--muted); }
.details { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 3vw, 3rem); max-width: 52rem; margin: clamp(2rem, 4vw, 3.5rem) auto; }
.details figcaption { margin-top: .8rem; font-size: .84rem; color: var(--muted); text-align: center; }

.infra-grid { display: grid; gap: 0; border-top: 1px solid var(--line-light); }
.infra-grid li { padding: 1.4rem 0; border-bottom: 1px solid var(--line-light); }
.infra-grid h3 { margin-bottom: .3rem; font-style: italic; color: var(--sand); }
.infra-grid p { color: rgba(250, 243, 229, .86); max-width: 24rem; }
.infra-grid + .actions { margin-top: 2.25rem; }
@media (min-width: 760px) { .infra-grid { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }
@media (min-width: 1080px) { .infra-grid { grid-template-columns: repeat(3, 1fr); } }

.faq { display: grid; gap: 2rem; align-items: start; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; list-style: none; padding: 1.25rem 3rem 1.25rem 0; cursor: pointer; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; translate: 0 -50%; font: 300 1.8rem/1 var(--font-body); color: var(--terra); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 3rem 1.4rem 0; color: var(--ink-soft); max-width: 40rem; }
.faq summary:hover { color: var(--terra-deep); }
@media (min-width: 900px) { .faq { grid-template-columns: 4fr 7fr; column-gap: clamp(2rem, 6vw, 6rem); } .faq__head { position: sticky; top: calc(var(--header-h) + 2rem); } }

.plan { display: grid; gap: 2.5rem; align-items: center; }
.plan__fig { max-width: 24rem; width: 100%; margin-inline: auto; }
.plan__fig figcaption { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin-top: 1rem; font-size: .84rem; color: var(--muted); }
.plan__list { margin: 1.5rem 0 0; border-top: 1px solid var(--sand-deep); max-width: 26rem; }
.plan__list li { padding: .9rem 0; border-bottom: 1px solid var(--sand-deep); font-size: 1.05rem; }
.plan__list strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; margin-right: .35rem; }
.plan__text .actions { margin-top: 1.75rem; }
@media (min-width: 900px) { .plan { grid-template-columns: 4fr 5fr; column-gap: clamp(3rem, 8vw, 8rem); } .plan__fig { margin: 0 0 0 auto; } }

/* ---------- Project at a glance ---------- */
.glance { --st-stated: #4d7a57; --st-planned: #a8813a; --st-awaiting: #8a7f78; background: linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%); }
.glance__intro { display: grid; gap: .9rem; max-width: 46rem; }
.glance__intro h2 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; }
.glance__lede { max-width: 34rem; font-size: 1.02rem; color: var(--ink-soft); }

/* figures: an editorial strip, hairlines only between them */
.glance__figs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 0; margin-top: clamp(2.5rem, 5vw, 4rem); }
.glance__fig { position: relative; padding: 0 1rem; }
.glance__fig:nth-child(odd) { padding-left: 0; }
.glance__fig:nth-child(even)::before { content: ""; position: absolute; left: 0; top: .4rem; bottom: .2rem; width: 1px; background: linear-gradient(to bottom, transparent, rgba(168, 129, 58, .55), transparent); }
.glance__num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .4rem; margin: 0; font: 500 clamp(2.6rem, 5.6vw, 4.6rem)/1 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.glance__num small { font: 400 .78rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.glance__num span { font: italic 400 clamp(1.05rem, 1.6vw, 1.35rem)/1 var(--font-display); color: var(--st-planned); }
.glance__label { margin: .7rem 0 0; font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.glance__fignote { margin-top: 1.5rem; font-size: .84rem; color: var(--muted); }
@media (min-width: 900px) {
  .glance__figs { grid-template-columns: repeat(4, 1fr); }
  .glance__fig, .glance__fig:nth-child(odd) { padding: 0 clamp(1rem, 2.4vw, 2.25rem); }
  .glance__fig:first-child { padding-left: 0; }
  .glance__fig + .glance__fig::before { content: ""; position: absolute; left: 0; top: .4rem; bottom: .2rem; width: 1px; background: linear-gradient(to bottom, transparent, rgba(168, 129, 58, .55), transparent); }
}
.reveal-ready .glance__fig.reveal { transform: translateY(18px); }
.reveal-ready .glance__fig::before { transform: scaleY(0); transition: transform 1.2s var(--ease-io) calc(var(--d, 0s) + .25s); }
.reveal-ready .glance__fig.in::before { transform: none; }

/* image and information */
.glance__body { display: grid; gap: clamp(2rem, 5vw, 3rem); margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 1000px) { .glance__body { grid-template-columns: 5fr 6fr; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; } .glance__media { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.glance__media { margin: 0; }
.glance__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12rem 12rem .5rem .5rem; background: var(--sand); }
@media (min-width: 1000px) { .glance__frame { aspect-ratio: 4 / 5; border-radius: 20rem 20rem .5rem .5rem; } }
.glance__frame img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 55%; transition: transform 1.6s var(--ease); }
.glance__media:hover .glance__frame img { transform: scale(1.03); }
.glance__media figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: .9rem; font-size: .86rem; color: var(--muted); }

/* status tabs: typographic, underlined, no boxes */
.glance__tabs { display: flex; gap: clamp(1rem, 3vw, 2.25rem); margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.glance__tabs[hidden] { display: none; }
.glance__tab { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .9rem 0 1rem; font: 500 .95rem/1.2 var(--font-body); color: var(--muted); background: none; border: 0; cursor: pointer; transition: color .3s var(--ease); }
.glance__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.glance__tab:hover { color: var(--ink); }
.glance__tab[aria-selected="true"] { color: var(--ink); }
.glance__tab[aria-selected="true"]::after { transform: none; }
.glance__tab em { font: 400 .78rem/1 var(--font-body); font-style: normal; color: var(--muted); }
.glance__tab .t-short { display: none; }
@media (max-width: 520px) { .glance__tab .t-long { display: none; } .glance__tab .t-short { display: inline; } .glance__tabs { justify-content: space-between; } }

/* status marks: filled for stated, half for planned, open for awaiting */
.glance__tab i, .glance__ptitle i { flex: none; width: .62rem; height: .62rem; border-radius: 50%; }
.glance__tab--stated i, .glance__panel--stated .glance__ptitle i { background: var(--st-stated); }
.glance__tab--planned i, .glance__panel--planned .glance__ptitle i { background: linear-gradient(90deg, var(--st-planned) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--st-planned); }
.glance__tab--awaiting i, .glance__panel--awaiting .glance__ptitle i { box-shadow: inset 0 0 0 1.5px var(--st-awaiting); }

.glance__panel { outline: none; }
.glance__panel + .glance__panel { margin-top: 3rem; }
.js .glance__tabs:not([hidden]) ~ .glance__panel + .glance__panel { margin-top: 0; }
.glance__panel[hidden] { display: none; }
.glance__ptitle { display: flex; align-items: center; gap: .7rem; font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.glance__pintro { margin-top: .4rem; max-width: 30rem; font-size: .92rem; color: var(--ink-soft); }
.glance__panel--planned .glance__pintro, .glance__panel--awaiting .glance__pintro { font-style: italic; }
.glance__list { display: grid; gap: 1.6rem 2.5rem; margin-top: 1.75rem; }
@media (min-width: 560px) { .glance__list { grid-template-columns: 1fr 1fr; } .glance__list .is-wide { grid-column: 1 / -1; } }
.glance__list > div { padding-left: 1rem; border-left: 2px solid transparent; transition: border-color .4s var(--ease); }
.glance__panel--stated .glance__list > div { border-left-color: rgba(77, 122, 87, .28); }
.glance__panel--planned .glance__list > div { border-left-color: rgba(168, 129, 58, .32); }
.glance__panel--awaiting .glance__list > div { border-left: 2px dashed rgba(138, 127, 120, .45); }
@media (hover: hover) { .glance__list > div:hover { border-left-color: var(--ink); } }
.glance__list dt { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.glance__list dd { margin: .35rem 0 0; font: 500 1.28rem/1.35 var(--font-display); color: var(--ink); }
.glance__list dd small { display: block; margin-top: .35rem; font: 400 .84rem/1.5 var(--font-body); color: var(--muted); }
.glance__panel--awaiting dd { font-style: italic; color: var(--ink-soft); }

.glance__cta { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink-soft); }
.glance__num { flex-wrap: nowrap; white-space: nowrap; }
.glance__tab { white-space: nowrap; }
@media (min-width: 900px) { .glance__num { font-size: clamp(2.4rem, 4.1vw, 4.6rem); } }
@media (min-width: 1000px) and (max-width: 1279px) { .glance__tab .t-long { display: none; } .glance__tab .t-short { display: inline; } }