:root { --ink:#183b38; --teal:#1f665f; --terra:#b84f32; --sand:#ddb77e; --paper:#fbf6ec; --cream:#f2dfb8; --line:rgba(28,92,86,.17); --serif:'Playfair Display',serif; --sans:'DM Sans',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#dcefeb; font-family:var(--sans); }
body::before { content:''; position:fixed; z-index:-1; inset:0; opacity:.22; background-image:radial-gradient(circle at 15% 20%, rgba(184,79,50,.22) 0 2px, transparent 3px), linear-gradient(135deg, transparent 48%, rgba(31,102,95,.18) 49% 51%, transparent 52%); background-size:52px 52px, 110px 110px; }
a { color:inherit; }
.skip-link { position:fixed; z-index:20; left:1rem; top:-5rem; padding:.7rem 1rem; color:white; background:var(--teal); }
.skip-link:focus { top:1rem; }
.site-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem clamp(1rem,4vw,4rem); border-bottom:1px solid rgba(24,59,56,.12); background:rgba(251,246,236,.92); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand-mark { width:42px; height:42px; display:block; color:var(--terra); }
.brand-mark svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; }
.brand > span:last-child { display:grid; }
.brand strong { font:600 1.5rem var(--serif); line-height:1; }
.brand small { margin-top:.22rem; color:#6f7773; font-size:.57rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.back-link { display:inline-flex; align-items:center; gap:.45rem; padding:.65rem .9rem; border:1px solid var(--line); border-radius:999px; color:var(--teal); background:white; font-size:.84rem; font-weight:700; text-decoration:none; }
.dictionary-hero { min-height:570px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.85fr); align-items:center; gap:clamp(2rem,6vw,7rem); padding:clamp(3rem,7vw,7rem) clamp(1.2rem,7vw,8rem); overflow:hidden; background:linear-gradient(110deg,#f6e1b9 0%,#fbf6ec 62%,#e3f0e9 100%); }
.hero-copy { max-width:720px; }
.eyebrow { margin:0 0 .8rem; color:var(--terra); font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3 { font-family:var(--serif); }
h1 { max-width:760px; margin:0; font-size:clamp(3.2rem,7vw,6.8rem); line-height:.88; letter-spacing:-.045em; }
.hero-copy > p:not(.eyebrow) { max-width:660px; margin:1.4rem 0; color:#5f6d68; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.7; }
.ali-note { max-width:560px; display:grid; gap:.3rem; margin-top:2rem; padding:1rem 1.15rem; border-left:3px solid #dc944e; background:rgba(255,251,240,.72); transform:rotate(-.5deg); }
.ali-note span { color:var(--terra); font-size:.62rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.ali-note strong { font:600 1.05rem var(--serif); line-height:1.45; }
.hero-postcard { position:relative; width:min(460px,90%); aspect-ratio:.82; justify-self:center; padding:1rem; background:#fffaf0; box-shadow:20px 24px 0 rgba(197,147,84,.2),0 22px 60px rgba(59,76,69,.18); transform:rotate(2deg); }
.hero-arch { height:88%; overflow:hidden; border-radius:48% 48% 4px 4px; background:var(--teal); }
.hero-arch img { width:100%; height:100%; display:block; object-fit:cover; object-position:45% center; }
.hero-stamp { position:absolute; right:-2.2rem; top:2.6rem; width:126px; aspect-ratio:1; display:grid; place-content:center; text-align:center; border:2px solid #963e2e; border-radius:50%; color:#963e2e; background:rgba(255,249,235,.92); transform:rotate(-8deg); }
.hero-stamp strong { font:600 1.25rem var(--serif); }.hero-stamp small { margin-top:.25rem; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; }
.hero-caption { position:absolute; left:1.25rem; bottom:.8rem; color:#8a5a44; font:italic 1rem var(--serif); }
.dictionary-tools { position:sticky; z-index:5; top:76px; display:grid; gap:1rem; padding:1.2rem clamp(1rem,5vw,5rem); border-block:1px solid var(--line); background:rgba(251,246,236,.95); backdrop-filter:blur(16px); }
.search-field { display:grid; grid-template-columns:auto minmax(220px,520px); align-items:center; justify-content:center; gap:1rem; color:#65716c; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.search-field input { width:100%; border:0; border-bottom:2px solid var(--teal); padding:.7rem .25rem; color:var(--ink); background:transparent; font:500 1rem var(--sans); outline-offset:4px; }
.route-filters { display:flex; gap:.45rem; overflow-x:auto; padding:.15rem 0 .35rem; scrollbar-width:thin; }
.route-filters button { flex:0 0 auto; min-height:38px; border:1px solid var(--line); border-radius:999px; padding:.5rem .75rem; color:#46645f; background:#fffdf7; font:600 .75rem var(--sans); cursor:pointer; }
.route-filters button span { margin-right:.28rem; color:#b85b3e; }
.route-filters button.active { color:white; border-color:var(--teal); background:var(--teal); }
.route-filters button.active span { color:#f5ce82; }
.dictionary-section { padding:clamp(3rem,6vw,6rem) clamp(1rem,5vw,5rem) 7rem; background:var(--paper); scroll-margin-top:178px; }
.results-heading { max-width:1500px; display:flex; justify-content:space-between; gap:2rem; align-items:end; margin:0 auto 2rem; }
.results-heading h2 { margin:0; font-size:clamp(2.4rem,5vw,4.5rem); line-height:.95; }
.results-heading > p { color:#6d7772; font-size:.82rem; }
.station-grid { max-width:1500px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin:auto; }
.station-card { overflow:hidden; border:1px solid var(--line); background:#fffdf8; box-shadow:0 15px 42px rgba(43,72,67,.08); scroll-margin-top:178px; }
.station-visual { position:relative; min-height:230px; display:flex; align-items:end; padding:1.2rem; overflow:hidden; color:white; }
.station-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(15,48,45,.88)); }
.station-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.station-visual > div { position:relative; z-index:1; }
.station-visual small { font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.station-visual h3 { margin:.2rem 0 0; font-size:clamp(1.75rem,3vw,2.5rem); line-height:1; }
.station-number { position:absolute; z-index:2; top:1rem; right:1rem; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.75); border-radius:50%; background:rgba(24,74,69,.72); font-weight:800; }
.station-content { display:grid; grid-template-columns:.8fr 1.2fr; gap:1.2rem; padding:1.3rem; }
.station-content h4 { margin:0 0 .8rem; color:#a94c34; font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; }
.core-phrases dl, .pocket-phrases dl { display:grid; gap:0; margin:0; }
.core-phrases dl > div, .pocket-phrases dl > div { display:grid; grid-template-columns:minmax(110px,.8fr) 1.2fr; gap:.8rem; padding:.58rem 0; border-bottom:1px solid rgba(31,102,95,.1); }
.core-phrases dl > div { margin-bottom:.32rem; padding:.62rem .7rem; border:1px solid rgba(31,102,95,.14); background:#edf5ef; }
.core-phrases dt, .pocket-phrases dt { color:#1c5e58; font-weight:700; }
.core-phrases dt { font-family:var(--serif); }
.core-phrases dd, .pocket-phrases dd { margin:0; color:#707975; }
.core-phrases dd { color:#9b4b35; }
.empty-state { max-width:660px; margin:4rem auto; padding:2rem; text-align:center; border:1px dashed rgba(184,79,50,.35); background:#fff8df; }
.empty-state strong { font:600 1.5rem var(--serif); }.empty-state p { color:#6d7772; }
footer { display:flex; justify-content:space-between; gap:2rem; align-items:center; padding:2rem clamp(1rem,5vw,5rem); color:#f8f0df; background:#183b38; }
footer p { margin:0; font:italic 1.05rem var(--serif); } footer a { color:#f3cc82; font-weight:700; text-decoration:none; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid #e5a757; outline-offset:3px; }
@media (max-width:900px) {
  .dictionary-hero { min-height:0; grid-template-columns:1fr; padding-top:4rem; }
  .hero-postcard { width:min(380px,84%); }
  .station-grid { grid-template-columns:1fr; }
  .search-field { grid-template-columns:1fr; justify-content:stretch; gap:.35rem; }
  .dictionary-tools { top:68px; }
}
@media (max-width:620px) {
  .site-header { min-height:66px; }.back-link { padding:.55rem; font-size:.72rem; }.back-link span { display:none; }
  h1 { font-size:clamp(3rem,16vw,4.6rem); }
  .dictionary-hero { padding-inline:1rem; }
  .hero-postcard { width:80%; }.hero-stamp { width:92px; right:-1.2rem; }
  .dictionary-tools { position:relative; padding-inline:1rem; }
  .dictionary-section, .station-card { scroll-margin-top:76px; }
  .results-heading { display:block; }.results-heading > p { margin-top:.8rem; }
  .station-visual { min-height:190px; }
  .station-content { grid-template-columns:1fr; }
  .core-phrases dl > div, .pocket-phrases dl > div { grid-template-columns:1fr; gap:.1rem; }
  footer { align-items:flex-start; flex-direction:column; }
}