/* Article samples only. Do not copy back into the frozen mock-up.
   Extends C42 reader + STORY-1 card + C34 feed bar + Post/Event composer patterns. */
html,body{height:100%;margin:0}
#screen{height:100%;display:flex;flex-direction:column;background:var(--u-bg,#000);color:var(--u-ink)}
#screen .u-app{flex:1;min-height:0;height:100%}

/* ---- feed: read time on the header time line; article card sits in the stream ---- */
.feed-stream{padding:0 0 24px}
.feed-card.ar-art .feed-time{font-variant-numeric:tabular-nums;white-space:nowrap}
.feed-card.ar-art .ar-readmin{font-weight:500;color:var(--u-mut)}
.feed-card.ar-art .feed-source small{font-weight:500}
/* keep STORY-1; do not bring back the hidden kicker/time inside the media */

/* ---- byline with Follow ---- */
.c42-by{align-items:center}
.c42-by .by-main{display:flex;align-items:center;gap:.9rem;min-width:0;flex:1}
.c42-by .u-btn.small{flex:none;margin-left:8px}
.c42-by .o{display:none} /* no role or newsroom line on an independent writer */

/* ---- section headings ---- */
.c42-body h2,.c42 h2.c42-h2{font:700 1.25rem/1.3 var(--fb,Figtree,system-ui,sans-serif);letter-spacing:-.015em;margin:2.35rem 0 .9rem;color:var(--c42-ink);text-wrap:balance}

/* ---- place block ---- */
.c42-place{margin:2.15rem calc(var(--pad) * -1) 2.15rem;background:var(--c42-tint)}
.c42-place .map{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 60%;background:var(--c42-tint)}
.c42-place .pl{padding:1rem var(--pad) 1.15rem}
.c42-place .pl b{display:block;font:650 1.0625rem/1.3 var(--fb,Figtree,system-ui,sans-serif);color:var(--c42-ink)}
.c42-place .pl small{display:block;margin-top:.3rem;font:400 .875rem/1.4 var(--fb,Figtree,system-ui,sans-serif);color:var(--c42-ink2)}
.c42-place .pl em{display:block;margin-top:.45rem;font:500 .8125rem/1.35 var(--fb,Figtree,system-ui,sans-serif);font-style:normal;color:var(--c42-ink3)}

/* ---- related local links (in-app, not a hop off Marla) ---- */
.c42-rel{margin:2.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--c42-hair)}
.c42-rel h2{margin:0 0 .75rem;font:700 .75rem/1 var(--fb,Figtree,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--c42-ink3)}
.c42-rel a{display:block;padding:.85rem 0;border-top:1px solid var(--c42-hair);text-decoration:none;color:var(--c42-ink)}
.c42-rel a:first-of-type{border-top:0}
.c42-rel a b{display:block;font:650 1.0625rem/1.3 var(--fb,Figtree,system-ui,sans-serif);letter-spacing:-.01em}
.c42-rel a small{display:block;margin-top:.25rem;font:400 .8125rem/1.35 var(--fb,Figtree,system-ui,sans-serif);color:var(--c42-ink2)}

/* ---- end: private replies, save, share, more from ---- */
.c42-endnote{margin-top:2.75rem;padding-top:1.2rem;border-top:1px solid var(--c42-hair);font:400 .8125rem/1.5 var(--fb,Figtree,system-ui,sans-serif);color:var(--c42-ink3)}
.c42-acts{display:flex;gap:8px;margin:1.15rem 0 0}
.c42-acts .u-btn{flex:1}
.c42-talk{margin:1.75rem 0 0;padding:1.15rem 0 0;border-top:1px solid var(--c42-hair)}
.c42-talk h2{margin:0 0 .4rem;font:700 1.125rem/1.3 var(--fb,Figtree,system-ui,sans-serif);letter-spacing:-.01em;color:var(--c42-ink)}
.c42-talk p.hint{margin:0 0 .85rem;font:400 .875rem/1.45 var(--fb,Figtree,system-ui,sans-serif);color:var(--c42-ink2)}
.c42-talk textarea{display:block;width:100%;min-height:96px;box-sizing:border-box;resize:none;border:1px solid var(--c42-hair);border-radius:14px;background:var(--c42-tint);color:var(--c42-ink);padding:12px 14px;font:400 1rem/1.4 var(--fb,Figtree,system-ui,sans-serif)}
.c42-talk textarea::placeholder{color:var(--c42-ink3)}
.c42-talk .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.c42-talk .row small{color:var(--c42-ink3);font:400 .75rem/1.35 var(--fb,Figtree,system-ui,sans-serif)}
.c42-more{margin:2rem 0 1.25rem;padding-top:1.2rem;border-top:1px solid var(--c42-hair)}
.c42-more h2{margin:0 0 1rem;font:700 .75rem/1 var(--fb,Figtree,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--c42-ink3)}
.c42-more a.mc{display:block;text-decoration:none;color:inherit;border-radius:14px;overflow:hidden;background:var(--c42-tint)}
.c42-more a.mc img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.c42-more a.mc span{display:block;padding:.9rem 1rem 1.05rem}
.c42-more a.mc b{display:block;font:650 1.0625rem/1.3 var(--fb,Figtree,system-ui,sans-serif);letter-spacing:-.01em;color:var(--c42-ink)}
.c42-more a.mc small{display:block;margin-top:.3rem;font:400 .8125rem/1.35 var(--fb,Figtree,system-ui,sans-serif);color:var(--c42-ink2)}
.c42-later{display:inline-flex;align-items:center;min-height:44px;margin-top:.25rem;padding:0;border:0;background:none;color:var(--c42-ink3);font:500 .8125rem/1.35 var(--fb,Figtree,system-ui,sans-serif);cursor:default;opacity:.7}
.c42-later[disabled]{cursor:default}

