/* Homepage: featured contribution.
   One featured story between the homepage banner (section.usp) and the top
   stories (.heropanel). The picture is on the left with a "Featured
   Interview" flag. The text column is on the right: the contributor's
   card at the top (level with the picture's top edge), the headline and dek,
   then the section pill and date at the bottom (level with the picture's
   bottom edge), except for the Martinis homepage interview, which omits
   that row entirely. Hover is the same as every story on the front page.
   Load after css/main.css. */

:root{--feat-plate:#F3EADB;--feat-hair:rgba(40,30,20,.10);--feat-edge:rgba(19,16,17,.07)}
:root[data-theme="dark"]{--feat-plate:#2A231D;--feat-hair:rgba(255,236,210,.10);--feat-edge:rgba(255,236,210,.06)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--feat-plate:#2A231D;--feat-hair:rgba(255,236,210,.10);--feat-edge:rgba(255,236,210,.06)}
}

.featured-sec{padding:56px 0 0}
.featured{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;align-items:stretch;
  padding-bottom:56px;border-bottom:1px solid var(--feat-hair);cursor:pointer}
.featured:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px}

/* the picture: flat, 5px corners, a hairline inner edge; no drop shadow and
   no darkened foot */
.feat-pic{position:relative;display:block;min-height:360px;border-radius:5px;overflow:hidden;background:var(--feat-plate)}
.feat-pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--feat-edge);pointer-events:none}
.feat-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--d-6) var(--e-out)}
/* Preserve the supplied artwork's logo and name panel, including on hover. */
.feat-pic.feat-pic-artwork{min-height:0;aspect-ratio:1672/941;align-self:start}
.feat-pic.feat-pic-artwork img{object-fit:contain}
.featured:hover .feat-pic.feat-pic-artwork img{transform:none}

/* the flag: a small solid tab on the picture's corner. Light in both themes
   so it reads on any photograph; it stays still while the picture zooms */
.feat-flag{position:absolute;z-index:2;top:16px;right:16px;display:inline-flex;align-items:center;height:28px;padding:0 11px;
  border-radius:6px;background:#FFF7E9;color:#131011;font:600 12.5px/1 var(--sans);letter-spacing:.005em;white-space:nowrap;
  box-shadow:0 1px 2px rgba(19,16,17,.18)}

.feat-text{display:flex;flex-direction:column;min-width:0}

/* the contributor: headshot, name, credential */
.feat-by{display:flex;align-items:center;gap:14px;min-width:0}
a.feat-by{color:inherit;text-decoration:none}
a.feat-by:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px}
.feat-face{position:relative;flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;overflow:hidden;
  background:#4E041E;color:#FFF7E9;font:600 16px/1 var(--sans);letter-spacing:.02em}
.feat-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.feat-who{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.3}
.feat-who b{font:600 15px/1.3 var(--sans);color:var(--ink)}
.feat-who span{font:400 13.5px/1.3 var(--sans);color:var(--ink-2)}

.feat-h{margin:32px 0 0;font-family:var(--disp);font-weight:300;font-size:40px;line-height:1.08;letter-spacing:-.026em;
  color:var(--ink);text-wrap:balance;transition:color var(--d-2) var(--e-out)}
.feat-text > .feat-h:first-child{margin-top:0}
.feat-dek{margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}

/* the section pill and the date */
.feat-meta{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:28px}
.feat-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid var(--accent-line);border-radius:999px;
  font:700 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);white-space:nowrap}
.feat-date{font:700 11.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* hover, as on every front-page story: the crimson tint sweeps in behind the
   headline (.hl, main.css), the headline takes the accent, the picture zooms */
@media (hover:hover){
  .featured:hover .feat-h{color:var(--accent-ink)}
  .featured:hover .hl{background-size:100% 100%}
  .featured:hover .feat-pic img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  .feat-pic img{transition:none}
  .featured:hover .feat-pic img{transform:none}
}

@media (max-width:1080px){
  .featured{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .feat-pic{min-height:0;aspect-ratio:16/9}
  .feat-h{margin-top:24px}
  .feat-meta{padding-top:20px}
}
@media (max-width:720px){
  .featured-sec{padding-top:32px}
  .featured{padding-bottom:36px}
  .feat-flag{top:12px;right:12px;height:26px;padding:0 10px;font-size:12px}
  .feat-face{width:48px;height:48px;font-size:14px}
  .feat-h{font-size:30px;margin-top:20px}
  .feat-dek{font-size:15px}
}

/* Reserve the contributor row without an inline style (strict CSP). */
.feat-by.feat-by-pending{visibility:hidden}