/* Shared design-1 (RAIL) styles for all v4 variants */
:root{
  --bg:#f1efea; --fg:#161616; --mut:#8c897f; --faint:rgba(22,22,22,.16);
  --line:#e0ddd4; --paper:#fff; --brand:#f46e1f; --rail:96px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}
body{background:var(--bg);color:var(--fg);font-family:'Inter',system-ui,sans-serif;overflow-x:hidden;letter-spacing:-.01em;}
::selection{background:var(--brand);color:#fff;}
a{color:inherit;text-decoration:none;}
.pad{padding-left:6vw;padding-right:calc(var(--rail) + 2vw);}
@media(max-width:780px){.pad{padding-right:6vw;}:root{--rail:0px;}}

/* RIGHT RAIL nav */
.rail{position:fixed;right:30px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;align-items:flex-end;gap:26px;opacity:0;animation:railIn .8s .4s ease forwards;}
@keyframes railIn{to{opacity:1;}}
.rail .mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--fg);color:#fff;font-weight:800;font-size:17px;}
.rail nav{display:flex;flex-direction:column;align-items:flex-end;gap:16px;}
.rail nav a{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--mut);transition:color .25s;}
.rail nav a .d{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .25s,transform .25s;}
.rail nav a:hover{color:var(--fg);}
.rail nav a.active{color:var(--fg);font-weight:700;}
.rail nav a.active .d{background:var(--brand);transform:scale(1.5);}
.rail .prog{width:2px;height:120px;background:var(--line);border-radius:2px;position:relative;overflow:hidden;}
.rail .prog i{position:absolute;top:0;left:0;width:100%;height:0;background:var(--brand);}
.rail .loc{font-size:10px;letter-spacing:.16em;color:var(--mut);writing-mode:vertical-rl;}
@media(max-width:780px){
  .rail{right:0;left:0;bottom:0;top:auto;transform:none;flex-direction:row;justify-content:center;align-items:center;gap:14px;
    padding:10px;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-top:1px solid var(--line);}
  .rail .prog,.rail .loc,.rail nav a .t{display:none;}
  .rail nav{flex-direction:row;gap:18px;}
  .rail nav a .d{width:9px;height:9px;}
}

/* PORTRAIT card (shared) */
.portrait{position:relative;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 0%,#ff8a3d 0%,#f46e1f 38%,#7a3308 100%);box-shadow:0 30px 70px -34px rgba(124,52,12,.6);}
.portrait::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 65% 75%,transparent 30%,rgba(20,10,4,.78) 100%);}
.portrait .ph{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:center;height:78%;
  font-weight:900;font-size:230px;color:rgba(20,8,2,.5);line-height:.7;z-index:1;}
.portrait .tag{position:absolute;left:18px;top:16px;z-index:2;font-size:12px;font-weight:600;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);padding:7px 12px;border-radius:30px;}

/* DOSSIER work */
.dossier{padding-top:6vh;padding-bottom:10vh;}
.hd{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--fg);padding-top:14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:500;}
.hd b{color:var(--fg);font-weight:700;}
.grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;margin-top:30px;}
@media(max-width:880px){.grid{grid-template-columns:1fr;gap:0;}}
.sticky{position:sticky;top:16vh;height:66vh;align-self:start;}
@media(max-width:880px){.sticky{display:none;}}
.panel{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;background:#222;box-shadow:0 30px 60px -34px rgba(0,0,0,.45);}
.panel .ly{position:absolute;inset:0;opacity:0;transition:opacity .5s;display:flex;flex-direction:column;justify-content:space-between;padding:30px;color:inherit;text-decoration:none;pointer-events:none;}
.panel .ly.on{opacity:1;pointer-events:auto;}
.panel a.ly{cursor:pointer;}
.panel .ly .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,6,.15) 0%,rgba(15,10,6,.42) 100%);transition:opacity .55s ease;pointer-events:none;}
.panel .ly:hover .scrim{opacity:0;}
.panel .ly .big{position:relative;z-index:1;font-weight:900;font-size:clamp(120px,16vw,210px);line-height:.8;color:rgba(255,255,255,.14);letter-spacing:-.04em;}
.panel .ly .ft{position:relative;z-index:1;color:#fff;}
.panel .bar{pointer-events:none;}
.panel .ly .ft .t{font-weight:700;font-size:30px;letter-spacing:-.02em;}
.panel .ly .ft .r{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:6px;}
.panel .bar{position:absolute;left:0;bottom:0;height:3px;background:var(--brand);width:0;transition:width .3s;}
.blocks{display:flex;flex-direction:column;}
.block{padding:7vh 0;border-bottom:1px solid var(--line);}
.block:first-child{padding-top:1vh;}
.block:last-child{padding-bottom:calc(14vh + 40px);border-bottom:none;}
.block .ix{font-size:13px;color:var(--brand);font-weight:700;letter-spacing:.04em;}
.block h3{font-weight:800;font-size:clamp(34px,5.5vw,64px);letter-spacing:-.035em;line-height:1;margin-top:10px;}
.block p{font-size:15.5px;line-height:1.7;color:#4f4d46;margin-top:16px;max-width:46ch;}
.block .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.block .chip{font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:30px;padding:5px 13px;font-weight:500;}
.block .view{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:14px;font-weight:600;}
.block .view .ar{transition:transform .3s,color .3s;}
.block .view:hover .ar{transform:translate(4px,-4px);color:var(--brand);}
.block .thumb{display:none;}
@media(max-width:880px){.block .thumb{display:flex;align-items:flex-end;height:200px;border-radius:12px;padding:18px;margin-top:22px;color:#fff;}
  .block .thumb .tg{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;}}

/* CONTACT */
.contact{padding-top:8vh;padding-bottom:18vh;border-top:1px solid var(--line);}
.contact .big{font-weight:800;font-size:clamp(44px,9vw,128px);line-height:.92;letter-spacing:-.045em;}
.contact .big .o{color:var(--brand);}
.contact .links{display:flex;gap:28px;flex-wrap:wrap;margin-top:38px;font-size:15px;font-weight:500;}
.contact .links a{position:relative;padding-bottom:3px;}
.contact .links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--fg);transform:scaleX(0);transform-origin:right;transition:transform .35s;}
.contact .links a:hover::after{transform:scaleX(1);transform-origin:left;}
.contact .links a.mail::after{background:var(--brand);transform:scaleX(1);}