/* Feng Shui Pack — design layer (option D, "distance from the edge").
 *
 * COLOUR, sampled from the two flags rather than guessed:
 *   --blue  Idaho's field, and the city field alongside it
 *   --gold  the Idaho seal ring, darkened for text where AA demands it
 * Semantics: BLUE = the city and the river · GOLD = the foothills and the dry country.
 * The reach grid takes its row colours from that rule, so it teaches itself.
 */
/* COLOUR from the SUBJECT — the five elements, the tradition's own system, since there is no flag
   here as there was for the city sites. Two of them carry the argument:
     RED = what the tradition holds · GREEN = the practical reason, where there is one. */
:root{
  --ui:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --red:#A8402C; --red-ink:#8A3323; --red-soft:#FBF1EE;
  --green:#3F6B54; --green-ink:#2F5340; --green-soft:#EFF5F1;
  --ochre:#8A6528; --ochre-bright:#D6A94E;
  --ink:#1F1D1A; --mid:#57534C; --small:#6B6660;
  --line:#E4DFD6; --rule:#D2CBBE; --paper:#FBF9F5; --sunk:#F5F2EB; --card:#fff; --no:#8A3323;
  --blue:#A8402C; --blue-ink:#8A3323; --blue-soft:#FBF1EE;   /* cloned-layer aliases */
  --goldbright:#D6A94E; --gold:#8A6528; --gold-soft:#FDF8EC;
}

/* ─────────────────────────────────────────────────────────────────────── furniture */
body{background:var(--paper);color:var(--ink);font-family:var(--ui)}
.fsp-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
@media(max-width:600px){.fsp-wrap{padding:0 16px}}

.site-header{border-bottom:3px solid var(--blue)}
.inside-header{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-top:14px!important;
  padding-bottom:11px!important}
/* DO NOT make .site-branding shrinkable. Curing a 375 overflow that way let the nav (flex:1 1 auto)
   crush the tagline to ONE CHARACTER PER LINE at desktop on a sibling build. */
.site-branding{flex:0 0 auto}
.main-navigation{flex:0 1 auto;margin-left:auto}
.site-title{font:700 25px/1 var(--serif);letter-spacing:-.02em}
.site-title a{text-decoration:none;color:var(--ink)}
.site-description{margin-top:5px;font:500 10.5px/1.4 var(--mono);letter-spacing:.19em;
  text-transform:uppercase;color:var(--small)}
.main-navigation .main-nav ul li a{font:500 13.5px/1 var(--ui);color:var(--mid);padding:9px 11px}
.main-navigation .main-nav ul li a:hover{color:var(--blue)}
@media(max-width:600px){.inside-header{flex-direction:column;align-items:flex-start}
  .main-navigation{margin-left:0;width:100%}}

