/* L'Officiel India: pages shared with the FHM engine (profiles, web stories, report box, legal pages).
   Rules come from the FHM stylesheets; the FHM names below point at L'Officiel's own colours and fonts. */
:root { --display: var(--serif); --text: var(--sans); --grey: var(--ink-soft); --smoke: var(--paper-2); --stone: #efede9; }
.ws-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.ws { position: relative; flex: 0 0 auto; width: 150px; aspect-ratio: 9 / 16; overflow: hidden; scroll-snap-align: start; background: var(--ink); color: #fff; }
.ws::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 3px; background: rgba(255,255,255,.55); z-index: 1; }
.ws::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.85)); }
.ws img { position: absolute; inset: 0; }
.ws-txt { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; font: 800 19px/1 var(--display); }
.ws-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.ws-head h2 { font: 800 28px/1 var(--display); margin: 0; }
.ws-head span { color: var(--grey); font-size: 14px; }
@media (max-width: 760px) {
  .ws { width: 128px; }
}
.stories .ws-head { border-top: 6px solid var(--ink); padding-top: 12px; }
/* from article.css */
.ws-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.split-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 24px 0; }
.split-more.n1 { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
.split-more img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; display: block; }
/* from extra.css */
.body.legal > p:first-child::first-letter { float: none; font: inherit; color: inherit; margin: 0; }
.body.legal h2 { font-size: 22px; margin-top: 28px; }
.ws-head span a { color: inherit; text-decoration: underline; font-weight: 600; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 8px 0 40px; }
.ws-grid .ws { width: auto; }
@media (max-width: 760px) {
  .ws-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
html.rep-open, html.rep-open body { overflow: hidden; }
.rep-card { position: relative; background: #fff; color: #111; width: 100%; max-width: 560px; padding: 24px 22px; max-height: calc(100svh - 32px); overflow: auto; border-top: 5px solid var(--red, var(--red)); }
.rep-card h2 { font: 900 30px/1 var(--display, "Arial Narrow", sans-serif); margin: 0 0 6px; }
.rep-lead { margin: 0 0 14px; color: #555; font-size: 15px; }
.rep-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: #111; }
.rep-l { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 6px; }
.rep-opts { display: grid; gap: 6px; font-size: 15px; }
.rep-part { grid-auto-flow: column; justify-content: start; gap: 16px; }
.rep-card textarea, .rep-card input:not([type=radio]) { width: 100%; box-sizing: border-box; border: 1px solid #c9c9c5; padding: 10px; font: inherit; font-size: 15px; border-radius: 0; }
.rep-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; max-height: 220px; overflow: auto; }
.rep-grid button { padding: 0; border: 3px solid transparent; background: #eee; cursor: pointer; aspect-ratio: 1; }
.rep-grid button.on { border-color: var(--red, var(--red)); }
.rep-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rep-cap { display: flex; gap: 8px; align-items: center; }
.rep-cap img { border: 1px solid #ddd; flex: none; }
.rep-cap button { border: 1px solid #c9c9c5; background: #fff; width: 40px; height: 40px; cursor: pointer; flex: none; font-size: 18px; }
.rep-btn { margin-top: 16px; background: #111; color: #fff; border: 0; padding: 12px 18px; font-weight: 700; font-size: 15px; cursor: pointer; }
.rep-btn:disabled { opacity: .5; }
.rep-link { margin: 16px 0 0 12px; border: 0; background: none; text-decoration: underline; cursor: pointer; font: inherit; }
.rep-err { color: #c00; font-size: 14px; margin: 10px 0 0; min-height: 1em; }
.rep-done { font-size: 17px; line-height: 1.5; }
@media (max-width: 760px) {
  .rep-card { max-height: 92svh; padding: 20px 16px; }
  .rep-row { grid-template-columns: 1fr; gap: 0; }
  .rep-cap img { width: 150px; height: auto; }
}
.people-list { list-style:none;padding:0;margin:8px 0 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px }
.people-list a { display:block;padding:14px 16px;border:1px solid #ddd;text-decoration:none;color:inherit }
.people-list a:hover { border-color:var(--red) }
.people-list b { display:block;font-size:17px }
.people-list span { display:block;font-size:14px;color:#666;margin-top:2px }
.pf-top { background:#000;color:#fff }
.pf-hero { display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:44px;align-items:end;padding-top:34px;padding-bottom:40px }
.pf-pic { margin:0 }
.pf-pic img { aspect-ratio:3/4;height:auto;object-position:50% 15% }
.pf-pic figcaption { font-size:12px;color:#8a8a8a;margin-top:6px }
.pf-pic figcaption a { color:#8a8a8a }
.pf-card { aspect-ratio:3/4;background:#1c1c1c;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;text-align:center;padding:16px }
.pf-card span { font:900 clamp(34px,5vw,56px)/.95 "Big Shoulders Display","Arial Narrow",sans-serif;text-transform:uppercase }
.pf-card b { color:var(--red);letter-spacing:.2em;font-size:13px;text-transform:uppercase }
.pf-ig { max-width:340px }
.pf-crumbs { display:flex;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:700;color:#9a9a9a;margin-bottom:12px }
.pf-crumbs a { color:#ff4a3d }
.pf-kick { color:#ff4a3d;font-weight:700;font-size:14px }
.pf-hero h1 { font:900 clamp(56px,9vw,120px)/.85 "Big Shoulders Display","Arial Narrow",sans-serif;margin:6px 0 16px }
.pf-hero p { margin:0 0 16px;color:#d6d6d6;font-size:18px;line-height:1.55;max-width:58ch }
.pf-social { display:flex;flex-wrap:wrap;gap:8px;align-items:center }
.pf-hero .pf-social span { font-size:12px;color:#9a9a9a;font-weight:700;margin-right:4px }
.pf-social a { border:1px solid #555;padding:6px 12px;font-size:14px;font-weight:600;color:#fff }
.pf-social a:hover { border-color:#ff4a3d;color:#ff4a3d }
.pf-grid { display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding-top:40px;padding-bottom:48px;align-items:start }
.pf-main>section+section { margin-top:48px }
.pf-main h2 { font:800 clamp(30px,3.4vw,40px)/1 "Big Shoulders Display","Arial Narrow",sans-serif;margin:0 0 18px;border-top:6px solid #000;padding-top:12px }
.pf-main p,.pf-main li { font-size:17px;line-height:1.7;max-width:68ch }
.pf-main p { margin:0 0 16px }
.pf-src { margin:0;padding-left:20px;font-size:15px;color:#9a9a9a }
.pf-src li { font-size:15px;line-height:1.6 }
.pf-src a { color:#9a9a9a;border-bottom:1px solid #d6d6d6;word-break:break-word }
.pf-src a:hover { color:#000 }
.pf-main .pf-note { font-size:14px;color:#6b6b6b;margin-top:14px }
.pf-share { margin-top:28px }
.pf-rail { display:grid;gap:24px;position:sticky;top:130px }
.pf-facts { border-top:6px solid var(--red);background:#f2f2f0;padding:18px 20px 8px }
.pf-facts h2 { font:800 26px/1 "Big Shoulders Display","Arial Narrow",sans-serif;margin:0 0 8px }
.pf-facts dl { margin:0 }
.pf-facts dl div { padding:10px 0;border-bottom:1px solid #dcdcdc }
.pf-facts dl div:last-child { border-bottom:0 }
.pf-facts dt { font-size:12px;font-weight:700;color:#6b6b6b }
.pf-facts dd { margin:2px 0 0;font-weight:600;font-size:15px }
.pf-age { color:#6b6b6b;font-weight:500 }
.pf-report { border:1px solid #dcdcdc;padding:16px 18px;font-size:14px }
.pf-report b { display:block;font:800 20px/1 "Big Shoulders Display","Arial Narrow",sans-serif;margin-bottom:6px }
.pf-report p { margin:0 0 12px;color:#444 }
.pf-report button { background:#000;color:#fff;border:0;padding:10px 14px;font:700 14px "Archivo",sans-serif;cursor:pointer }
.pf-report button:hover { background:var(--red) }
@media (max-width:1024px) {
  .pf-grid { grid-template-columns:1fr }
  .pf-rail { display:contents }
  .pf-facts { order:-1 }
}
@media (max-width:760px) {
  .pf-hero { grid-template-columns:1fr;gap:20px;padding-top:20px }
  .pf-pic { width:60% }
  .pf-ig { width:100% }
  .pf-hero p { font-size:16px }
  .pf-grid { gap:32px;padding-top:28px }
}
.pf-works { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px }
.pf-works li[hidden] { display:none }
.pf-works li { display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid #e6e3dc }
.pf-works b { display:block;font:800 18px/1.1 "Big Shoulders Display","Arial Narrow",sans-serif }
.pf-yr { flex:0 0 44px;font:800 15px/1 "Big Shoulders Display","Arial Narrow",sans-serif;color:var(--red,var(--red)) }
.pf-works li span:not(.pf-yr) { display:block;font-size:13px;color:#6b6b6b;margin-top:2px }
.pf-poster { aspect-ratio:2/3;background:linear-gradient(160deg,#222,#000);color:#fff;display:flex;align-items:flex-end;padding:10px }
.pf-poster span { font:900 19px/.95 "Big Shoulders Display","Arial Narrow",sans-serif }
.pf-more { margin-top:20px;background:none;border:2px solid #000;padding:10px 18px;font:700 14px "Archivo",sans-serif;cursor:pointer }
.pf-more:hover { background:#000;color:#fff }
.pf-awards { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px }
.pf-awards li { display:grid;gap:2px;padding:12px 0;border-bottom:1px solid #dcdcdc }
.pf-awards .aw { font-size:12px;font-weight:700;color:var(--red) }
.pf-awards b { font:800 21px/1.05 "Big Shoulders Display","Arial Narrow",sans-serif }
.pf-awards li>span:last-child { font-size:14px;color:#444 }
.pf-main .pf-srcbox h2 { display:none }
.pf-srcbox { border-top:1px solid #dcdcdc;padding-top:14px }
.pf-srcbox summary { cursor:pointer;font-weight:700;font-size:15px }
.pf-srcbox details[open] summary { margin-bottom:10px }
.links-grid { padding-bottom:40px }
@media (max-width:760px) {
  .pf-works { grid-template-columns:1fr }
  .pf-awards { grid-template-columns:1fr }
}
.pf-stats-wrap { overflow-x:auto }
.pf-stats { border-collapse:collapse;width:100%;font-size:15px;min-width:420px }
.pf-stats th,.pf-stats td { padding:9px 10px;border-bottom:1px solid #dcdcdc;text-align:right;white-space:nowrap }
.pf-stats th { font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#6b6b6b;border-bottom:2px solid #000 }
.pf-stats th:first-child,.pf-stats td:first-child { text-align:left;font-weight:700 }
.sl-box { display: grid; gap: 14px; margin: 0 0 24px; }
.feed-side .sl-box { margin: 0; }
.sl-box h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0; padding-bottom: 8px; border-bottom: 2px solid currentColor; }
.sl { border: 1px solid rgba(127,127,127,.28); border-radius: 8px; padding: 12px; display: grid; gap: 8px; min-width: 0; }
.sl-h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sl-h time { margin-left: auto; font-size: 12px; opacity: .65; }
.sl-instagram .sl-h svg { color: #d62976; }
.sl-facebook .sl-h svg { color: #1877f2; }
.sl-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: rgba(127,127,127,.12); }
.sl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-t { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.sl-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 600; }
.sl-links a, .sl-go { text-decoration: underline; text-underline-offset: 3px; font-size: 13px; font-weight: 600; }
@media (max-width: 900px) {
  .sl-box { grid-template-columns: repeat(3, minmax(240px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .sl-box h2 { grid-column: 1 / -1; position: sticky; left: 0; }
  .sl { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .sl-box { grid-template-columns: repeat(3, 80%); }
}
.sl-person .sl-h a { margin-left: auto; font-size: 13px; opacity: .8; }
.sl-person .instagram-media { max-width: 100% !important; }
.sl-person .sl-fb { display: block; min-height: 420px; }
.pf-updating { margin: 12px auto; padding: 10px 14px; background: #fff4d6; color: #5a4300; border-radius: 6px; font-size: 14px; }
.pf-rail { grid-template-columns:minmax(0,1fr) }
.pf-facts dd { overflow-wrap:anywhere }
.pf-hero>div { min-width:0 }
.pf-hero h1 { overflow-wrap:anywhere }
@media (max-width:1024px) {
  .pf-grid { grid-template-columns:minmax(0,1fr) }
}
blockquote.instagram-media { font:14px/1.4 "Archivo",Arial,sans-serif;border:0;padding:0;margin:0 0 12px }
.links-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px }
@media (max-width:760px) {
  .links-grid { grid-template-columns:minmax(0,1fr) }
}
.pf-main>.house,.pf-main>.ad { margin:8px 0 28px }
.pf-main .pf-report { margin-top:28px }
.pf-sharebox { border:1px solid #dcdcdc;padding:16px 18px }
.pf-sharebox b { display:block;font:800 20px/1 "Big Shoulders Display","Arial Narrow",sans-serif;margin-bottom:10px }
@media (max-width:1024px) {
  .pf-sharebox { display:none }
}
.pf-yr { flex:0 0 auto;min-width:44px;white-space:nowrap }
html.wsp-open, html.wsp-open body { overflow: hidden; }
.wsp { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.92); display: grid; place-items: center; }
.wsp-in { position: relative; height: min(100svh, 100vh); width: min(100vw, calc(min(100svh, 100vh) * 9 / 16)); }
.wsp-in amp-story-player { display: block; width: 100%; height: 100%; }
.wsp-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #bbb; font-size: 15px; }
.wsp:focus { outline: none; }
.wsp-btns { position: fixed; top: 10px; right: 12px; z-index: 2; display: flex; gap: 10px; }
.wsp-x, .wsp-p { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.wsp-p { font-size: 15px; letter-spacing: -2px; }
.wsp-x:hover, .wsp-x:focus-visible, .wsp-p:hover, .wsp-p:focus-visible { background: var(--red, #e10600); outline: none; }
@media (min-width: 761px) {
  .wsp-in { height: calc(min(100svh, 100vh) - 32px); width: calc((min(100svh, 100vh) - 32px) * 9 / 16); border-radius: 10px; overflow: hidden; }
  .wsp-btns { top: 16px; right: 20px; }
}
@media (max-width: 760px) {
  .wsp-btns { top: 22px; right: auto; left: 10px; }
  .wsp-x, .wsp-p { width: 38px; height: 38px; }
}