/* Laurel & Lava — a guide to Madeira (sea to summit). Light, botanical, topographic. */

:root{
  --ll-bg:#F4F6F1;
  --ll-surface:#FBFCF9;
  --ll-surface-2:#EDF1EA;
  --ll-ink:#17251C;
  --ll-body:#3A473F;
  --ll-mute:#7B897E;
  --ll-line:#D9E0D4;
  --ll-laurel:#2F6B4E;   /* primary — laurel forest */
  --ll-atlantic:#0F6E88; /* secondary — the sea */
  --ll-lava:#C0512B;     /* accent — volcanic rock, elevation tags */
  --ll-max:1060px;
  --ll-read:42rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ll-bg);color:var(--ll-body);
  font-family:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px;line-height:1.68;font-weight:400;-webkit-font-smoothing:antialiased;
  text-underline-offset:2px;
}
img{max-width:100%;display:block}
a{color:var(--ll-laurel)}
::selection{background:var(--ll-laurel);color:#fff}

.ll-wrap{max-width:var(--ll-max);margin:0 auto;padding:0 26px}
.mono{font-family:"Spline Sans Mono",ui-monospace,monospace}

/* ---- header ---- */
.ll-head{border-bottom:1px solid var(--ll-line);background:var(--ll-bg);position:sticky;top:0;z-index:20}
.ll-head-in{max-width:var(--ll-max);margin:0 auto;padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ll-brand{text-decoration:none;display:flex;flex-direction:column;line-height:1.05}
.ll-brand b{font-family:"Young Serif",serif;font-weight:400;font-size:23px;color:var(--ll-ink);letter-spacing:.01em}
.ll-brand b em{font-style:normal;color:var(--ll-lava)}
.ll-brand span{font-family:"Spline Sans Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ll-mute);margin-top:3px}
.ll-nav{display:flex;gap:20px;flex-wrap:wrap;font-size:15px;font-weight:600}
.ll-nav a{text-decoration:none;color:var(--ll-body);padding-bottom:3px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.ll-nav a:hover{color:var(--ll-laurel);border-color:var(--ll-laurel)}

/* ---- hero ---- */
.ll-hero{padding:66px 0 30px;border-bottom:1px solid var(--ll-line)}
.ll-hero h1{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(2.5rem,6vw,4.3rem);line-height:1.02;color:var(--ll-ink);margin:0 0 22px;max-width:16ch}
.ll-hero h1 em{font-style:normal;color:var(--ll-laurel)}
.ll-lead{font-size:clamp(1.08rem,2.2vw,1.32rem);max-width:52ch;margin:0 0 26px;color:var(--ll-body)}
.ll-facts{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:"Spline Sans Mono",monospace;font-size:12px;letter-spacing:.04em;color:var(--ll-mute);border-top:1px dashed var(--ll-line);padding-top:18px}
.ll-facts b{color:var(--ll-lava);font-weight:500}

/* ---- region sections ---- */
.ll-section{padding:44px 0 6px}
.ll-section-head{display:flex;align-items:baseline;gap:16px;margin:0 0 8px;padding-bottom:12px;border-bottom:2px solid var(--ll-ink)}
.ll-elev{font-family:"Spline Sans Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--ll-lava);flex:0 0 auto;white-space:nowrap}
.ll-section-head h2{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--ll-ink);margin:0;line-height:1.05}
.ll-section-head .ll-count{margin-left:auto;font-family:"Spline Sans Mono",monospace;font-size:11.5px;color:var(--ll-mute);flex:0 0 auto}
.ll-intro{max-width:58ch;margin:14px 0 4px;color:var(--ll-body)}

/* ---- wide horizontal cards ---- */
.ll-list{display:flex;flex-direction:column}
.ll-card{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:center;padding:24px 0;border-bottom:1px solid var(--ll-line);text-decoration:none;color:inherit}
.ll-card:first-child{border-top:1px solid var(--ll-line)}
.ll-card-media{aspect-ratio:5/4;border-radius:7px;overflow:hidden;background:var(--ll-surface-2)}
.ll-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ll-card:hover .ll-card-media img{transform:scale(1.04)}
.ll-card-meta{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ll-mute);margin:0 0 9px;display:flex;gap:12px;flex-wrap:wrap}
.ll-card-meta .alt{color:var(--ll-lava)}
.ll-card-title{font-family:"Young Serif",serif;font-weight:400;font-size:1.5rem;line-height:1.12;color:var(--ll-ink);margin:0 0 8px;transition:color .15s}
.ll-card:hover .ll-card-title{color:var(--ll-laurel)}
.ll-card-dek{margin:0;color:var(--ll-body);font-size:1rem;max-width:54ch}

/* ---- article ---- */
.ll-article{padding-bottom:24px}
.ll-art-hero{margin:0 auto;max-width:var(--ll-max);padding:26px 26px 0}
.ll-art-hero img{width:100%;max-height:60vh;object-fit:cover;border-radius:8px}
.ll-art-figcap{font-family:"Spline Sans Mono",monospace;font-size:11px;color:var(--ll-mute);margin:8px 2px 0;letter-spacing:.02em}
.ll-art-head{max-width:var(--ll-read);margin:0 auto;padding:26px 26px 0}
.ll-eyebrow{font-family:"Spline Sans Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ll-lava);margin:0 0 14px}
.ll-art-head h1{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.06;color:var(--ll-ink);margin:0 0 16px}
.ll-stand{font-size:1.2rem;color:var(--ll-body);margin:0}

.ll-body{max-width:var(--ll-read);margin:0 auto;padding:8px 26px 0}
.ll-body>p:first-of-type::first-letter{font-family:"Young Serif",serif;font-size:3.1rem;line-height:.8;float:left;margin:6px 10px 0 0;color:var(--ll-laurel)}
.ll-body p{margin:0 0 20px}
.ll-body h2{font-family:"Young Serif",serif;font-weight:400;font-size:1.65rem;color:var(--ll-ink);margin:40px 0 12px;line-height:1.12}
.ll-body h3{font-family:"Figtree",sans-serif;font-weight:700;font-size:1.18rem;color:var(--ll-ink);margin:26px 0 8px}
.ll-body a{color:var(--ll-atlantic);text-decoration:underline;text-decoration-color:rgba(15,110,136,.4)}
.ll-body a:hover{text-decoration-color:var(--ll-atlantic)}
.ll-body ul,.ll-body ol{margin:0 0 20px;padding-left:1.3em}
.ll-body li{margin:0 0 7px}
.ll-body figure{margin:30px 0}
.ll-body figure img{border-radius:7px;width:100%}
.ll-body figcaption{font-family:"Spline Sans Mono",monospace;font-size:11.5px;color:var(--ll-mute);margin-top:9px}
.ll-pull{border-left:3px solid var(--ll-lava);margin:30px 0;padding:2px 0 2px 22px;font-family:"Young Serif",serif;font-size:1.4rem;line-height:1.3;color:var(--ll-ink)}
.ll-note{background:var(--ll-surface-2);border-radius:8px;padding:18px 22px;margin:30px 0;font-size:.98rem}
.ll-note b{display:block;font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ll-laurel);margin-bottom:6px}

/* trail / at-a-glance fact box for walks & peaks */
.ll-trail{border:1px solid var(--ll-line);border-top:3px solid var(--ll-laurel);border-radius:8px;padding:18px 22px;margin:30px 0;background:var(--ll-surface)}
.ll-trail h4{margin:0 0 12px;font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ll-mute);font-weight:500}
.ll-trail dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px 20px;margin:0}
.ll-trail dt{font-family:"Spline Sans Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ll-mute)}
.ll-trail dd{margin:2px 0 0;font-size:1.05rem;color:var(--ll-ink);font-weight:600}

.ll-table{width:100%;border-collapse:collapse;margin:26px 0;font-size:.95rem}
.ll-table th,.ll-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--ll-line)}
.ll-table th{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ll-mute);font-weight:500}
.ll-table tr:hover td{background:var(--ll-surface)}