/* ---- Variant A: cover-led, feed continuity. 1:1 hero, type over the photo, paper begins at the byline. ---- */
.u-app[data-var=A] .c42-hero{position:relative;margin:0;background:#0C0C0C}
.u-app[data-var=A] .c42-hero img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:62% 45%;display:block}
.u-app[data-var=A] .c42-hero .s1-scrim{position:absolute;left:0;right:0;bottom:0;height:13.5rem;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(12,12,12,.86) 0,rgba(12,12,12,.84) 1.625rem,rgba(12,12,12,.8) 3.875rem,rgba(12,12,12,.76) 4.75rem,rgba(12,12,12,.7) 6.5rem,rgba(12,12,12,.59) 7.75rem,rgba(12,12,12,.47) 8.25rem,rgba(12,12,12,.31) 9rem,rgba(12,12,12,.16) 9.875rem,rgba(12,12,12,.07) 10.875rem,rgba(12,12,12,.02) 12.125rem,rgba(12,12,12,0) 13.5rem)}
.u-app[data-var=A] .c42-hero .s1-frame{position:absolute;inset:10px;z-index:5;box-sizing:border-box;border:.5px solid rgba(255,255,255,.35);border-radius:10px;pointer-events:none}
.u-app[data-var=A] .c42-hero .plate{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 24px 24px;color:#fff}
.u-app[data-var=A] .c42-hero .c42-kick{color:#fff;letter-spacing:.1em}
.u-app[data-var=A] .c42-hero h1{color:#fff;margin:.55rem 0 0;font-weight:700;letter-spacing:-.015em;line-height:1.12;text-wrap:balance}
.u-app[data-var=A] .c42-hero .c42-dek{color:rgba(255,255,255,.8);margin-top:.45rem}
.u-app[data-var=A] .c42-head{padding-top:1.15rem}
.u-app[data-var=A] .c42-head .c42-kick,.u-app[data-var=A] .c42-head h1,.u-app[data-var=A] .c42-head .c42-dek{display:none}
.u-app[data-var=A][data-open] .c42-hero{animation:ar-open .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes ar-open{from{clip-path:inset(12% 8% 12% 8% round 10px);opacity:.92}to{clip-path:inset(0 0 0 0);opacity:1}}
@media (prefers-reduced-motion:reduce){.u-app[data-var=A][data-open] .c42-hero{animation:none}}

/* seated save/share in the reader top bar */
.u-app[data-u=x-article] .ar-top .ar-bar.ar-seated{position:absolute;right:6px;top:auto;bottom:4px;left:auto;transform:none;display:flex}
.u-app[data-u=x-article] .c42-prog{z-index:2}

/* ---- composer sample extras ---- */
.ar-compose .u-chead .ttl{font:600 16.5px/1 var(--u-f-b,Figtree,system-ui,sans-serif)}
.c42c-as{padding:12px var(--pad,24px) 0}
.pf-cover-on{display:block;width:calc(100% - 2 * var(--pad,24px));margin:8px var(--pad,24px) 4px;border-radius:16px;overflow:hidden;position:relative}
.pf-cover-on img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.pf-cover-on .tag{position:absolute;left:10px;top:10px;height:26px;padding:0 10px;border-radius:13px;background:rgba(18,16,14,.55);color:#fff;font:600 12px/26px var(--fb,Figtree,system-ui,sans-serif);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ar-compose .c42c-tray{margin:0 var(--pad,24px) .6rem}

/* ---- sample index (desktop chooser, not the app) ---- */
body.chooser{background:#E9E4D8;color:#1B1814;font:400 16px/1.5 Figtree,system-ui,sans-serif;min-height:100%;height:auto}
.chooser-wrap{max-width:720px;margin:0 auto;padding:48px 24px 80px}
.chooser-wrap header img{width:44px;height:44px;border-radius:12px}
.chooser-wrap h1{font:700 2rem/1.15 Figtree,system-ui,sans-serif;letter-spacing:-.02em;margin:.8rem 0 .4rem}
.chooser-wrap .lede{color:#5c564c;margin:0 0 1.5rem;max-width:38em}
.chooser-wrap .flag{display:inline-block;font:650 .75rem/1 Figtree,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#D93350;margin-top:8px}
.chooser-wrap ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.chooser-wrap a.row{display:block;background:#F7F2EA;border-radius:16px;padding:16px 18px;text-decoration:none;color:inherit;border:1px solid rgba(60,40,20,.08)}
.chooser-wrap a.row b{display:block;font-weight:650;letter-spacing:-.01em}
.chooser-wrap a.row small{display:block;margin-top:4px;color:#6b6358;font-size:.9rem;line-height:1.4}
.chooser-wrap .note{margin-top:2rem;color:#6b6358;font-size:.9rem}

/* shot mode: just the phone, no desk frame */
html.shot,html.shot body,#shot-root{background:#000 !important;height:100%;overflow:hidden}
html.shot .u-app{width:390px;height:844px}
.c34logo .brand-logo img{width:32px;height:32px;border-radius:9px;display:block;object-fit:cover}
.u-nav a.post .pp svg{display:block}
.feed-navigation-row.c34row{flex:none}
/* composer tabs sit under the header, same as the live Post flow */
.ar-switch.pf-tabs button{cursor:pointer}

/* Follow / Send: undo the reader's bare button reset */
.u-app[data-u=x-article] .c42-by .u-btn,
.u-app[data-u=x-article] .c42-who .u-btn,
.u-app[data-u=x-article] .c42-talk .u-btn{
  background:var(--coral,#D93350);
  border:1px solid var(--coral,#D93350);
  color:#fff;
  min-height:36px;
  height:36px;
  padding:0 16px;
  border-radius:999px;
  font:600 .875rem/1 var(--fb,Figtree,system-ui,sans-serif);
}
.u-app[data-u=x-article] .c42-acts .u-btn.ghost{
  background:transparent;
  border:1px solid var(--c42-hair);
  color:var(--c42-ink);
  min-height:44px;
  height:auto;
}

/* save/share live in the reader top bar */
.u-app[data-u=x-article] .ar-top-acts{
  position:absolute;right:4px;bottom:4px;display:flex;gap:0;z-index:3;
}
.u-app[data-u=x-article] .ar-top-acts .u-ib{width:44px;height:44px;color:var(--c42-ink)}

/* Variant A: the first screen is the cover, type sits on it, like the feed card opening */
.u-app[data-var=A] .c42-hero{
  position:relative;margin:0;background:#0C0C0C;
  height:calc(100dvh - 52px - 76px);
  max-height:calc(100% - 0px);
  overflow:hidden;
}
.u-app[data-var=A] .c42-hero img{
  width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:68% 72%;display:block;
}

/* compose caption should not clip */
.ar-compose .cfoot{padding:8px 24px 0;box-sizing:border-box}
.ar-compose .cfoot .capin{width:100%;box-sizing:border-box}

/* more-from: shorter photo so the title stays on screen */
.c42-more a.mc img{aspect-ratio:2.2/1}
.c42-talk textarea{min-height:80px}
.c42-acts{margin-top:.85rem}
.u-app[data-show=blocks] .pf-cover-on img{aspect-ratio:2.35/1}
.u-app[data-u=x-article] .ar-top-acts .u-ib{position:relative;left:auto;right:auto;bottom:auto;top:auto}
.ar-compose .cfoot .capin{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-app[data-u=x-article] .u-bar.ar-top .ar-top-acts .u-ib{
  position:relative;left:auto;right:auto;bottom:auto;top:auto;
  width:44px;height:44px;color:var(--c42-ink);
}
/* dedicated end-of-article sample: start at the author plate */
html[data-endshot] .c42-hero,
html[data-endshot] .c42-cover,
html[data-endshot] .c42-head,
html[data-endshot] .c42-body,
html[data-endshot] .c42-rel{display:none !important}
html[data-endshot] .c42-endnote{margin-top:1rem}
html[data-endshot] .c42-more a.mc img{aspect-ratio:2.4/1}
html[data-endshot] .c42-talk textarea{min-height:64px}