/* ───────────────────────────────────────────────────────────────────────────── hero */
.fsp-hero{position:relative;overflow:hidden;background:#00234D}
/* The subject sits along the middle band of a 3.4:1 source, so centre is the right slice; and the
   band is tall enough that the photograph is the point rather than a letterbox. */
.fsp-hero img{width:100%;height:clamp(280px,42vw,600px);object-fit:cover;object-position:center 52%;
  display:block}
.fsp-hero .cap{background:linear-gradient(180deg,#00234D,#003776);padding:22px 0 26px}
.fsp-hero .kick{margin:0 0 11px;font:500 10px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--goldbright)}
.fsp-hero h1{margin:0;font:700 clamp(26px,3.3vw,40px)/1.14 var(--serif);letter-spacing:-.028em;
  color:#fff;max-width:23ch}
.fsp-hero .sf{margin:11px 0 0;max-width:64ch;font-size:16px;line-height:1.56;color:#C9D8E8}
.fsp-credit{margin:0;padding:7px 0 0;font:400 11px/1.5 var(--mono);color:var(--small)}

/* ──────────────────────────────────────────────────────────────── section furniture */
.fsp-sec{padding:30px 0}
.fsp-sec.alt{background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fsp-k{margin:0 0 7px;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue)}
.fsp-k.g{color:var(--gold)}
.fsp-t{margin:0;font:700 clamp(21px,2.4vw,29px)/1.18 var(--serif);letter-spacing:-.024em}
.fsp-l{margin:9px 0 0;max-width:76ch;font-size:15px;line-height:1.55;color:var(--mid)}

/* ────────────────────────────────────────── THE ROOMS (option A), thumbnails carrying weight */
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;margin-top:18px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.rm{background:var(--card);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;text-decoration:none;color:inherit}
/* OWNER: thumbnails more present. 210px rather than the preview's 150 — the picture identifies the
   room faster than the heading does, so it should lead.
   Scoped (0,2,0): `.entry-content img{height:auto}` is (0,1,1) and silently beats a bare class,
   which made every thumbnail on a sibling site render at its source ratio. */
.rm>.rm-im{display:block;width:100%;height:210px;object-fit:cover;background:var(--sunk)}
.rm .tx{padding:14px 16px 16px}
.rm b{display:block;font:700 19px/1.2 var(--serif)}
.rm .ds{display:block;margin-top:7px;font-size:14px;line-height:1.5;color:var(--mid)}
.rm em{display:block;margin-top:9px;font-style:normal;font:500 10.5px/1.5 var(--mono);
  letter-spacing:.06em;color:var(--red-ink)}
.rm:hover{background:var(--sunk)}
@media(max-width:600px){.rm>.rm-im{height:180px}}

/* ────────────────────────────────────────────────────────── THE SPLIT (option D) */
.split{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule)}
.sh{padding:12px 16px;font:600 10.5px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase}
.sh.t1{background:var(--red);color:#fff}
.sh.t2{background:var(--green);color:#fff}
.sp{padding:15px 16px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.56}
.sp.t1{background:var(--red-soft);color:var(--red-ink)}
.sp.t2{background:var(--green-soft);color:var(--green-ink);display:flex;align-items:center}
.sp a{text-decoration:none}
.sp b{display:block;margin-bottom:6px;font:700 16px/1.26 var(--serif);color:var(--ink)}
.sp a:hover b{text-decoration:underline}
.sp em{display:block;margin-top:8px;font-style:normal;font:500 10.5px/1.4 var(--mono);opacity:.78}
@media(max-width:760px){.split{grid-template-columns:1fr}
  .sh.t2{border-top:1px solid var(--line)}
  .sp.t2{border-top:0;padding-top:0}}

/* ───────────────────────────── THE STANDING RULES, reduced to a strip (owner's note) */
/* This was a full three-column table taking a whole screen. It is a standing disclosure, not a
   feature: the reader needs it available, not shouted. Same six commitments, a fraction of the
   height. */
.fsp-rules{padding:16px 0 18px;background:var(--sunk);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.rl-h{margin:0 0 8px;font:600 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--small)}
.rl-h span{color:var(--rule)}
.rl{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2px 26px}
.rl li{display:grid;grid-template-columns:72px 1fr 1fr;gap:10px;align-items:baseline;
  padding:4px 0;font-size:12.5px;line-height:1.45}
.rl b{font:600 11px/1.5 var(--mono);color:var(--ink)}
.rl .y{color:var(--green-ink)}
.rl .n{color:var(--red-ink)}
.rl .n::before{content:"not ";opacity:.6}
@media(max-width:620px){.rl li{grid-template-columns:68px 1fr}.rl .n{grid-column:2}}

/* the key strip that states the colour rule once, near the top */
.key{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;padding:11px 14px;background:var(--sunk);
  border:1px solid var(--line)}
.key span{display:flex;align-items:center;gap:8px;font:500 11.5px/1.4 var(--mono);color:var(--mid)}
.key i{width:11px;height:11px;display:block;flex:0 0 auto}
.key .r{background:var(--red)}
.key .g{background:var(--green)}
.lede h1{margin:0;font:700 clamp(26px,3.2vw,39px)/1.15 var(--serif);letter-spacing:-.026em;
  max-width:22ch}

/* ──────────────────────────────────────────────────────── the standing-rules table */
.alm{margin-top:16px;border:1px solid var(--rule);background:var(--card)}
.alm-head,.alm-row{display:grid;grid-template-columns:.6fr 1.25fr 1.25fr}
.alm-head{background:var(--blue);color:#fff}
.alm-head>div{padding:10px 14px;font:600 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.alm-head>div:nth-child(3){color:#FFE79A}
.alm-row{border-top:1px solid var(--line)}
.alm-row>div{padding:10px 13px;font-size:14px;line-height:1.48}
.alm-row>div:first-child{font:500 13px/1.4 var(--mono);background:var(--sunk)}
.alm-row .yes{color:var(--mid)}
.alm-row .no{color:var(--no);background:#FDF8EA}
@media(max-width:840px){.alm-head{display:none}.alm-row{grid-template-columns:1fr}
  .alm-row>div+div::before{display:block;margin-bottom:4px;font:600 9.5px/1 var(--mono);
    letter-spacing:.14em;text-transform:uppercase;color:var(--small)}
  .alm-row .yes::before{content:"What we can tell you"}
  .alm-row .no::before{content:"What we will not"}}

/* ───────────────────────────────────────────────────────────────────────── latest */
.reads{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.reads li{border-bottom:1px solid var(--line)}
.reads a{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:baseline;
  padding:11px 0;text-decoration:none;color:inherit}
.reads .n{font:500 11px/1.5 var(--mono);color:var(--small)}
.reads b{font:600 15px/1.35 var(--ui)}
.reads em{font-style:normal;font:500 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold)}
.reads a:hover b{color:var(--blue)}
@media(max-width:600px){.reads a{grid-template-columns:30px 1fr}.reads em{grid-column:2}}

/* ─────────────────────────────────────────────────────────────────── category tiles */
/* auto-fit, never a fixed column count: the tiles are queried with hide_empty, so during seeding
   there are fewer than ten and a fixed grid leaves dead cells at the end of the row.
   AND the rules are drawn with BORDERS, not a background showing through 1px gaps — the gap
   technique paints the empty cells of a partial last row as solid blocks, which is exactly what
   the owner spotted on the option-D preview. */
.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0;margin-top:16px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cg a{background:var(--card);text-decoration:none;color:inherit;display:flex;flex-direction:column;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  border-top:3px solid transparent}
.cg a:hover{border-top-color:var(--goldbright);background:var(--sunk)}
/* OWNER: thumbnails more present — 132px rather than 88. */
.cg a>.cg-im{display:block;width:100%;height:132px;object-fit:cover;background:var(--sunk)}
.cg-tx{display:block;padding:11px 13px 13px}
.cg b{display:block;font:600 14.5px/1.24 var(--ui)}
.cg .cg-tx>span{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--mid)}
@media(max-width:1000px){.cg{grid-template-columns:repeat(2,1fr)}.cg a>.cg-im{height:150px}}
@media(max-width:520px){.cg{grid-template-columns:1fr}.cg a>.cg-im{height:170px}}

/* ─────────────────────────────────────────────────────────────── where this site stops */
.fsp-stop{background:#0E1A26;color:#D9E3EE;padding:30px 0}
.fsp-stop h2{margin:0;font:700 clamp(20px,2.3vw,27px)/1.18 var(--serif);color:#fff}
.fsp-stop>.fsp-wrap>p{margin:10px 0 0;max-width:74ch;font-size:15px;color:#A7B6C6}
.sl{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:#1B2A3A;border:1px solid #1B2A3A}
.sl li{background:#0E1A26;padding:13px 15px 15px;border-left:3px solid var(--goldbright)}
.sl b{display:block;font:600 14.5px/1.28 var(--ui);color:#fff}
.sl span{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:#A7B6C6}
@media(max-width:760px){.sl{grid-template-columns:1fr}}
.adzone{padding:24px 0;background:var(--sunk);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}

/* The static front page renders its own title ("Feng Shui Pack") immediately above the hero, one
   line under the identical wordmark. Hide it on the home page only — the same markup is the real
   headline everywhere else. */
body.home .entry-header,body.home .page-header,body.home .entry-title{display:none}
body.home .inside-article{padding:0;border:0;background:transparent}
body.home .site-content .content-area{margin:0}

/* ══════════════════════════════════════════════════════════ articles and archives */
body.single .inside-article,body.page:not(.home) .inside-article,
body.archive .inside-article,body.blog .inside-article{max-width:800px;margin:0 auto;
  padding:26px 0 34px;background:transparent;border:0}
body.single .entry-title,body.page:not(.home) .entry-title{
  font:700 clamp(25px,3.2vw,35px)/1.16 var(--serif);letter-spacing:-.028em}
.entry-meta,.entry-meta a{color:var(--small);font:500 10px/1.6 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none}
/* SCOPED, not global. `.entry-content p{color:var(--ink)}` is (0,1,1) — the same specificity as
   `.seam p` and later in this file, so it won and painted the seam's copy near-black ON A NAVY
   BLOCK, where it was invisible. The homepage is entry-content too, so a global rule here reaches
   inside every design block. Article/page bodies only. */
body.single .entry-content>p,body.page:not(.home) .entry-content>p,
body.single .entry-content li,body.page:not(.home) .entry-content li{
  font-size:16px;line-height:1.62;color:var(--ink)}
/* Belt and braces: the dark blocks restate their own colour at (0,2,1) so no future
   .entry-content rule can reach into them. */
.fsp-sec .seam p,.fsp-sec .seam h3{color:#A7B6C6}
.fsp-sec .seam h3{color:#fff}
.fsp-stop>.fsp-wrap>p,.fsp-stop .sl span{color:#A7B6C6}
.fsp-stop .sl b,.fsp-stop h2{color:#fff}
.entry-content h2{margin-top:26px;font:700 clamp(19px,2.2vw,26px)/1.2 var(--serif);
  letter-spacing:-.02em}
.entry-content h3{margin-top:20px;font:600 17px/1.25 var(--ui)}
.entry-content img{height:auto;max-width:100%}
.entry-content figure{margin:20px 0}
.entry-content figcaption,.wp-element-caption{font:400 11px/1.5 var(--mono);color:var(--small);
  margin-top:6px}
.entry-content blockquote{margin:22px 0;padding:12px 0 12px 18px;border-left:4px solid var(--goldbright);
  font:600 18px/1.42 var(--ui);color:var(--ink)}
/* (0,1,1) beats a (0,1,0) exclusion, so any link-styling exception has to be scoped at least as
   tightly or it re-underlines the whole layer. */
.fsp-hero a,.fsp-sec a,.fsp-stop a,.reach a,.alm a,.cg a,.reads a,
.entry-content .reads li>a,.entry-content .cg a,.entry-content .reach a{text-decoration:none}
.entry-content .reads li>a{color:var(--ink)}
.sc-disclaimer{max-width:800px;margin:22px auto 0;padding:13px 15px;background:var(--sunk);
  border-left:3px solid var(--goldbright);font-size:13.5px;line-height:1.55;color:var(--mid)}
.fsp-foot{margin:0;font-size:12.5px;line-height:1.6;color:var(--small)}
.fsp-foot span{font:700 14px/1 var(--serif);color:var(--ink)}
.site-footer .inside-site-info{padding:16px 0 24px}