/* ============================================================
   petrichenko.org — CENTRAL THEME (single source of truth)
   Theme: "Field Guide" — bone paper, ink, one muted denim accent.
   Change tokens in :root to restyle the WHOLE site
   (landing, /california, /docs + all components).
   ============================================================ */
:root{
  --paper:#F2F0EA;  --paper-2:#E7E3D9;  --card:#FBFAF6;
  --ink:#1E1C1A;    --body:#46433E;     --muted:#7C776F;  --faint:#ADA89C;
  --line:#DED9CE;   --line-2:#CDC6B8;
  --pine:#3C5A7A;   --pine-dark:#2C455E;   /* accent (muted denim) */
  --ochre:#3C5A7A;  --ochre-soft:#E2E7EE;
  --clay:#3C5A7A;   --clay-soft:#E2E7EE;
  --tint:#ECE9E0;
  --danger:#9B4A3A;
  --radius:14px;    --radius-sm:9px;
  --shadow:0 1px 0 rgba(35,42,32,.05), 0 14px 34px -22px rgba(35,42,32,.45);
  --shadow-lift:0 2px 0 rgba(35,42,32,.06), 0 22px 44px -20px rgba(35,42,32,.5);
  --chart-1:#1E1C1A; --chart-2:#3C5A7A;
}

body{
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  color:var(--body);
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(60,90,122,.08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-attachment:fixed, fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.display{ font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; }
.mono{ font-family:"Space Mono","SFMono-Regular",monospace; }
.brand{ font-family:"Fraunces",Georgia,serif; }
h1,h2,h3,h4{ color:var(--ink); }

.tag{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--clay); }
.tag-pine{ color:var(--pine); }
.tag-muted{ color:var(--muted); }
.hairline{ height:1px; background:var(--line-2); }
.dotrule{ height:0; border-top:1px dashed var(--line-2); }
.divider{ height:1px; background:var(--line); }
.accent{ color:var(--pine-dark); }

/* surfaces — both the new (fg-*) and legacy (.card) names map to the same look */
.fg-card, .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.fg-card-int, .card-int{ transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.fg-card-int:hover, .card-int:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.fg-inset, .surface-2{ background:var(--tint); border:1px solid var(--line); border-radius:var(--radius); }
.card-dashed{ background:color-mix(in srgb, var(--card) 55%, transparent); border:1px dashed var(--line); border-radius:var(--radius); }

.chip{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.04em; background:var(--paper-2); color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:3px 10px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.chip-pine{ background:var(--pine); color:#F2F0EA; border-color:var(--pine); }
.chip-ochre{ background:var(--ochre-soft); color:#2C455E; border-color:transparent; }

.stamp{ font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--clay); border:1.5px solid var(--clay); border-radius:6px; padding:4px 8px; display:inline-flex; align-items:center; gap:6px; transform:rotate(-3deg); background:rgba(60,90,122,.07); }

.btn{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.06em; border-radius:999px; padding:9px 16px; transition:background .2s,color .2s,border-color .2s; border:1px solid var(--line-2); color:var(--ink); background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn:hover{ border-color:var(--ink); }
.btn-solid, .btn-accent{ background:var(--pine); color:#F2F0EA; border-color:var(--pine); border-radius:999px; }
.btn-solid:hover, .btn-accent:hover{ background:var(--pine-dark); }
.btn-ochre{ background:var(--ochre); color:#F2F0EA; border-color:var(--ochre); }
.btn-ochre:hover{ background:#2C455E; }

.daytab{ font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.04em; color:var(--muted); padding:8px 12px; border-radius:999px; border:1px solid transparent; transition:.18s; white-space:nowrap; cursor:pointer; }
.daytab:hover{ color:var(--ink); border-color:var(--line-2); }
.daytab.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.seq{ position:relative; }
.seq::before{ content:""; position:absolute; left:15px; top:10px; bottom:10px; width:2px; background:repeating-linear-gradient(var(--line-2) 0 6px, transparent 6px 12px); }
.node{ width:32px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--card); border:2px solid var(--line-2); font-size:14px; position:relative; z-index:1; flex:none; }
.node-pine{ border-color:var(--pine); }

.contour{ position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.55; }
.contour svg{ width:100%; height:100%; }
.contour path{ fill:none; stroke:var(--line-2); stroke-width:1.2; }

.hike-hero{ height:130px; background-size:cover; background-position:center; filter:saturate(.82) contrast(1.02); }

.map-wrapper{ position:relative; padding-bottom:52%; height:0; overflow:hidden; border-radius:var(--radius-sm); background:var(--tint); border:1px solid var(--line); }
.map-wrapper iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.rise{ animation:rise .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.custom-scrollbar::-webkit-scrollbar{ height:7px; width:7px; }
.custom-scrollbar::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:999px; }
.custom-scrollbar::-webkit-scrollbar-track{ background:transparent; }

.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* checklist / packing rows */
.ck-row .tick{ border:2px solid var(--line-2); color:transparent; transition:background .15s, border-color .15s; }
.ck-row.is-done .tick{ background:var(--pine); border-color:var(--pine); color:#F2F0EA; }
.ck-row .lbl{ color:var(--ink); }
.ck-row.is-done .lbl{ text-decoration:line-through; color:var(--muted); }