
#arfom-landing { width:100%; }
#arfom-landing .arfom-window { width:100%; margin:0 auto; container-type:inline-size; }
#arfom-landing .arfom-page { --arfom-red:#f03629; --arfom-bg:#080808; --arfom-white:#f7f5f1; --arfom-muted:#b4afa9; --arfom-line:#30302e; position:relative; background:var(--arfom-bg); color:var(--arfom-white); padding:30px 36px 24px; font-family:Inter,Arial,sans-serif; color-scheme:dark; }
#arfom-landing .arfom-page * { box-sizing:border-box; }
#arfom-landing .arfom-page [hidden] { display:none !important; }
#arfom-landing .arfom-page button, #arfom-landing .arfom-page a { -webkit-tap-highlight-color:transparent; }
#arfom-landing .arfom-page button { font-family:inherit; }
#arfom-landing .arfom-page a { color:inherit; text-decoration:none; }
#arfom-landing .arfom-header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; }
#arfom-landing .arfom-edition { display:flex; align-items:center; gap:10px; font:11px 'Space Mono',monospace; letter-spacing:.14em; }
#arfom-landing .arfom-edition > span { width:18px; height:1px; background:var(--arfom-red); }
#arfom-landing .arfom-mobile-logo { display:none; }
#arfom-landing .arfom-note-button { background:transparent; border:1px solid #4a3632; color:var(--arfom-white); padding:0 15px; min-height:44px; display:flex; align-items:center; gap:20px; font-size:12px; transition:border-color .2s,background .2s; }
#arfom-landing .arfom-note-button:hover { border-color:var(--arfom-red); background:#1e100e; }
#arfom-landing .arfom-page svg { width:18px; height:18px; stroke-width:1.5; }
#arfom-landing .arfom-arrival { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:6%; align-items:center; padding:63px 0 65px; }
#arfom-landing .arfom-identity { min-width:0; }
#arfom-landing .arfom-main-logo { display:block; width:100%; height:auto; }
#arfom-landing .arfom-statement { margin:25px 0 22px; font-size:24px; line-height:1.25; letter-spacing:-.04em; }
#arfom-landing .arfom-statement > span { color:var(--arfom-muted); }
#arfom-landing .arfom-enter { display:flex; align-items:center; justify-content:space-between; gap:35px; width:215px; padding:15px 18px; background:var(--arfom-red); color:#080808 !important; font:500 20px/1.2 Oswald,'Arial Narrow',sans-serif; transition:background .2s; }
#arfom-landing .arfom-enter:hover { background:#ff5644; }
#arfom-landing .arfom-enter svg { width:23px; height:23px; }
#arfom-landing .arfom-read { display:flex; align-items:center; width:max-content; min-height:44px; gap:18px; margin-top:8px; font-size:12px; color:var(--arfom-muted) !important; }
#arfom-landing .arfom-read:hover { color:var(--arfom-white) !important; }
#arfom-landing .arfom-film-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; font:11px 'Space Mono',monospace; letter-spacing:.13em; color:var(--arfom-muted); }
#arfom-landing .arfom-live-dot { display:block; width:5px; height:5px; background:var(--arfom-red); border-radius:50%; }
#arfom-landing .arfom-screen { position:relative; aspect-ratio:16/9; overflow:hidden; background:#161616; }
#arfom-landing .arfom-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; pointer-events:none; transition:opacity .22s; }
#arfom-landing .arfom-video.is-active { opacity:1; }
#arfom-landing .arfom-video-shade { pointer-events:none; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.68)); }
#arfom-landing .arfom-media-controls { position:absolute; bottom:10px; right:10px; display:flex; gap:5px; }
#arfom-landing .arfom-media-controls button { border:1px solid #ffffff24; color:#fff; background:#101010a8; display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 12px; font-size:11px; backdrop-filter:blur(6px); }
#arfom-landing .arfom-media-controls button:hover { background:#292421; border-color:#ffffff78; }
#arfom-landing .arfom-media-controls button > span { display:flex; align-items:center; }
#arfom-landing .arfom-media-controls .arfom-pause { width:40px; padding:0; }
#arfom-landing .arfom-film-credit { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 0; border-bottom:1px solid var(--arfom-line); font:11px 'Space Mono',monospace; color:var(--arfom-muted); }
#arfom-landing .arfom-artist { color:var(--arfom-white); }
#arfom-landing .arfom-directory { border-top:1px solid var(--arfom-line); display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:20px; }
#arfom-landing .arfom-directory a { display:flex; align-items:flex-start; gap:6px; min-height:40px; font:400 18px/1.2 Oswald,'Arial Narrow',sans-serif; white-space:nowrap; transition:color .2s; }
#arfom-landing .arfom-directory a > span { color:var(--arfom-red); font:11px 'Space Mono',monospace; padding-top:2px; }
#arfom-landing .arfom-directory a:hover { color:var(--arfom-red); }
#arfom-landing .arfom-note { position:absolute; inset:0; z-index:5; padding:30px 36px; background:#10100f; }
#arfom-landing .arfom-note-top { display:flex; justify-content:space-between; align-items:center; font:12px 'Space Mono',monospace; padding-bottom:14px; border-bottom:1px solid var(--arfom-line); }
#arfom-landing .arfom-note-close { display:grid; place-items:center; background:transparent; color:var(--arfom-white); border:1px solid var(--arfom-line); width:44px; height:44px; }
#arfom-landing .arfom-letter { max-width:510px; margin:24px auto 0; }
#arfom-landing .arfom-letter p { font:400 17px/1.5 Georgia,serif; margin:0 0 16px; }
#arfom-landing .arfom-letter .arfom-signature { font-style:italic; font-size:30px; }
@container (max-width:850px) {
  #arfom-landing .arfom-page { padding:24px; }
  #arfom-landing .arfom-arrival { padding:48px 0; gap:5%; }
  #arfom-landing .arfom-directory { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
}
@container (max-width:600px) {
  #arfom-landing .arfom-page { padding:22px 20px 24px; }
  #arfom-landing .arfom-header { padding-bottom:22px; gap:10px; border-bottom:1px solid var(--arfom-line); }
  #arfom-landing .arfom-edition { display:none; }
  #arfom-landing .arfom-mobile-logo { display:block; width:124px; height:auto; }
  #arfom-landing .arfom-note-button { padding:0; border:0; gap:8px; font-size:11px; white-space:nowrap; }
  #arfom-landing .arfom-note-button:hover { background:transparent; }
  #arfom-landing .arfom-arrival { display:flex; flex-direction:column; gap:0; padding:24px 0 0; align-items:stretch; }
  #arfom-landing .arfom-feature { order:0; }
  #arfom-landing .arfom-identity { order:1; padding-top:5px; }
  #arfom-landing .arfom-main-logo { display:none; }
  #arfom-landing .arfom-film-heading { font-size:11px; letter-spacing:.12em; margin-bottom:11px; }
  #arfom-landing .arfom-film-credit { font-size:11px; padding:12px 0; }
  #arfom-landing .arfom-media-controls { bottom:7px; right:7px; }
  #arfom-landing .arfom-media-controls button { min-height:44px; }
  #arfom-landing .arfom-media-controls .arfom-pause { width:44px; }
  #arfom-landing .arfom-statement { font-size:28px; line-height:1.12; margin:23px 0 20px; }
  #arfom-landing .arfom-enter { width:100%; min-height:56px; font-size:21px; }
  #arfom-landing .arfom-read { margin:8px auto 0; }
  #arfom-landing .arfom-directory { display:none; }
  #arfom-landing .arfom-note { padding:20px; }
  #arfom-landing .arfom-letter { margin-top:22px; }
  #arfom-landing .arfom-letter p { font-size:16px; line-height:1.4; }
}
@media (prefers-reduced-motion:reduce) { #arfom-landing .arfom-page * { transition:none !important; } }

/* Standalone delivery / real desktop width. These are the authoritative rules.
   Never nest #arfom-landing in a Bootstrap .container or a max-width:1200 wrapper. */
html:has(#arfom-landing), body:has(#arfom-landing) { margin:0; background:#080808; color:#f7f5f1; }
#arfom-landing { --arfom-red:#f03629; --arfom-bg:#080808; --arfom-white:#f7f5f1; --arfom-muted:#b4afa9; --arfom-line:#30302e; isolation:isolate; font-family:Inter,Arial,sans-serif; }
#arfom-landing *, #arfom-landing *::before, #arfom-landing *::after { box-sizing:border-box; }
#arfom-landing .arfom-icon-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
#arfom-landing svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
#arfom-landing a, #arfom-landing button { cursor:pointer; }
#arfom-landing a:focus-visible, #arfom-landing button:focus-visible { outline:2px solid #f7f5f1; outline-offset:5px; }
#arfom-landing button { appearance:none; border-radius:0; }
#arfom-landing .arfom-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#arfom-landing .arfom-page { width:calc(100% - 2 * clamp(24px,4vw,80px)); max-width:1760px; margin-inline:auto; padding:32px 0 24px; min-height:100svh; display:flex; flex-direction:column; }
#arfom-landing .arfom-arrival { flex:1; padding-block:clamp(44px,5vw,82px); }
#arfom-landing .arfom-main-logo { max-width:none; }
#arfom-landing .arfom-statement { font-size:clamp(24px,2.35vw,38px); margin-top:clamp(25px,2.4vw,40px); }
#arfom-landing .arfom-note-button { font-size:clamp(12px,.95vw,16px); min-height:48px; }
#arfom-landing .arfom-enter { width:clamp(215px,18vw,280px); min-height:56px; font-size:clamp(20px,1.5vw,25px); border:0; border-radius:0; box-shadow:none; }
#arfom-landing .arfom-read { font-size:clamp(12px,.95vw,15px); }
#arfom-landing .arfom-directory a { font-size:clamp(18px,1.5vw,27px); }
#arfom-landing .arfom-film-heading, #arfom-landing .arfom-film-credit { font-size:clamp(11px,.8vw,13px); }
#arfom-landing .arfom-media-controls button { min-height:44px; font-size:12px; }
#arfom-landing .arfom-media-controls .arfom-pause { width:44px; }
#arfom-landing .arfom-playback-status { color:var(--arfom-muted); font:12px/1.4 Inter,Arial,sans-serif; margin:12px 0 0; }
#arfom-landing .arfom-punch-dialog { border:1px solid var(--arfom-line); border-radius:0; color:var(--arfom-white); background:#10100f; padding:0; width:min(740px,calc(100vw - 32px)); max-height:90svh; overflow:hidden; }
#arfom-landing .arfom-punch-dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(5px); }
#arfom-landing .arfom-punch-dialog[open] { display:flex; flex-direction:column; }
#arfom-landing .arfom-punch-dialog .arfom-note-top { padding:12px 18px; flex-shrink:0; }
#arfom-landing .arfom-punch-dialog h2 { font:12px 'Space Mono',monospace; margin:0; }
#arfom-landing .arfom-punch-dialog .arfom-note-close { display:grid; place-items:center; background:transparent; color:var(--arfom-white); border:1px solid var(--arfom-line); width:44px; height:44px; }
#arfom-landing .arfom-note-scroll { overflow:auto; overscroll-behavior:contain; padding:18px; }
#arfom-landing .arfom-note-image { display:block; width:100%; height:auto; }
@container (max-width:850px) {
  #arfom-landing .arfom-page { padding-block:24px; }
  #arfom-landing .arfom-arrival { padding-block:48px; }
}
@container (max-width:600px) {
  #arfom-landing .arfom-page { width:calc(100% - 40px); padding:22px 0 24px; }
  #arfom-landing .arfom-arrival { flex:0; padding:24px 0 0; }
  #arfom-landing .arfom-note-button { font-size:11px; min-height:44px; }
  #arfom-landing .arfom-statement { font-size:28px; margin:23px 0 20px; }
  #arfom-landing .arfom-enter { width:100%; font-size:21px; }
  #arfom-landing .arfom-read { font-size:12px; }
  #arfom-landing .arfom-film-heading, #arfom-landing .arfom-film-credit { font-size:11px; }
}
