/* SECTION 4 · THE DOORS (What Second Chair prepares)
   Locked 2026-10-04 from the doors round, v07: cream paper with blind-slat shadows carrying the swash headline, a torn paper edge,
   then a text-free VistaVision corridor plate with four frosted-glass office doors. The four service names are live gold type
   positioned over each glass panel (door geometry measured off the plate, set as --x/--w/--y/--h on each door). No lamp. */

.s4 { position:relative; background:#0E0C0A; color:#F1E6CF; }

/* paper band */
.s4-paperwrap { position:relative; z-index:2; filter:drop-shadow(0 10px 14px rgba(0,0,0,0.55)); margin-bottom:-46px; }
.s4-paper { position:relative; overflow:hidden; background:#EFE6D6; padding:104px 0 96px;
  -webkit-mask-image:linear-gradient(#000,#000), url(/second-chair-full/images/v3/s4/torn-edge.png);
  -webkit-mask-size:100% calc(100% - 60px), 100% 60px; -webkit-mask-position:top, bottom; -webkit-mask-repeat:no-repeat;
  mask-image:linear-gradient(#000,#000), url(/second-chair-full/images/v3/s4/torn-edge.png);
  mask-size:100% calc(100% - 60px), 100% 60px; mask-position:top, bottom; mask-repeat:no-repeat; }
.s4-paperbg { position:absolute; inset:0; margin:0; }
.s4-paperbg img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; }
.s4-inner { position:relative; z-index:1; max-width:1120px; margin:0 auto; }
.s4-kicker { display:block; font-family:var(--font-ui); font-size:12px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:#1c1917; margin-bottom:22px; }
.s4-h2 { margin:0; max-width:none; }
.s4-h2-img { display:block; width:100%; max-width:760px; height:auto; }
.s4-rule { border:0; border-top:1px solid #B8933F; margin:30px 0 0; }

/* corridor plate (names are painted on the glass in the plate itself, Davis 2026-10-04: live type never lines up with the render). The door list stays as invisible link hit-areas on desktop and becomes the glass plaques on phones. */
.s4-corridor { position:relative; container-type:inline-size; aspect-ratio:2688 / 1152; overflow:hidden; background:#0E0C0A; padding-top:55px; }  /* plate sits 55px lower under the paper */
.s4-plate { position:absolute; inset:55px 0 0 0; margin:0; }
/* the door group in q01 sits +0.40% of centre: widen and pull so the four doors centre on the page */
.s4-plate img { width:100.8%; margin-left:-0.8%; height:100%; object-fit:cover; object-position:50% 50%; display:block; }
.s4-doors { position:absolute; inset:55px 0 0 0; margin:0; padding:0; list-style:none; }
.s4-door { position:absolute; left:var(--x); width:var(--w); top:var(--y); height:var(--h); }
.s4-door a > span { opacity:0; }
.s4-door a { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.9cqw; text-align:center; text-decoration:none; padding:0 0.6cqw; }
.s4-num { font-family:var(--font-mono); font-size:1.05cqw; letter-spacing:0.18em; color:#D9A63A;
  text-shadow:0 0 0.12cqw rgba(70,35,0,0.95), 0 0.06cqw 0.1cqw rgba(50,25,0,0.9), 0 0 0.9cqw rgba(255,180,70,0.35); }
.s4-name { font-family:'Oranienbaum','TiemposHeadline',Georgia,serif; font-weight:400; text-transform:uppercase; font-size:1.95cqw; line-height:1.06; letter-spacing:0.06em; color:#DFAE3F;
  /* gold leaf painted on the glass: a hard dark edge under the letter, then the glass glow around it */
  text-shadow:0 0 0.14cqw rgba(70,35,0,0.95), 0 0.08cqw 0.12cqw rgba(45,22,0,0.9), 0 0 0.9cqw rgba(255,190,80,0.45), 0 0 2.2cqw rgba(255,150,50,0.22);
  transition:color 220ms ease, text-shadow 220ms ease; }
.s4-door a:hover .s4-name { color:#F3C75A; text-shadow:0 0 0.14cqw rgba(70,35,0,0.95), 0 0.08cqw 0.12cqw rgba(45,22,0,0.9), 0 0 1.2cqw rgba(255,200,90,0.7), 0 0 3cqw rgba(255,150,50,0.35); }

/* the one line per door, under the corridor */
.s4-lines { position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:52px 0 64px; }
.s4-lines ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; }
.s4-lines li { border-top:1px solid rgba(184,147,63,0.55); padding-top:16px; }
.s4-lines .s4-label { display:block; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.20em; text-transform:uppercase; color:rgba(241,230,207,0.92); margin-bottom:12px; }
.s4-lines p { font-family:var(--font-body); font-size:15px; line-height:1.55; color:rgba(241,230,207,0.88); margin:0; }
.s4-foot { display:flex; justify-content:space-between; align-items:baseline; gap:32px; margin-top:44px; padding-top:22px; border-top:1px solid rgba(184,147,63,0.35); }
.s4-foot p { font-family:var(--font-body); font-style:italic; font-size:15px; line-height:1.6; color:rgba(241,230,207,0.62); margin:0; max-width:760px; }
.s4-foot a { font-family:var(--font-body); font-style:italic; font-size:16px; color:#E6BF6A; text-decoration:none; white-space:nowrap; border-bottom:1px solid rgba(230,191,106,0.5); padding-bottom:2px; }
.s4-foot a:hover { color:#FBE2A0; border-color:#FBE2A0; }

@media (max-width:768px) {
  .s4-paper { padding:72px 0 80px; }
  .s4-paperwrap { margin-bottom:-30px; }
  .s4-paper { -webkit-mask-size:100% calc(100% - 40px), auto 40px; -webkit-mask-repeat:no-repeat, repeat-x; mask-size:100% calc(100% - 40px), auto 40px; mask-repeat:no-repeat, repeat-x; }
  .s4-rule { margin-top:22px; }
  /* phones: the corridor becomes a lit backdrop and the four doors become four glass plaques, two by two */
  .s4-corridor { aspect-ratio:auto; padding:70px 16px 28px; }
  .s4-plate { inset:0; }
  .s4-plate img { filter:brightness(0.32) saturate(0.8) blur(3px); }  /* the painted names in the plate must not ghost behind the plaques */
  .s4-doors { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .s4-door { position:relative; left:auto; width:auto; top:auto; height:auto; aspect-ratio:3 / 3.4; border:7px solid #2B1B10; box-shadow:0 0 0 1px rgba(218,173,80,0.45) inset, 0 8px 18px rgba(0,0,0,0.6);
    background:radial-gradient(ellipse 80% 60% at 50% 30%, rgba(214,196,168,0.92), rgba(140,124,104,0.9) 70%, rgba(90,80,68,0.95) 100%); }
  .s4-door a { gap:8px; padding:0 10px; }
  .s4-door a > span { opacity:1; }
  .s4-num { font-size:11px; text-shadow:0 0 1px rgba(70,35,0,0.9), 0 0 6px rgba(255,180,70,0.35); }
  .s4-name { font-family:var(--font-ui); font-weight:700; font-size:15px; letter-spacing:0.05em; color:#1A1612; text-shadow:none; }
  .s4-num { display:none; }
  .s4-lines { padding:36px 0 56px; }
  .s4-lines ol { grid-template-columns:1fr; gap:18px; }
  .s4-foot { flex-direction:column; gap:14px; margin-top:32px; }
}

/* ---- Phones, m05 the marquee stack (Davis pick 2026-10-04): the corridor is cut, the four names become four lines of keyed
   cream lettering on black with cold slat shadows, gold mono numerals at the left, each door's one line under its name. ---- */
.s4-name-m { display:none; }
@media (max-width:768px) {
  .s4-corridor { display:none; }
  .s4-paperwrap { margin-bottom:0; }
  .s4-lines { padding:30px 16px 56px; overflow:hidden; }
  /* the window off screen: cold slats across the black, strongest at the top-left, gone by the right edge */
  .s4-lines::before { content:""; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(-32deg, rgba(74,104,140,0) 0 26px, rgba(74,104,140,0.22) 26px 40px);
    -webkit-mask-image:linear-gradient(100deg, #000 0%, rgba(0,0,0,0.55) 45%, transparent 90%), linear-gradient(#000 0%, #000 70%, transparent 100%);
    -webkit-mask-composite:source-in; mask-image:linear-gradient(100deg, #000 0%, rgba(0,0,0,0.55) 45%, transparent 90%), linear-gradient(#000 0%, #000 70%, transparent 100%); mask-composite:intersect; }
  .s4-lines ol { position:relative; grid-template-columns:1fr; gap:0; }
  .s4-lines li { display:grid; grid-template-columns:40px 1fr; grid-template-areas:"num name" "num line"; column-gap:6px; align-items:start;
    border-top:0; border-bottom:1px solid rgba(184,147,63,0.45); padding:26px 0 24px; }
  .s4-lines li:first-child { padding-top:18px; }
  .s4-lines .s4-label { grid-area:num; margin:0; padding-top:14px; font-size:12px; color:#C9A24A; }
  .s4-sep, .s4-t { display:none; }
  .s4-name-m { grid-area:name; display:block; line-height:0; }
  .s4-name-m img { display:block; height:46px; width:auto; max-width:100%; }
  .s4-lines p { grid-area:line; margin:12px 0 0; font-size:16px; line-height:1.5; max-width:300px; }
  .s4-foot { position:relative; margin-top:26px; padding-top:22px; border-top:0; }
  .s4-foot p { font-size:15px; }
}
@media (max-width:360px) { .s4-name-m img { height:40px; } }
/* phone tune 2 (2026-10-04): thin soft blind slats fading off to the right, headline full width, tighter gaps */
@media (max-width:768px) {
  .s4-paper { padding:64px 0 56px; }
  .s4-h2-img { width:106%; max-width:none; margin-left:-3%; }
  .s4-lines::before {
    background:repeating-linear-gradient(-34deg, rgba(86,118,160,0) 0px, rgba(86,118,160,0) 30px, rgba(86,118,160,0.10) 34px, rgba(86,118,160,0.20) 38px, rgba(86,118,160,0.10) 42px, rgba(86,118,160,0) 46px);
    -webkit-mask-image:linear-gradient(105deg, #000 0%, rgba(0,0,0,0.6) 40%, transparent 85%); -webkit-mask-composite:source-over;
    mask-image:linear-gradient(105deg, #000 0%, rgba(0,0,0,0.6) 40%, transparent 85%); mask-composite:add; filter:blur(1.2px); }
  .s4-lines { padding-top:14px; }
  .s4-lines li:first-child { padding-top:10px; }
  .s4-foot { margin-top:22px; padding-top:0; }
}