/* ==========================================================================
   Cedolin Home — cedolinhome.com
   Typography: EB Garamond (display) + DM Mono (metadata)
   ========================================================================== */

:root{
  --paper:#F1ECE3;
  --paper-2:#E6DED0;
  --ink:#191613;
  --ink-2:#6B6153;
  --ink-3:#9A8F7E;
  --line:#D3C9B8;
  --rail:176px;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);
     -webkit-font-smoothing:antialiased;}
img{display:block;width:100%;height:100%;object-fit:cover;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

.mono{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
      text-transform:uppercase;font-weight:300;}

/* ---------- paper grain ---------- */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.16'/></svg>");}

/* ---------- rail (numbered index) ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:50;
  background:var(--paper);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:space-between;padding:36px 0 32px 26px;}
.rail .wmh{font-size:12.5px;letter-spacing:.30em;text-transform:uppercase;line-height:2.0;}
.rail nav{display:flex;flex-direction:column;align-items:flex-start;}
.rail nav a{display:flex;gap:12px;width:124px;border-top:1px solid var(--line);
  padding:11px 0;color:var(--ink-2);}
.rail nav a:last-child{border-bottom:1px solid var(--line);}
.rail nav a .n{color:var(--ink-3);}
.rail nav a.on{color:var(--ink);}
.rail nav a.on .n{color:var(--ink);}
.rail nav a:hover{color:var(--ink);}
.rail .esth{color:var(--ink-3);}

/* ---------- horizontal stage (home + interiors) ---------- */
.stage{position:fixed;left:var(--rail);top:0;right:0;bottom:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
.stage::-webkit-scrollbar{display:none;}
.track{display:flex;height:100%;align-items:stretch;}
.plate{position:relative;height:100%;flex:0 0 auto;
  display:flex;flex-direction:column;justify-content:center;padding:96px 0 104px;}
.plate.dark{background:var(--ink);color:#EFE9DE;}
.plate.tone{background:var(--paper-2);}
.k{color:var(--ink-3);}

.reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s cubic-bezier(.16,1,.3,1);}
.reveal.in{clip-path:inset(0 0 0 0);}

/* title plate */
.p-title{width:1320px;padding-left:110px;padding-right:110px;}
.p-title .bg{position:absolute;inset:0;overflow:hidden;}
.p-title .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,15,11,.84) 0%,rgba(18,15,11,.58) 36%,
             rgba(18,15,11,.16) 70%,rgba(18,15,11,.06) 100%);}