.ll-related{max-width:var(--ll-max);margin:46px auto 0;padding:26px 26px 0;border-top:1px solid var(--ll-line)}
.ll-related h2{font-family:"Spline Sans Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ll-mute);font-weight:500;margin:0 0 16px}
.ll-related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 30px}
.ll-related a{display:block;text-decoration:none;padding:11px 0;border-top:1px solid var(--ll-line);font-family:"Young Serif",serif;font-size:1.1rem;color:var(--ll-ink);transition:color .15s}
.ll-related a:hover{color:var(--ll-laurel)}

/* ---- about ---- */
.ll-about{max-width:var(--ll-read);margin:0 auto;padding:60px 26px 10px}
.ll-about h1{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(2.1rem,4.6vw,3.1rem);color:var(--ll-ink);margin:0 0 22px;line-height:1.05}
.ll-about h2{font-family:"Young Serif",serif;font-weight:400;font-size:1.5rem;color:var(--ll-ink);margin:36px 0 12px}
.ll-about p{margin:0 0 18px}
.ll-about p:first-of-type{font-size:1.2rem;color:var(--ll-ink)}

/* ---- footer ---- */
.ll-foot{border-top:1px solid var(--ll-line);margin-top:64px;padding:44px 0 56px;background:var(--ll-surface)}
.ll-foot-in{max-width:var(--ll-max);margin:0 auto;padding:0 26px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.ll-foot-mark{font-family:"Young Serif",serif;font-size:1.7rem;color:var(--ll-ink);margin:0 0 8px}
.ll-foot-mark em{font-style:normal;color:var(--ll-lava)}
.ll-foot p{margin:0;max-width:46ch;color:var(--ll-mute);font-size:.95rem}
.ll-foot-base{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.05em;color:var(--ll-mute);text-align:right}
.ll-foot-base a{color:var(--ll-mute);text-decoration:none}
.ll-foot-base a:hover{color:var(--ll-laurel)}

/* ---- responsive ---- */
@media (max-width:720px){
  body{font-size:17px}
  .ll-card{grid-template-columns:1fr;gap:14px}
  .ll-card-media{aspect-ratio:16/9}
  .ll-foot-in{flex-direction:column;align-items:flex-start}
  .ll-foot-base{text-align:left}
}
@media (max-width:520px){
  .ll-wrap,.ll-head-in,.ll-art-head,.ll-body,.ll-related,.ll-foot-in,.ll-art-hero{padding-left:18px;padding-right:18px}
  .ll-hero{padding-top:44px}
}