/* ─────────────────────────────────────────────────────────────
   The Looks — the four pieces, a row each.
   Loads after home.css, which carries the making band and the
   closing invitation this page shares with the homepage.
   ───────────────────────────────────────────────────────────── */

.lk__head{
  background:var(--ink);
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(36px,5.4vw,72px) var(--gutter) clamp(32px,4.4vw,56px);
  display:grid;gap:clamp(26px,4vw,58px);
  /* the reading column keeps the extra width; the photograph is 3:2 and
     short, so giving it more would only leave the heading crowded */
  grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);
  align-items:center;
}
.lk__intro{min-width:0}
.lk__intro .eyebrow{color:var(--blue);margin-bottom:clamp(14px,2vw,22px)}
.lk__intro h1{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,6.4vw,80px);line-height:.98;letter-spacing:-.02em;
  animation:hh-rise 1.1s cubic-bezier(.16,1,.3,1) both;
}
.lk__intro h1 em{font-style:italic}
.lk__lede{
  margin:clamp(20px,3vw,30px) 0 0;padding-top:clamp(18px,2.6vw,26px);
  border-top:1px solid rgba(var(--cream-rgb),.24);
  max-width:22em;font-size:15px;line-height:1.7;font-weight:300;opacity:.8;text-wrap:pretty; /* 38ch in Jost; em does not move when the font loads */
}
.lk__lines{margin:16px 0 0;font-size:15px;line-height:1.7;font-weight:300;opacity:.8}
.lk__shot{margin:0;overflow:hidden;border-radius:6px;background:var(--ink-2)}
/* 3:2, the same frame The Shoot gives the photograph beside The Offer, and
   the same at both sizes (BUG-2026-03). It was 3:4 here and 4:3 on a phone —
   a portrait plate on desktop that flipped to a landscape one below 900px, so
   the two pages opened on visibly different compositions and the header
   changed shape as the window narrowed. dsc04114 is a 2:3 portrait, so `cover`
   has a good deal to crop at this proportion; the position keeps the faces. */
.lk__shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 30%;animation:hh-fade 1.6s ease both}
.lk__shot .lkz{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
@media (max-width:900px){
  .lk__head{grid-template-columns:1fr}
  .lk__shot{order:-1}
}

/* ── one row per look ────────────────────────────────── */
.lk__row{
  background:var(--ink);
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(24px,3.4vw,40px) var(--gutter);
  border-top:1px solid rgba(var(--cream-rgb),.16);
  display:grid;gap:clamp(20px,3vw,44px);
  grid-template-columns:minmax(0,.72fr) minmax(0,2.2fr);
  align-items:center;scroll-margin-top:96px;
}
.lk__side{min-width:0}
.lk__n{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.6vw,44px);line-height:1;color:var(--gold-hi);
}
.lk__side h2{
  margin:10px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(22px,2.6vw,32px);line-height:1.05;letter-spacing:.06em;text-transform:uppercase;
}
.lk__sub{
  margin:8px 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(14px,1.6vw,17px);line-height:1.4;color:var(--blue);
}
/* 17.15em is the 30ch this was, measured in Jost. `ch` is the width of the
   current font's zero, so it changed when the web font arrived, the paragraph
   rewrapped and every row below it moved (CLS). */
.lk__blurb{margin:14px 0 0;max-width:17.15em;font-size:14px;line-height:1.65;font-weight:300;opacity:.76;text-wrap:pretty}
.lk__specs{margin:clamp(16px,2.2vw,22px) 0 0;display:flex;flex-direction:column;gap:7px}
.lk__specs > div{display:flex;gap:10px;font-size:12px;line-height:1.5}
.lk__specs dt{flex:0 0 auto;min-width:86px;letter-spacing:.16em;text-transform:uppercase;opacity:.49}
.lk__specs dd{margin:0;opacity:.72;font-weight:300;letter-spacing:.02em}
/* The columns come from .zs__rail now; this only says how many and how far
   apart. Four across reads the same as before — it is the same four tiles at
   the same width — but a look with more than four frames pages instead of
   wrapping onto a second row (REC-005). */
.lk__strip{--zs-per:4;--zs-gap:3px;min-width:0}
.lk__strip img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--ink-2);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover){.lk__strip .lkz:hover img{transform:scale(1.04)}}

@media (max-width:900px){
  .lk__row{grid-template-columns:1fr;padding-block:clamp(28px,4vw,40px)}
}
@media (max-width:560px){
  .lk__strip{--zs-per:2}
}