.p-title .inner{position:relative;z-index:2;color:#F4EFE6;}
.p-title h1{font-weight:400;font-size:92px;line-height:.94;letter-spacing:.055em;
  text-transform:uppercase;margin-left:-6px;}
.p-title .tag{margin-top:26px;color:rgba(244,239,230,.78);}
.p-title .meta{position:absolute;left:110px;bottom:104px;z-index:2;
  color:rgba(244,239,230,.6);display:flex;gap:26px;align-items:center;}
.p-title .meta .ln{width:52px;height:1px;background:rgba(244,239,230,.4);}

/* the wall */
.p-wall{padding-left:110px;padding-right:270px;padding-top:64px;padding-bottom:56px;}
.p-wall .head{max-width:540px;margin-bottom:38px;}
.p-wall .head .k{margin-bottom:14px;}
.p-wall .head h2{font-size:25px;font-weight:400;line-height:1.5;}
.wall{position:relative;width:1311px;height:430px;}
.strip{display:flex;height:100%;gap:3px;}
.strip .seg{flex:0 0 auto;height:100%;overflow:hidden;}
.anno{position:absolute;z-index:3;}
.anno .dot{width:7px;height:7px;border:1px solid rgba(255,255,255,.9);
  border-radius:50%;position:absolute;left:-3.5px;top:-3.5px;}
.anno .stem{position:absolute;left:0;width:1px;background:rgba(255,255,255,.6);}
.anno .stem.out{background:var(--ink-3);opacity:.75;}
.anno .lab{position:absolute;white-space:nowrap;color:var(--ink);}
.anno .lab b{font-weight:400;}
.anno .lab i{font-style:normal;color:var(--ink-3);}
.wall-list{display:none;}

/* statement plate */
.p-say{width:820px;padding:96px 120px 104px;}
.p-say .k{margin-bottom:32px;}
.p-say p{font-size:29px;line-height:1.56;}
.p-say .sub{font-size:16.5px;line-height:1.9;color:var(--ink-2);margin-top:30px;max-width:480px;}

/* triptych */
.p-tri{width:1620px;padding-left:60px;padding-right:120px;}
.p-tri .row{display:flex;align-items:center;gap:64px;height:620px;}
.p-tri figure{flex:0 0 auto;}
.p-tri .art{overflow:hidden;}
.p-tri figcaption{margin-top:14px;color:var(--ink-2);}
.p-tri .a .art{width:400px;height:270px;}
.p-tri .b{align-self:flex-start;margin-top:14px;}
.p-tri .b .art{width:300px;height:400px;}
.p-tri .c{align-self:flex-end;margin-bottom:26px;}
.p-tri .c .art{width:360px;height:225px;}
.p-tri .note{flex:0 0 auto;width:190px;color:var(--ink-2);font-size:15.5px;
  line-height:1.85;align-self:flex-end;margin-bottom:70px;}

/* interiors band */
.p-int{width:1320px;padding-right:120px;}
.p-int .band{position:relative;height:580px;}
.p-int .band .art{position:absolute;left:0;top:0;width:900px;height:100%;overflow:hidden;}
.p-int .band .card{position:absolute;right:0;bottom:-44px;width:430px;background:var(--paper);
  padding:52px 46px 46px;border-left:1px solid var(--line);}
.p-int .card .k{margin-bottom:18px;}
.p-int .card h2{font-size:26px;font-weight:400;line-height:1.45;margin-bottom:18px;}
.p-int .card p{font-size:16px;line-height:1.9;color:var(--ink-2);}

/* the edit */
.p-edit{width:1020px;padding-left:130px;padding-right:130px;}
.p-edit .k{margin-bottom:30px;}
.p-edit h2{font-size:44px;font-weight:400;line-height:1.24;}
.p-edit p{font-size:16.5px;line-height:1.9;color:var(--ink-2);margin-top:26px;max-width:430px;}
.p-edit .still{width:280px;height:132px;overflow:hidden;margin-top:56px;}
.p-edit .st{margin-top:16px;color:var(--ink-3);}

/* trade */
.p-trade{width:940px;padding-left:120px;padding-right:120px;}
.p-trade .bg{position:absolute;inset:0;overflow:hidden;opacity:.26;}
.p-trade .inner{position:relative;z-index:2;}
.p-trade .k{color:rgba(239,233,222,.5);margin-bottom:30px;}
.p-trade h2{font-size:30px;font-weight:400;line-height:1.55;}
.p-trade p{font-size:16px;line-height:1.9;color:rgba(239,233,222,.66);margin-top:26px;max-width:430px;}

/* end plate */
.p-end{width:900px;padding-left:120px;padding-right:140px;}
.p-end .k{margin-bottom:30px;}
.p-end h2{font-size:34px;font-weight:400;line-height:1.35;margin-bottom:34px;}
.p-end .mail{font-size:22px;border-bottom:1px solid var(--ink);padding-bottom:8px;
  display:inline-block;}
.p-end .cols{display:flex;gap:70px;margin-top:64px;color:var(--ink-2);}
.p-end .cols div p{font-size:15.5px;line-height:1.95;}
.p-end .cols h4{color:var(--ink-3);margin-bottom:14px;font-weight:400;}

.link{display:inline-block;margin-top:34px;border-bottom:1px solid currentColor;
  padding-bottom:6px;align-self:flex-start;}
.plate.dark .link{color:#EFE9DE;}

/* split plates — image beside text, both sized to the real aspect ratio */
.plate.split{flex-direction:row;align-items:center;gap:74px;}
.plate.split .col{display:flex;flex-direction:column;align-items:flex-start;}
.plate.split .art{flex:0 0 auto;overflow:hidden;}
.p-say.split{width:auto;}
.p-say.split .col{width:470px;}
.p-trade.split .col{width:430px;}
.p-end.split .col{width:420px;}
.p-edit .stills{display:flex;gap:26px;margin-top:52px;}
.p-edit .stills .art{overflow:hidden;}
.p-int .band .arts{display:flex;gap:3px;height:100%;}
.p-int .band .arts .art{position:static;flex:0 0 auto;overflow:hidden;}

/* split plates — image beside text, both sized to the real aspect ratio */
.plate.split{flex-direction:row;align-items:center;gap:74px;}
.plate.split .col{display:flex;flex-direction:column;align-items:flex-start;}
.plate.split .art{flex:0 0 auto;overflow:hidden;}
.p-say.split{width:auto;}
.p-say.split .col{width:470px;}
.p-trade.split .col{width:430px;}
.p-end.split .col{width:420px;}
.p-edit .stills{display:flex;gap:26px;margin-top:52px;}
.p-edit .stills .art{overflow:hidden;}
.p-int .band .arts{display:flex;gap:3px;height:100%;}
.p-int .band .arts .art{position:static;flex:0 0 auto;overflow:hidden;}

/* split plates — image beside text, both sized to the real aspect ratio */
.plate.split{flex-direction:row;align-items:center;gap:74px;}
.plate.split .col{display:flex;flex-direction:column;align-items:flex-start;}
.plate.split .art{flex:0 0 auto;overflow:hidden;}
.p-say.split{width:auto;}
.p-say.split .col{width:470px;}
.p-trade.split .col{width:430px;}
.p-end.split .col{width:420px;}
.p-edit .stills{display:flex;gap:26px;margin-top:52px;}
.p-edit .stills .art{overflow:hidden;}
.p-int .band .arts{display:flex;gap:3px;height:100%;}
.p-int .band .arts .art{position:static;flex:0 0 auto;overflow:hidden;}

/* split plates — image beside text, both sized to the real aspect ratio */
.plate.split{flex-direction:row;align-items:center;gap:74px;}
.plate.split .col{display:flex;flex-direction:column;align-items:flex-start;}
.plate.split .art{flex:0 0 auto;overflow:hidden;}
.p-say.split{width:auto;}
.p-say.split .col{width:470px;}
.p-trade.split .col{width:430px;}
.p-end.split .col{width:420px;}
.p-edit .stills{display:flex;gap:26px;margin-top:52px;}
.p-edit .stills .art{overflow:hidden;}
.p-int .band .arts{display:flex;gap:3px;height:100%;}
.p-int .band .arts .art{position:static;flex:0 0 auto;overflow:hidden;}

/* split plates — image beside text, both sized to the real aspect ratio */
.plate.split{flex-direction:row;align-items:center;gap:74px;}
.plate.split .col{display:flex;flex-direction:column;align-items:flex-start;}
.plate.split .art{flex:0 0 auto;overflow:hidden;}
.p-say.split{width:auto;}
.p-say.split .col{width:470px;}
.p-trade.split .col{width:430px;}
.p-end.split .col{width:420px;}
.p-edit .stills{display:flex;gap:26px;margin-top:52px;}
.p-edit .stills .art{overflow:hidden;}
.p-int .band .arts{display:flex;gap:3px;height:100%;}
.p-int .band .arts .art{position:static;flex:0 0 auto;overflow:hidden;}

/* split plates — image beside text, both sized to the real aspect ratio */
.plate.split{flex-direction:row;align-items:center;gap:74px;}
.plate.split .col{display:flex;flex-direction:column;align-items:flex-start;}
.plate.split .art{flex:0 0 auto;overflow:hidden;}
.p-say.split{width:auto;}
.p-say.split .col{width:470px;}
.p-trade.split .col{width:430px;}
.p-end.split .col{width:420px;}
.p-edit .stills{display:flex;gap:26px;margin-top:52px;}
.p-edit .stills .art{overflow:hidden;}
.p-int .band .arts{display:flex;gap:3px;height:100%;}
.p-int .band .arts .art{overflow:hidden;}

/* status bar */
.hud{position:fixed;left:var(--rail);right:0;bottom:0;height:58px;z-index:55;
  display:flex;align-items:center;gap:28px;padding:0 40px 0 44px;
  border-top:1px solid var(--line);background:rgba(241,236,227,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.hud .now{color:var(--ink);flex:0 0 auto;}
.hud .bar{flex:1 1 auto;height:1px;background:var(--line);position:relative;}
.hud .bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--ink);width:8%;}
.hud .cnt,.hud .hint{color:var(--ink-3);flex:0 0 auto;}

/* cursor label */
.cur{position:fixed;z-index:80;pointer-events:none;transform:translate(-50%,-50%);
  padding:10px 15px;border:1px solid rgba(255,255,255,.55);border-radius:60px;
  color:#fff;opacity:0;transition:opacity .35s ease;background:rgba(0,0,0,.12);}
.cur.on{opacity:1;}

/* ==========================================================================
   VERTICAL PAGES (shop / about / contact)
   ========================================================================== */
.page{margin-left:var(--rail);min-height:100vh;padding:120px 110px 120px;}
.page .wrap{max-width:1040px;}
.page .k{margin-bottom:26px;}
.page h1{font-size:46px;font-weight:400;line-height:1.2;letter-spacing:.01em;margin-bottom:34px;}
.page h2{font-size:26px;font-weight:400;line-height:1.45;margin:64px 0 18px;}
.page p{font-size:17.5px;line-height:1.9;color:var(--ink-2);max-width:620px;}
.page p + p{margin-top:20px;}
.page .lede{font-size:24px;line-height:1.65;color:var(--ink);max-width:720px;}
.page .rule{width:100%;height:1px;background:var(--line);margin:70px 0;}
.page .figs{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;margin-top:60px;}
.page .figs .art{width:100%;height:auto;overflow:hidden;}
.page .figs .wide{grid-column:1 / -1;}
.page .figs figcaption{margin-top:13px;color:var(--ink-2);}
.page .mail-lg{font-size:22px;border-bottom:1px solid var(--ink);padding-bottom:8px;
  display:inline-block;margin-top:8px;}

/* contact — direct email */
.cta{display:inline-block;background:var(--ink);color:var(--paper);
  padding:19px 40px;margin-top:42px;font-family:var(--mono);font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;transition:background .2s;}
.cta:hover{background:#000;}
.cta-note{margin-top:24px;color:var(--ink-3);font-size:14.5px;line-height:1.8;max-width:520px;}
.subjects{margin-top:28px;max-width:640px;border-top:1px solid var(--line);}
.subjects li{border-bottom:1px solid var(--line);}
.subjects a{display:flex;gap:18px;align-items:baseline;padding:16px 0;
  font-size:17.5px;color:var(--ink);}
.subjects .n{color:var(--ink-3);flex:0 0 auto;}
.subjects .arw{margin-left:auto;color:var(--ink-3);opacity:0;
  transition:opacity .25s ease,transform .25s ease;}
.subjects a:hover .arw{opacity:1;transform:translateX(4px);}

/* page footer */
.pfoot{margin-left:var(--rail);border-top:1px solid var(--line);
  padding:34px 110px;display:flex;justify-content:space-between;color:var(--ink-3);}

/* ==========================================================================
   MOBILE — horizontal pages stack; rail becomes a top bar
   ========================================================================== */
@media (max-width:900px){
  .rail{position:sticky;top:0;left:0;right:0;bottom:auto;width:100%;height:auto;
    flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
    padding:14px 20px;border-right:0;border-bottom:1px solid var(--line);z-index:70;}
  .rail .wmh{font-size:10.5px;line-height:1.5;}
  .rail nav{flex-direction:row;gap:15px;flex-wrap:wrap;justify-content:flex-end;}
  .rail nav a{width:auto;border:0 !important;padding:0;gap:5px;}
  .rail .esth{display:none;}

  .stage{position:static;overflow:visible;}
  .track{display:block;height:auto;}
  .plate{width:100% !important;height:auto;padding:60px 22px 62px !important;display:block;}
  .p-title{min-height:74vh;display:flex;}
  .p-title h1{font-size:44px;}
  .p-title .meta{left:22px;bottom:34px;}
  .p-title .meta span:first-child,.p-title .meta .ln{display:none;}
  .wall{width:100%;height:auto;}
  .strip{flex-direction:column;height:auto;gap:0;}
  .strip .seg{width:100% !important;height:230px;}
  .anno{display:none;}
  .wall-list{display:block;margin-top:20px;border-top:1px solid var(--line);}
  .wall-list li{padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink);}
  .wall-list i{font-style:normal;color:var(--ink-3);}
  .p-say p{font-size:24px;}
  .p-tri .row{flex-direction:column;height:auto;gap:34px;align-items:flex-start;}
  .p-tri figure{align-self:auto !important;margin:0 !important;width:100%;}
  .p-tri .art{width:100% !important;height:250px !important;}
  .plate.split{flex-direction:column;align-items:stretch;gap:30px;}
  .plate.split .col{width:100% !important;}
  .plate.split .art,.p-edit .stills .art,.p-int .band .arts .art{
    width:100% !important;height:240px !important;}
  .p-edit .stills{flex-direction:column;gap:18px;}
  .p-int .band .arts{flex-direction:column;height:auto;gap:0;}
  /* keep the true aspect ratio on mobile too — never crop editorial photography */
  .page .figs .art{height:auto;}
  .plate.split{flex-direction:column;align-items:stretch;gap:30px;}
  .plate.split .col{width:100% !important;}
  .plate.split .art,.p-edit .stills .art,.p-int .band .arts .art{
    width:100% !important;height:240px !important;}
  .p-edit .stills{flex-direction:column;gap:18px;}
  .p-int .band .arts{flex-direction:column;height:auto;gap:0;}
  /* keep the true aspect ratio on mobile too — never crop editorial photography */
  .page .figs .art{height:auto;}
  .plate.split{flex-direction:column;align-items:stretch;gap:30px;}
  .plate.split .col{width:100% !important;}
  .plate.split .art,.p-edit .stills .art,.p-int .band .arts .art{
    width:100% !important;height:240px !important;}
  .p-edit .stills{flex-direction:column;gap:18px;}
  .p-int .band .arts{flex-direction:column;height:auto;gap:0;}
  /* keep the true aspect ratio on mobile too — never crop editorial photography */
  .page .figs .art{height:auto;}
  .plate.split{flex-direction:column;align-items:stretch;gap:30px;}
  .plate.split .col{width:100% !important;}
  .plate.split .art,.p-edit .stills .art,.p-int .band .arts .art{
    width:100% !important;height:240px !important;}
  .p-edit .stills{flex-direction:column;gap:18px;}
  .p-int .band .arts{flex-direction:column;height:auto;gap:0;}
  /* keep the true aspect ratio on mobile too — never crop editorial photography */
  .page .figs .art{height:auto;}
  .plate.split{flex-direction:column;align-items:stretch;gap:30px;}
  .plate.split .col{width:100% !important;}
  .plate.split .art,.p-edit .stills .art,.p-int .band .arts .art{
    width:100% !important;height:240px !important;}
  .p-edit .stills{flex-direction:column;gap:18px;}
  .p-int .band .arts{flex-direction:column;height:auto;gap:0;}
  /* keep the true aspect ratio on mobile too — never crop editorial photography */
  .page .figs .art{height:auto;}
  .plate.split{flex-direction:column;align-items:stretch;gap:30px;}
  .plate.split .col{width:100% !important;}
  .plate.split .art,.p-edit .stills .art,.p-int .band .arts .art{
    width:100% !important;height:240px !important;}
  .p-edit .stills{flex-direction:column;gap:18px;}
  .p-int .band .arts{flex-direction:column;height:auto;gap:0;}
  /* keep the true aspect ratio on mobile too — never crop editorial photography */
  .page .figs .art{height:auto;}
  .p-tri .note{width:100%;margin:0 !important;align-self:auto;}
  .p-int .band{height:auto;}
  .p-int .band .art{position:static;width:100%;height:250px;}
  .p-int .band .card{position:static;width:100%;padding:34px 0 0;border-left:0;background:none;}
  .p-edit h2{font-size:34px;}
  .p-trade h2{font-size:24px;}
  .p-end h2{font-size:27px;}
  .p-end .cols{flex-wrap:wrap;gap:34px;}
  .hud,.cur{display:none;}

  .page{margin-left:0;padding:56px 22px 70px;}
  .page h1{font-size:34px;}
  .page .lede{font-size:20px;}
  .page .figs{grid-template-columns:1fr;}
  .cta{width:100%;text-align:center;padding:19px 20px;}
  .subjects a{font-size:16px;}
  .page .figs .art{height:300px;}
  .pfoot{margin-left:0;padding:28px 22px;flex-direction:column;gap:10px;}
}

@media (prefers-reduced-motion:reduce){
  .reveal{clip-path:none !important;transition:none !important;}
}

/* interiors strip captions */
.wall-cap{margin-top:18px;color:var(--ink-2);}
@media (max-width:900px){ .wall-cap{margin-top:14px;} }