/* ============================================================
   Feature focus: the small project page (Pen's ruling, 2026-10-16).
   One feature, what it does for the person using it, how it was built in
   four lines, and the feature itself as a short loop or one or two stills.
   Loaded after cs.css on the four project pages and leans on its tokens,
   nav, figure and footer; this file only lays out the one screen.

   The budget is the ruling's: under one screen at 1382 by 844, under two at
   390 by 844. At the wide width the words sit left and the feature right; on
   a phone the feature comes straight after the lede, before the build notes,
   so the thing itself is never more than a thumb away.
   ============================================================ */
.ff{padding:112px 0 48px}
.ff .wrap{max-width:1240px}
.ff-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"head fig" "built fig" "act fig";
  grid-template-rows:auto auto 1fr; column-gap:56px; align-items:start}
.ff-head{grid-area:head}
.ff-fig{grid-area:fig; align-self:center}
.ff-built{grid-area:built}
.ff-act{grid-area:act}

.ff-title{font:300 clamp(40px,4.4vw,60px)/1 var(--serif); letter-spacing:-.022em;
  color:var(--ink); margin:14px 0 0}
.ff-title .lite{color:var(--ink-3)}
.ff-status{font:500 9.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:12px 0 0}
.ff-lede{font:300 clamp(17px,1.5vw,19.5px)/1.5 var(--serif); color:var(--ink);
  max-width:38ch; margin:18px 0 0}

.ff-built{margin-top:24px; border-top:1px solid var(--line); padding-top:16px}
.ff-built h2{font:500 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px}
.ff-built ol{list-style:none; margin:0; padding:0; counter-reset:ff}
.ff-built li{counter-increment:ff; position:relative; padding-left:28px;
  font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0 0 8px}
.ff-built li::before{content:"0" counter(ff); position:absolute; left:0; top:3px;
  font:500 9.5px/1.5 var(--mono); letter-spacing:.06em; color:var(--accent)}
.ff-built li:last-child{margin-bottom:0}

/* The one way out to the product. A real link, 44 px tall at every width,
   because a control that is easy to see and hard to hit is the same failure
   as one that is hidden. */
.ff-act{margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.ff-act a{display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  border:1px solid var(--ink); border-radius:2px; color:var(--ink); text-decoration:none;
  font:500 10.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  transition:background .2s, color .2s}
.ff-act a:hover{background:var(--ink); color:var(--bone)}
.ff-act a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.ff-act .note{font-size:12.5px; line-height:1.5; color:var(--ink-3)}

/* The feature itself uses the site's one figure (cs.css .cs-fig): a border,
   the capture, a caption that says what it is and where it was taken. */

/* Two stills where one feature has two faces (UnImpact: the map, then a
   card it opens). At the wide width the card sits over the map's lower
   corner, the way it sits over the page in the product; on a phone they
   simply stack. */
.ff-pair{position:relative}
.ff-pair .ff-over{position:absolute; right:-18px; bottom:-30px; width:56%;
  box-shadow:0 18px 40px -22px rgba(35,37,30,.45)}
.ff-pair + figcaption{margin-top:42px}

@media (max-width:980px){
  .ff{padding:96px 0 40px}
  .ff-grid{grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "fig" "built" "act";
    grid-template-rows:none}
  .ff-fig{margin-top:22px}
  .ff-lede{max-width:none}
  .ff-pair .ff-over{position:relative; right:auto; bottom:auto; width:auto;
    margin-top:12px; box-shadow:none}
  .ff-pair + figcaption{margin-top:11px}
}
@media (max-width:480px){
  .ff-title{font-size:40px}
  .ff-lede{font-size:17px}
}

/* A portrait capture (LimIcon's column) is held narrower so it stays inside
   one screen at 1382 by 844; centered in its column. */
.ff-fig--tall{max-width:500px; justify-self:center; width:100%}
@media (max-width:980px){ .ff-fig--tall{max-width:none} }

/* The nav's two links are 12 to 19 px tall as drawn. cs.css widens their hit
   area to 44 px only at 480 and below; these pages ask for 44 at every width,
   with the same invisible band and no change to how the nav looks. */
.cs-nav .logo, .cs-nav .back{position:relative}
.cs-nav .logo::before, .cs-nav .back::before{content:""; position:absolute;
  inset:calc((100% - 44px) / 2) -6px}

/* One page, two features (P023): Artinian Gems and Caveman Gems are one
   family company, so their two focus pages became gems.html. A short head
   names the family once; each feature below keeps its whole shape above, and
   the second is set off by a rule. The sections are what the old URLs land
   on, so each clears the fixed nav when a link scrolls to it. */
.ff-fam{margin:0 0 34px}
/* Set as running text, not the eyebrow's flex row: the family name is long
   enough to wrap at 390, and a flex row wrapped it into two ragged columns. */
.ff-fam h1.cs-eyebrow{margin:0; display:block; line-height:1.6}
.ff-fam-lede{font:300 16px/1.5 var(--serif); color:var(--ink-2); max-width:60ch; margin:12px 0 0}
.ff-sec{scroll-margin-top:72px}
.ff-sec + .ff-sec{margin-top:64px; padding-top:56px; border-top:1px solid var(--line)}
@media (max-width:980px){
  .ff-fam{margin-bottom:26px}
  .ff-sec + .ff-sec{margin-top:44px; padding-top:40px}
}