/* Explore and Write — warm editorial travel journal */
:root{
  --paper:#FCF8F1; --paper-2:#F4EDE1; --card:#FFFDF9;
  --ink:#221E1A; --ink-2:#453D35; --muted:#7A6E60;
  --rule:#E4D9C7; --rule-2:#D3C4AC;
  --accent:#25474D; --accent-d:#16333A; --camel:#A78463; --camel-d:#87684A;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(60,40,20,.05),0 8px 24px -12px rgba(60,40,20,.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:18px;line-height:1.62;
  background-image:radial-gradient(circle at 12% 8%,rgba(37,71,77,.05),transparent 46%),
                   radial-gradient(circle at 88% 4%,rgba(167,132,99,.07),transparent 42%);
  background-attachment:fixed;}
.wrap{width:min(1140px,92vw);margin-inline:auto}
a{color:var(--accent-d);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent)}
img{max-width:100%}

/* masthead */
.masthead{border-bottom:1px solid var(--rule);background:rgba(251,247,240,.92);
  backdrop-filter:saturate(1.4) blur(8px);position:sticky;top:0;z-index:40}
.mast-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-mark{width:42px;height:42px;object-fit:contain;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{font-size:19px;letter-spacing:.005em}
.brand-text em{font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.nav a{color:var(--ink-2);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--accent)}
.nav a.on{border-bottom-color:var(--accent);color:var(--accent-d)}

/* hero */
.hero{border-bottom:1px solid var(--rule);background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.hero-inner{padding:86px 0 66px;text-align:center}
.hero-kicker{font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin:0 0 20px}
.hero-title{margin:0;line-height:1}
.hero-title img{width:min(620px,88vw);height:auto;display:block;margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-title .amp{display:block;font-style:italic;font-size:.42em;color:var(--camel-d);letter-spacing:.02em;
  margin:.12em 0;font-weight:400}
.hero-lede{max-width:44rem;margin:30px auto 0;font-size:20px;color:var(--ink-2)}
.hero-actions{margin:34px 0 0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:0;justify-content:center;flex-wrap:wrap;margin:52px auto 0;
  border-top:1px solid var(--rule-2);padding-top:26px;max-width:40rem}
.hero-stats > div{padding:0 26px;border-right:1px solid var(--rule)}
.hero-stats > div:last-child{border-right:0}
.hero-stats dt{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero-stats dd{margin:4px 0 0;font-size:30px;line-height:1}

.btn{display:inline-block;font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 22px;border-radius:2px;background:var(--accent);color:#FFF6EC;text-decoration:none;
  border:1px solid var(--accent);transition:.15s}
.btn:hover{background:var(--accent-d);border-color:var(--accent-d);color:#FFF6EC}
.btn.ghost{background:transparent;color:var(--accent-d);border-color:var(--rule-2)}
.btn.ghost:hover{background:#fff;border-color:var(--accent)}

/* bands + grids */
.band{padding:64px 0 8px}
.band-title,.sec-bar h2{font-size:14px;font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0 0 22px}
.sec-bar h2 a{color:var(--muted);text-decoration:none}
.sec-bar h2 a:hover{color:var(--accent)}
.home-sec{padding:56px 0;border-top:1px solid var(--rule)}
.sec-bar{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.sec-bar h2{margin:0}
.sec-bar p{margin:0;flex:1;min-width:16rem;color:var(--ink-2);font-size:17px}
.sec-all{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.grid.feat{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);
  border-radius:3px;padding:24px 24px 20px;text-decoration:none;color:inherit;
  box-shadow:var(--shadow);transition:.18s;position:relative}
.card:hover{transform:translateY(-2px);border-color:var(--rule-2);color:inherit;
  box-shadow:0 2px 4px rgba(60,40,20,.06),0 16px 34px -16px rgba(60,40,20,.28)}
.card-meta{font-family:var(--sans);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--camel-d);}
.card h3{margin:11px 0 9px;font-size:24px;line-height:1.2;font-weight:400}
.card p{margin:0;color:var(--ink-2);font-size:16.5px;line-height:1.55;flex:1}
.card-go{margin-top:18px;font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card:hover .card-go{color:var(--accent)}
.card.big{background:linear-gradient(170deg,#FFFDF8,#F6EFE3);border-color:var(--rule-2)}
.card.big h3{font-size:29px}

/* section index */
.sec-head{padding:64px 0 40px;max-width:44rem}
.sec-kicker{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0}
.sec-head h1{font-size:clamp(40px,6vw,64px);margin:10px 0 16px;font-weight:400;letter-spacing:-.015em}
.sec-intro{margin:0;font-size:20px;color:var(--ink-2)}
.sec-count{font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:20px 0 0}
.page-sec main .grid{padding-bottom:70px}

/* reading */
.crumb{font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;margin:30px 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.reading{max-width:min(50rem,92vw)}
.piece-head{padding:26px 0 30px;border-bottom:1px solid var(--rule);margin-bottom:34px}
.piece-meta{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--camel-d);margin:0}
.piece-head h1{font-size:clamp(34px,5.2vw,54px);line-height:1.08;margin:14px 0 14px;font-weight:400;letter-spacing:-.015em}
.piece-blurb{margin:0;font-size:19.5px;color:var(--ink-2);font-style:italic}
.prose{font-size:18.5px}
.prose h2{font-size:29px;font-weight:400;margin:2.2em 0 .5em;line-height:1.2;
  padding-bottom:.3em;border-bottom:1px solid var(--rule)}
.prose h3{font-size:22px;font-weight:600;margin:1.9em 0 .4em}
.prose h4{font-size:17px;font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:1.7em 0 .4em}
.prose p{margin:0 0 1.15em}
.prose strong{font-weight:600}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.42em}
.prose blockquote{margin:1.4em 0;padding:2px 0 2px 22px;border-left:3px solid var(--accent);color:var(--ink-2);font-style:italic}
.prose hr{border:0;border-top:1px solid var(--rule-2);margin:2.6em auto;width:42%}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;padding:1px 5px}
.prose pre{background:#2C2620;color:#F3EADC;padding:18px;border-radius:3px;overflow:auto;font-size:14px}
.prose pre code{background:none;border:0;color:inherit;padding:0}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:16px;
  background:var(--card);border:1px solid var(--rule);display:block;overflow-x:auto}
.prose thead th{background:var(--paper-2);font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);text-align:left;font-weight:600}
.prose th,.prose td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:0}
.prose em{font-style:italic}
.prose > p:first-of-type{font-size:20px;color:var(--ink-2)}

.toc{background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;padding:18px 24px 10px;margin:0 0 38px}
.toc-title{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.toc ul{list-style:none;padding-left:0;margin:0 0 10px;font-size:16px;columns:2;column-gap:34px}

.toc li{margin-bottom:5px;break-inside:avoid}
.toc a{text-decoration:none;color:var(--ink-2)}
.toc a:hover{color:var(--accent)}

.piece-foot{margin:3em 0 0;padding-top:1.2em;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.siblings{display:flex;gap:14px;flex-wrap:wrap;margin:56px 0 80px}
.sib{flex:1;min-width:230px;background:var(--card);border:1px solid var(--rule);border-radius:3px;
  padding:16px 20px;text-decoration:none;color:inherit;font-size:19px;transition:.15s}
.sib:hover{border-color:var(--accent);color:inherit}
.sib span{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.sib.next{text-align:right}

/* embeds */
.embed-page{padding-bottom:70px}
.embed-head{border-bottom:0;margin-bottom:20px;padding-bottom:8px;max-width:46rem}
.embed-actions{margin:22px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.frame-shell{border:1px solid var(--rule-2);border-radius:4px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow);height:min(78vh,900px)}
.live-frame{width:100%;height:100%;border:0;display:block}
.frame-note{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin:12px 0 0}

/* phrasebook */
.phrase-page{padding-bottom:80px;max-width:min(62rem,92vw)}
.pb-controls{display:flex;flex-direction:column;gap:18px;margin-bottom:14px}
.pb-langs{display:flex;flex-wrap:wrap;gap:8px}
.pb-lang{cursor:pointer;font-family:var(--sans);background:var(--card);border:1px solid var(--rule);
  border-radius:3px;padding:8px 13px;text-align:left;color:var(--ink-2);transition:.14s;line-height:1.25}
.pb-lang b{display:block;font-size:14px;font-weight:600}
.pb-lang em{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:2px}
.pb-lang:hover{border-color:var(--rule-2)}
.pb-lang.on{background:var(--accent);border-color:var(--accent);color:#FFF6EC}
.pb-lang.on em{color:rgba(255,246,236,.78)}
#pbSearch{width:100%;font-family:var(--serif);font-size:17px;padding:13px 16px;background:var(--card);
  border:1px solid var(--rule-2);border-radius:3px;color:var(--ink)}
#pbSearch:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.pb-hint{margin:14px 0 0;color:var(--ink-2);font-size:16.5px}
.pb-count{font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:0 0 26px}
.pb-cat{margin-bottom:38px}
.pb-cat h2{font-size:23px;font-weight:400;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.pb-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--rule);font-size:17px}
.pb-table th{background:var(--paper-2);text-align:left;font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);padding:9px 14px;border-bottom:1px solid var(--rule)}
.pb-table td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.pb-table tr:last-child td{border-bottom:0}
.pb-table .en{width:34%;color:var(--ink-2)}
.pb-table .tgt{width:36%;font-weight:600}
.pb-table .pro{width:30%;font-family:var(--sans);font-size:14px;color:var(--muted)}
.pb-empty{color:var(--muted);font-style:italic;padding:30px 0}
/* footer */
.foot{border-top:1px solid var(--rule);background:var(--paper-2);margin-top:0}
.foot-inner{padding:56px 0;text-align:center}
.foot-shield{width:58px;height:auto;display:block;margin:0 auto 14px;opacity:.9}
.foot-mark{font-size:26px;margin:0 0 12px}
.foot-mark em{color:var(--camel-d);font-size:.7em}
.foot-note{max-width:40rem;margin:0 auto;color:var(--muted);font-size:16px}
.foot-links{margin:24px 0 0;font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--rule-2)}
.foot-links a{text-decoration:none;color:var(--ink-2)}
.foot-links a:hover{color:var(--accent)}

@media (max-width:640px){
  body{font-size:17px}
  .hero-inner{padding:56px 0 44px}
  .hero-stats > div{padding:0 16px}
  .toc ul{columns:1}
  .frame-shell{height:70vh}
  .pb-table{font-size:15.5px}
  .pb-table .pro{display:none}
}
@media print{
  .masthead,.foot,.siblings,.crumb,.pb-controls,.embed-actions,.frame-note{display:none}
  body{background:#fff}
}

/* masthead wordmark links + hero text lockup (added 9 Aug 2026) */
.brand-home{display:flex;text-decoration:none}
.brand-text b a{color:inherit;text-decoration:none}
.brand-text b a:hover{color:var(--accent)}
.mast-and{color:var(--camel-d);font-weight:400}
.hero-lockup{font-weight:700;text-transform:uppercase;letter-spacing:.045em;line-height:.98;
  font-size:clamp(54px,8.6vw,100px)}
.hero-lockup a{text-decoration:none;transition:color .15s}
.hero-lockup .x{display:block;color:var(--accent)}
.hero-lockup .x:hover{color:var(--accent-d)}
.hero-line2{display:block;white-space:nowrap}
.hero-lockup .and{font-style:italic;font-weight:400;text-transform:none;color:var(--camel-d);
  font-size:.44em;letter-spacing:.01em;margin-right:.22em;vertical-align:.1em}
.hero-lockup .w{color:var(--camel)}
.hero-lockup .w:hover{color:var(--camel-d)}