:root{
    --black:#010101;
    --white:#FFFFFF;
    --pink:#F50083;
    --butter:#FDFD95;
    --acid:#DFFC00;
    --blue:#2163CB;
    --grey:#6b6b6b;
    --hairline:#e3e3e3;
    --pad:clamp(1.1rem,4vw,3.5rem);
    --head:'Neue Montreal','Satoshi',Helvetica,Arial,sans-serif;
  }
  /* all headings use Neue Montreal */
  h1,h2,h3,h4,
  .masthead h1,.mani-text h2,.fcard h3,.feed-cover .fc-title,
  .look-preview h2,.look-head,.spottings h2,.sl-title,.sr-year,
  .creator-list .name,.newsletter h2,footer .fmast,.search-box input{
    font-family:var(--head);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Satoshi',Helvetica,Arial,sans-serif;
    background-color:var(--white);
    /* blank paper with light crumples */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='5' seed='7'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='1.6'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3Crect width='100%25' height='100%25' fill='white' opacity='0.84'/%3E%3C/svg%3E");
    background-size:700px 700px;
    color:var(--black);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--pink);color:var(--white);}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  /* ---------- grain ---------- */
  .grain{
    position:fixed;inset:-50%;width:200%;height:200%;
    pointer-events:none;z-index:2000;opacity:.055;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain 8s steps(10) infinite;
  }
  @keyframes grain{
    0%,100%{transform:translate(0,0);}
    20%{transform:translate(-2%,2%);}
    40%{transform:translate(2%,-1%);}
    60%{transform:translate(-1%,-2%);}
    80%{transform:translate(1%,2%);}
  }

  /* ---------- masthead (Bubblelicious-style: huge, tight to top, full-bleed) ---------- */
  .masthead{
    padding:clamp(.4rem,1.5vw,1.2rem) clamp(.6rem,1.6vw,1.4rem) clamp(.5rem,1.6vw,1.3rem);
    position:relative;
  }
  .masthead h1{
    font-weight:900;
    line-height:.82;
    letter-spacing:-.045em;
  }
  .masthead .the{
    display:block;
    font-size:clamp(2.15rem,10.5vw,10rem);
  }
  .masthead .dayologue{
    display:block;
    font-size:clamp(2.15rem,10.5vw,10rem);
    white-space:nowrap;
    /* extra room under the descenders so the cover image doesn't clip it */
    line-height:.92;
    padding-bottom:.06em;
  }
  .masthead .dayologue i{font-style:normal;color:var(--black);}

  /* ---------- scribbles (playful accents) ---------- */
  .scribble{position:absolute;pointer-events:none;}
  .nl-loop{left:4%;bottom:10%;width:clamp(56px,8vw,110px);transform:rotate(-8deg);}
  .nl-arrow{top:12%;right:5%;width:clamp(38px,5vw,68px);transform:rotate(10deg);}
  .creators-squig{right:var(--pad);top:2.2rem;width:clamp(60px,8vw,120px);transform:rotate(-4deg);}
  .creators{position:relative;}
  .creators-btn{
    display:inline-block;margin-top:2.4rem;
    border-color:var(--white);color:var(--white);
  }

  /* ---------- floating tab bar ---------- */
  .tabbar{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:1.2rem;top:auto;
    z-index:1000;
    display:flex;align-items:center;gap:.25rem;
    padding:.4rem .5rem;
    border-radius:100px;
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(1,1,1,.12);
    box-shadow:0 8px 30px rgba(0,0,0,.10);
    transition:bottom .45s cubic-bezier(.6,.05,.2,1), top .45s cubic-bezier(.6,.05,.2,1);
  }
  .tabbar.docked{bottom:auto;top:1rem;}
  .tabbar a,.tabbar button{
    font:inherit;border:none;background:none;cursor:pointer;
    font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    padding:.5rem 1.05rem;border-radius:100px;
    transition:background .2s,color .2s;
    display:flex;align-items:center;
  }
  .tabbar a:hover,.tabbar button:hover{background:rgba(1,1,1,.06);}
  .tabbar a.active{background:var(--black);color:var(--white);}
  .tabbar .home-mini{font-weight:900;letter-spacing:-.02em;text-transform:none;font-size:.95rem;}
  .tabbar .home-mini span{color:var(--pink);}

  /* ---------- layout helpers ---------- */
  section{padding:clamp(3rem,7vw,6.5rem) var(--pad);}

  /* Dazed-style spread "READ MORE" */
  .readmore-d{
    margin-top:1.2rem;
    display:inline-flex;align-items:center;gap:.45em;
    font-size:.92rem;font-weight:900;text-transform:uppercase;
    color:var(--pink);
    transition:color .18s ease;
  }
  .readmore-d:hover{color:var(--black);}
  .readmore-d span{display:inline-block;}
  .readmore-d .gap{width:.9em;}

  /* marker X scribble */
  .scr-x{position:absolute;pointer-events:none;z-index:2;}

  /* trio image arrangement (Dazed-style cluster) */
  .img-trio{
    display:grid;grid-template-columns:.9fr 1.15fr 1fr;
    gap:clamp(.6rem,1.4vw,1rem);
    align-items:start;position:relative;
  }
  .img-trio .t1{aspect-ratio:3/4;margin-top:clamp(1.6rem,4vw,3rem);}
  .img-trio .t2{aspect-ratio:4/5;}
  .img-trio .t3{aspect-ratio:3/4;margin-top:clamp(.8rem,2vw,1.5rem);}
  .img-trio .scr-x{left:26%;bottom:14%;width:clamp(54px,7vw,100px);transform:rotate(-6deg);}
  .kicker{
    display:flex;align-items:center;gap:.8rem;
    font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    margin-bottom:clamp(1.4rem,3vw,2.4rem);
  }
  .kicker::after{content:"";flex:1;height:1px;background:var(--black);}
  .tag{
    display:inline-block;
    font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    padding:.28em .8em;border-radius:100px;border:1px solid var(--black);
    margin-bottom:.9rem;
  }
  .tag.pink{background:var(--pink);border-color:var(--pink);color:var(--white);}
  .tag.acid{background:var(--acid);border-color:var(--acid);color:var(--black);}
  .tag.blue{background:var(--blue);border-color:var(--blue);color:var(--white);}
  .tag.butter{background:var(--butter);border-color:var(--butter);color:var(--black);}

  /* image placeholders — swap with real photography (grainy, contrasty, imperfect crops) */
  .ph{
    position:relative;overflow:hidden;background:#111;
    display:block;width:100%;
  }
  .ph::after{
    content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .ph .credit{
    position:absolute;bottom:.6rem;left:.7rem;z-index:1;
    font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.85);
  }
  .ph-1{background:linear-gradient(160deg,#2b2b2e 0%,#6e6a66 45%,#c9c2b8 100%);}
  .ph-2{background:linear-gradient(200deg,#101014 0%,#3c3c46 55%,#8d8da0 100%);}
  .ph-3{background:linear-gradient(150deg,#3d2630 0%,#9c5a72 55%,#e7c4ce 100%);}
  .ph-4{background:linear-gradient(210deg,#1d2533 0%,#46618a 60%,#aebcd2 100%);}
  .ph-5{background:linear-gradient(170deg,#33301f 0%,#7d7647 55%,#d6d0a4 100%);}
  .ph-6{background:linear-gradient(190deg,#222018 0%,#5f5648 50%,#bfae97 100%);}
  .ph-7{background:linear-gradient(160deg,#14181a 0%,#39555a 60%,#9fc3c6 100%);}
  .ph-8{background:linear-gradient(200deg,#2e1a26 0%,#7c3b63 55%,#d79ebd 100%);}
  /* real photography dropped into a placeholder box */
  .ph.real{background-size:cover;background-position:center;background-repeat:no-repeat;}
  .ph.real .credit{text-shadow:0 1px 8px rgba(0,0,0,.55);}

  /* ---------- full-bleed cover image ---------- */
  .cover-bleed{
    position:relative;display:block;width:100%;
    height:clamp(360px,73.8vh,774px);
    margin-top:clamp(.6rem,1.6vw,1.4rem);
  }
  .cover-photo{
    position:absolute;inset:0;
    /* fill the placeholder box exactly, responsive at every size */
    background-image:url("../images/cover.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  .cover-bleed .credit{font-size:.62rem;}
  /* light dark overlay so the title reads over the photo */
  .cover-photo::before{
    content:"";position:absolute;inset:0;z-index:0;
    background-image:linear-gradient(180deg,rgba(1,1,1,0) 35%,rgba(1,1,1,.28) 65%,rgba(1,1,1,.62) 100%);
  }
  .cover-title{
    position:absolute;z-index:1;
    left:var(--pad);right:var(--pad);
    bottom:clamp(1.8rem,4.5vw,3.4rem);
    color:var(--white);max-width:820px;
  }
  .cover-title .ckick{
    display:block;
    font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    margin-bottom:.7rem;color:rgba(255,255,255,.9);
  }
  .cover-title h2{
    font-family:var(--head);font-weight:900;
    font-size:clamp(1.5rem,4.2vw,3.2rem);
    line-height:1.02;letter-spacing:-.02em;
  }
  .cover-title .cexc{
    margin-top:.8rem;max-width:560px;
    font-size:clamp(.82rem,1.3vw,1rem);line-height:1.45;
    color:rgba(255,255,255,.88);
  }
  .cover-bleed:hover .cover-title h2{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;}

  /* ---------- manifesto split (statement left, portrait right) ---------- */
  .manifesto{
    padding:0;
    display:grid;grid-template-columns:1.15fr .85fr;
    margin-top:clamp(.8rem,2vw,1.6rem);
  }
  .mani-text{
    padding:clamp(1.4rem,3.5vw,3rem) clamp(1.2rem,3vw,2.8rem) clamp(1.4rem,3vw,2.4rem);
    display:flex;flex-direction:column;
    /* vertically centered against the mani-img height on desktop */
    justify-content:center;
  }
  .mani-text .tag{align-self:flex-start;}
  .mani-text h2{
    /* matches the feed article titles: bold 700, tight leading, no caps */
    font-size:clamp(1.6rem,3.2vw,2.9rem);
    font-weight:700;line-height:1.05;letter-spacing:-.02em;
    text-transform:none;
    transition:color .18s ease;
    max-width:18em;
  }
  .mani-text a:hover h2{color:var(--pink);}
  .mani-body{
    margin-top:clamp(1.2rem,2.5vw,2rem);
    max-width:46em;
    display:grid;gap:1rem;
  }
  .mani-body p{
    /* matches the feed deks: no caps, regular case */
    font-size:.95rem;font-weight:500;
    line-height:1.55;color:#2c2c2c;
  }
  .mani-foot{
    padding-top:clamp(1.6rem,3vw,2.6rem);
    display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  }
  .pill-btn{
    flex-shrink:0;
    font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    border:1.5px solid var(--black);border-radius:100px;
    padding:.7em 1.8em;
    transition:background .2s,color .2s,border-color .2s;
  }
  .pill-btn:hover{background:var(--pink);border-color:var(--pink);color:var(--white);}
  .mani-foot .statement{
    font-size:.95rem;font-weight:500;
    line-height:1.55;color:#2c2c2c;max-width:34em;
  }
  .mani-img{position:relative;}
  .mani-img a{display:block;height:100%;}
  .mani-img .ph{height:100%;min-height:340px;}
  /* small overlapping image + X, Dazed-style cluster */
  .mani-img .mini{
    position:absolute;left:-14%;bottom:8%;
    width:34%;aspect-ratio:3/4;z-index:2;
    box-shadow:0 14px 40px rgba(0,0,0,.3);
  }
  .mani-img .scr-x{left:-20%;top:18%;width:clamp(46px,6vw,84px);transform:rotate(8deg);}

  .byline{
    margin-top:1.2rem;
    font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--grey);
  }
  .byline b{color:var(--black);}
  .readmore{
    display:inline-block;margin-top:1.3rem;
    font-size:.8rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
    padding:.15em .25em;
    background:linear-gradient(transparent 55%,var(--acid) 55%);
    transition:background-color .2s;
  }
  .readmore:hover{background:var(--acid);}

  /* ---------- latest: i-D style feed ---------- */
  .latest-wrap{display:block;}
  .feed{display:grid;row-gap:clamp(2.8rem,5.5vw,5rem);}
  .feed .row2{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(1.4rem,2.6vw,2.6rem);
  }
  .fcard .ph,.fcard .cover-typo{aspect-ratio:1/1;}
  .fcard.wide .ph{aspect-ratio:16/10;}
  .fcard .meta{
    margin-top:1.1rem;
    font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    line-height:1.75;
  }
  .fcard .meta .auth{display:block;color:var(--grey);}
  .fcard h3{
    margin-top:.5rem;
    font-size:clamp(1.45rem,2.4vw,2.25rem);
    font-weight:700;line-height:1.05;letter-spacing:-.02em;
    transition:color .18s ease;
  }
  .fcard.wide h3{font-size:clamp(1.9rem,3.4vw,3.1rem);}
  .fcard a:hover h3{color:var(--pink);}
  .fcard .dek{
    margin-top:.6rem;font-size:.95rem;font-weight:500;
    line-height:1.55;color:#2c2c2c;max-width:38em;
  }
  .cover-typo{
    display:flex;align-items:center;justify-content:center;text-align:center;
    background:var(--butter);padding:1.4rem;position:relative;overflow:hidden;
  }
  .cover-typo p{
    font-size:clamp(2rem,3.4vw,3rem);font-weight:900;line-height:.95;
    letter-spacing:-.03em;color:var(--blue);transform:rotate(-4deg);
  }
  .cover-typo::after{
    content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* full-bleed image on a single wide article */
  .fcard.wide.bleed .ph{
    margin-left:calc(-1 * var(--pad));
    margin-right:calc(-1 * var(--pad));
    width:calc(100% + 2 * var(--pad));
    aspect-ratio:auto;
    height:100vh;height:100svh;
  }

  /* "see more" progressive feed */
  .more-row.hide{display:none!important;}
  .see-more{display:flex;justify-content:flex-start;}
  .see-more .pill-btn{cursor:pointer;background:none;}
  .see-more .pill-btn:hover{background:var(--pink);border-color:var(--pink);color:var(--white);}

  /* ---------- look display ---------- */
  .lookbook{}
  .look-wrap{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(2rem,5vw,5rem);align-items:stretch;
  }
  .look-right{display:flex;flex-direction:column;}
  .look-preview h2{
    font-size:clamp(1.5rem,2.8vw,2.4rem);
    font-weight:700;letter-spacing:-.01em;text-transform:none;
    line-height:1.1;
  }
  .look-preview .look-desc{
    margin-top:.9rem;font-size:.85rem;font-weight:500;line-height:1.65;
    color:#2c2c2c;max-width:38em;
  }
  .look-stage{
    margin:1.6rem auto 0;position:relative;
    max-width:440px;
    transition:opacity .25s ease;
  }
  .look-stage.swap{opacity:0;}
  .look-stage .ph,.look-stage img{aspect-ratio:3/4;width:100%;object-fit:cover;display:block;}
  .look-cap{
    margin-top:.8rem;
    font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--grey);
  }
  .look-cap b{color:var(--pink);}
  .look-head{
    font-size:.8rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
    margin-bottom:1.6rem;
  }
  .look-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,1fr); /* rows stretch to fill column height */
    flex:1;
    gap:clamp(.9rem,1.8vw,1.5rem);row-gap:clamp(1.4rem,2.5vw,2rem);
  }
  .look-thumb{
    font:inherit;background:none;border:none;padding:0;cursor:pointer;text-align:left;
    display:flex;flex-direction:column;min-height:0;
  }
  .look-thumb .lab{
    display:block;font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    line-height:1.6;margin-bottom:.45rem;color:var(--black);
  }
  .look-thumb .lab small{display:block;font-size:inherit;font-weight:500;color:var(--grey);}
  .look-thumb .ph,.look-thumb img{
    flex:1;min-height:0;width:100%;object-fit:cover;display:block;
    transition:transform .25s ease;
  }
  .look-thumb:hover .ph,.look-thumb:hover img{transform:scale(1.03);}
  .look-thumb.active .ph,.look-thumb.active img{outline:2.5px solid var(--pink);outline-offset:3px;}

  /* ---------- style spottings ---------- */
  .spottings{position:relative;}
  .spottings h2.big{
    font-size:clamp(2.2rem,6vw,5rem);font-weight:900;letter-spacing:-.03em;line-height:1;
    margin-bottom:.6rem;position:relative;display:inline-block;
  }
  .spottings h2.big .circ{
    position:absolute;inset:-18% -6% -22% -4%;width:108%;height:140%;
  }
  .spottings .sub{
    font-size:.95rem;font-weight:500;color:var(--grey);margin-bottom:2rem;max-width:40em;
  }
  .spot-row{
    display:flex;gap:1.2rem;overflow-x:auto;
    margin:0 calc(-1 * var(--pad));
    padding-left:var(--pad);padding-right:var(--pad);
    /* hide native scrollbar */
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .spot-row::-webkit-scrollbar{display:none;}
  .spot{
    flex:0 0 clamp(210px,24vw,300px);
  }
  .spot-nav{
    display:flex;gap:.7rem;margin-top:1.6rem;
  }
  .spot-nav button{
    width:46px;height:46px;border-radius:50%;
    border:1.5px solid var(--black);background:var(--white);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .2s,border-color .2s,opacity .2s;
  }
  .spot-nav button svg{width:18px;height:18px;stroke:var(--black);transition:stroke .2s;}
  .spot-nav button:hover{background:var(--pink);border-color:var(--pink);}
  .spot-nav button:hover svg{stroke:var(--white);}
  .spot-nav button:disabled{opacity:.25;pointer-events:none;}
  .spot .ph{aspect-ratio:3/4;margin-bottom:.7rem;}
  .spot .cap{font-size:.85rem;font-weight:700;line-height:1.3;}
  .spot .loc{
    font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--pink);margin-top:.25rem;
  }

  /* ---------- magazine spread (deep dive) ---------- */
  .spread{
    position:relative;overflow:hidden;
    padding:clamp(2rem,4vw,3.2rem) var(--pad);
  }
  .spread-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3.5vw,3rem);position:relative;}

  /* left page */
  .spread-left{display:flex;flex-direction:column;}
  .sl-title .the2{display:block;font-size:clamp(1.3rem,2.4vw,2.2rem);font-weight:900;line-height:1;}
  .sl-title .big{display:block;font-size:clamp(2.8rem,6.8vw,5.8rem);font-weight:900;letter-spacing:-.02em;line-height:.92;}
  .sl-title .big i{font-style:normal;color:var(--pink);}
  .sl-sub{
    text-align:right;margin-top:.8rem;
    font-size:clamp(1.05rem,1.9vw,1.55rem);font-weight:900;line-height:1.15;letter-spacing:-.01em;
  }
  .sl-intro{
    text-align:right;margin:.6rem 0 0 auto;max-width:30em;
    font-size:.85rem;font-weight:500;line-height:1.65;color:#2c2c2c;
  }
  .sl-img{margin-top:1rem;flex:1;display:flex;}
  .sl-img .ph{aspect-ratio:auto;min-height:300px;width:100%;}

  /* right page */
  .spread-right{
    display:grid;grid-template-columns:1.05fr 1fr;
    grid-template-rows:auto auto 1fr;
    column-gap:clamp(.9rem,2vw,1.5rem);
  }
  .sr-year{
    grid-column:1/-1;text-align:right;
    font-size:clamp(1.9rem,4.4vw,3.5rem);font-weight:900;letter-spacing:-.02em;line-height:1;
  }
  .sr-year i{font-style:normal;color:var(--pink);font-weight:500;}
  .sr-body{
    grid-column:1;margin-top:.9rem;align-content:start;
    display:grid;gap:.9rem;
    font-size:.85rem;font-weight:500;line-height:1.7;color:#222;
  }
  .sr-tall{grid-column:2;grid-row:2/4;margin-top:.9rem;position:relative;}
  .sr-tall .ph{height:100%;min-height:300px;transform:rotate(2.2deg);outline:1.5px solid var(--blue);outline-offset:5px;}
  .sr-cluster{
    grid-column:1;margin-top:1rem;
    display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;align-content:start;
  }
  .sr-cluster .ph{aspect-ratio:3/4;}

  /* ---------- creators ---------- */
  .creators{background:var(--black);color:var(--white);}
  .creators .kicker{color:var(--white);}
  .creators .kicker::after{background:rgba(255,255,255,.35);}
  .creators .intro{
    font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:500;line-height:1.5;
    max-width:36em;margin-bottom:2.4rem;color:#d6d6d6;
  }
  .creator-list{list-style:none;}
  .creator-list li{border-top:1px solid rgba(255,255,255,.22);}
  .creator-list li:last-child{border-bottom:1px solid rgba(255,255,255,.22);}
  .creator-list .crow{
    display:grid;grid-template-columns:3.2rem 1fr auto;
    align-items:baseline;gap:1rem;
    padding:1.1rem .2rem;
    transition:padding-left .25s ease;
  }
  .creator-list .crow:hover{padding-left:1rem;}
  .creator-list .num{
    font-size:.75rem;font-weight:700;color:var(--acid);letter-spacing:.1em;
  }
  .creator-list .name{
    font-size:clamp(1.4rem,3.4vw,2.6rem);font-weight:900;letter-spacing:-.02em;line-height:1;
    transition:color .18s;
  }
  .creator-list .crow:hover .name{color:var(--pink);}
  .creator-list .role{
    font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9a9a9a;
  }
  /* floating image preview on creator hover */
  .creator-preview{
    position:fixed;left:0;top:0;
    width:clamp(180px,17vw,260px);aspect-ratio:3/4;
    z-index:900;pointer-events:none;overflow:hidden;
    opacity:0;transform:scale(.9);
    transition:opacity .22s ease,transform .22s ease;
    box-shadow:0 18px 50px rgba(0,0,0,.35);
  }
  .creator-preview.show{opacity:1;transform:scale(1);}
  .creator-preview .ph{
    position:absolute;inset:0;opacity:0;transition:opacity .18s ease;
  }
  .creator-preview .ph.on{opacity:1;}
  @media (hover:none){.creator-preview{display:none;}}

  /* ---------- newsletter ---------- */
  .newsletter{background:var(--acid);position:relative;overflow:hidden;}
  .newsletter .inner{max-width:720px;margin:0 auto;text-align:center;position:relative;}
  .newsletter h2{
    font-size:clamp(2rem,5vw,3.6rem);font-weight:900;letter-spacing:-.03em;line-height:1;
  }
  .newsletter p{
    margin-top:.9rem;font-size:.98rem;font-weight:500;line-height:1.5;color:#1d1d1d;
  }
  .nl-form{
    margin-top:1.8rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;
  }
  .nl-form input{
    font:inherit;font-weight:500;
    padding:.85rem 1.2rem;min-width:min(320px,70vw);
    border:1.5px solid var(--black);border-radius:100px;background:var(--white);
    outline:none;
  }
  .nl-form input:focus{border-color:var(--pink);}
  .nl-form button{
    font:inherit;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;
    padding:.85rem 1.8rem;border-radius:100px;border:1.5px solid var(--black);
    background:var(--black);color:var(--white);cursor:pointer;
    transition:background .2s,border-color .2s;
  }
  .nl-form button:hover{background:var(--pink);border-color:var(--pink);}
  .nl-note{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:1rem;}
  .nl-msg{margin-top:1rem;font-weight:900;display:none;}

  /* ---------- footer ---------- */
  footer{
    background:var(--black);color:var(--white);
    padding:clamp(3rem,6vw,5rem) var(--pad) 7rem;
  }
  footer .fmast{
    font-size:clamp(2.6rem,9vw,7.5rem);font-weight:900;letter-spacing:-.035em;line-height:.92;
  }
  footer .fmast span{color:var(--white);}
  .fcols{
    display:grid;grid-template-columns:repeat(3,auto);gap:3rem;justify-content:start;
    margin-top:3rem;font-size:.85rem;font-weight:500;
  }
  .fcols h4{
    font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:#8b8b8b;margin-bottom:.9rem;
  }
  .fcols li{list-style:none;margin-bottom:.5rem;}
  .fcols a:hover{color:var(--acid);}
  .fbottom{
    margin-top:3.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#8b8b8b;
  }

  /* ---------- search overlay ---------- */
  .search-overlay{
    position:fixed;inset:0;z-index:3000;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    display:none;align-items:center;justify-content:center;
    padding:var(--pad);
  }
  .search-overlay.open{display:flex;}
  .search-box{width:min(760px,100%);}
  .search-box label{
    display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    margin-bottom:1rem;color:var(--pink);
  }
  .search-box input{
    width:100%;font-family:inherit;font-weight:900;letter-spacing:-.02em;
    font-size:clamp(1.8rem,5vw,3.4rem);
    border:none;border-bottom:3px solid var(--black);
    background:transparent;outline:none;padding:.2em 0;
  }
  .search-box .hint{
    margin-top:1rem;font-size:.8rem;font-weight:500;color:var(--grey);
  }
  .search-close{
    position:absolute;top:1.4rem;right:1.6rem;
    font:inherit;font-weight:900;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
    background:none;border:1.5px solid var(--black);border-radius:100px;
    padding:.55rem 1.2rem;cursor:pointer;
  }
  .search-close:hover{background:var(--pink);border-color:var(--pink);color:var(--white);}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
  .reveal.in{opacity:1;transform:none;}

  /* ---------- responsive ---------- */
  /* ---- tablet ---- */
  @media (max-width:1000px){
    .latest-wrap{grid-template-columns:1fr;}
  }
  @media (max-width:860px){
    .manifesto{grid-template-columns:1fr;}
    /* image first when stacked */
    .mani-img{order:-1;}
    /* shorter landscape crop when stacked */
    .mani-img .ph{min-height:0;aspect-ratio:16/10;}
    /* keep the overlapping detail photo + X inside the frame, smaller */
    .mani-img .mini{left:1rem;bottom:1rem;width:26%;aspect-ratio:3/4;}
    .mani-img .scr-x{left:auto;right:6%;top:6%;width:clamp(34px,7vw,52px);}
    .fcols{grid-template-columns:1fr 1fr;}
    .cover-bleed{height:clamp(324px,52.2vh,576px);}
    .look-wrap{grid-template-columns:1fr;}
    .look-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:auto;}
    .look-thumb .ph,.look-thumb img{flex:none;aspect-ratio:3/4;}
    .spread-grid{grid-template-columns:1fr;}
    .sl-img .ph{aspect-ratio:4/5;min-height:0;}
    .sr-tall .ph{aspect-ratio:3/4;min-height:0;height:auto;}
  }
  /* ---- mobile ---- */
  @media (max-width:560px){
    .feed .row2{grid-template-columns:1fr;row-gap:2.4rem;}
    .fcard .ph,.fcard .cover-typo{aspect-ratio:1/1;}
    .fcard.wide .ph{aspect-ratio:4/3;}
    .creator-list .crow{grid-template-columns:2.2rem 1fr;}
    .creator-list .role{display:none;}
    /* cover title + excerpt move underneath the photo */
    .cover-bleed{height:auto;}
    .cover-photo{position:relative;inset:auto;height:clamp(270px,41.4vh,396px);}
    .cover-photo::before{background-image:none;}
    .cover-title{
      position:static;display:block;margin-top:1rem;max-width:none;
      padding:0 var(--pad);color:var(--black);
    }
    .cover-title .ckick{color:var(--grey);}
    .cover-title .cexc{color:#2c2c2c;}
    /* consistent mobile padding: every text block shares the --pad gutter,
       tighter vertical rhythm between sections */
    section{padding:clamp(2.2rem,9vw,3rem) var(--pad);}
    .mani-text{padding:1.5rem var(--pad) 1.7rem;}
    /* Look Display on mobile: one rail of thumbnails beside the preview */
    .look-wrap{display:grid;grid-template-columns:58px 1fr;gap:.9rem;}
    .look-preview,.look-right{display:contents;}
    .look-preview h2{grid-column:1/-1;grid-row:1;}
    .look-preview .look-desc{grid-column:1/-1;grid-row:2;margin-top:.5rem;}
    .look-stage{grid-column:2;grid-row:3;margin-top:.4rem;max-width:none;}
    .look-cap{grid-column:1/-1;grid-row:4;margin-top:.7rem;}
    .look-head{display:none;}
    .look-grid{
      grid-column:1;grid-row:3;margin-top:.4rem;
      display:flex;flex-direction:column;gap:.45rem;min-height:0;
    }
    .look-thumb{flex:1;min-height:0;}
    .look-thumb .lab{display:none;}
    .look-thumb .ph,.look-thumb img{flex:1;min-height:0;height:100%;aspect-ratio:auto;}
    .look-thumb.active .ph,.look-thumb.active img{outline-width:2px;outline-offset:2px;}
    .mani-text h2{font-size:1.35rem;}
    .nl-form input{min-width:0;width:100%;}
    .nl-form button{width:100%;}
    .fcols{gap:2rem;}
    /* compact floating tab bar */
    .tabbar{
      max-width:calc(100vw - 1.2rem);
      padding:.3rem .35rem;gap:.1rem;
      bottom:calc(.8rem + env(safe-area-inset-bottom));
    }
    .tabbar a,.tabbar button{font-size:.7rem;padding:.45rem .7rem;letter-spacing:.04em;}
    .tabbar .home-mini{font-size:.85rem;}
  }
  /* very small phones */
  @media (max-width:380px){
    .tabbar .home-mini{display:none;}
    .masthead .the,.masthead .dayologue{font-size:2.15rem;}
  }


/* ================= glossy refresh — Apple-inspired ================= */
:root{
  --head:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
  background-image:none;
  background-color:#fbfbfd;
  color:#1d1d1f;
}
/* clean, smooth surfaces: no film grain, no paper texture */
.grain{display:none;}
.ph::after{display:none;}
/* refined type: tighter tracking, calmer weights */
h1,h2,h3,h4{letter-spacing:-.025em;}

.masthead h1{font-weight:800;}
footer .fmast{font-weight:800;}
.mani-body p,.dek,.mani-foot .statement{color:#424245;}
.kicker{color:#6e6e73;}
.kicker::after{background:#d2d2d7;}


/* ================= dark mode ================= */
html[data-theme="dark"]{
  --black:#f5f5f7;
  --white:#131317;
  --grey:#a1a1a8;
  --hairline:#2c2c33;
  color-scheme:dark;
}
html[data-theme="dark"] body{background-color:#0b0b0d;color:#f5f5f7;}
html[data-theme="dark"] .tabbar{background:rgba(22,22,26,.72);border-color:rgba(255,255,255,.14);box-shadow:0 8px 30px rgba(0,0,0,.5);}
html[data-theme="dark"] .tabbar a:hover,html[data-theme="dark"] .tabbar button:hover{background:rgba(255,255,255,.09);}
html[data-theme="dark"] .search-overlay{background:rgba(12,12,15,.92);}
html[data-theme="dark"] footer{background:#000;color:#f5f5f7;}
html[data-theme="dark"] footer .fmast span{color:var(--pink);}
html[data-theme="dark"] .creators{background:#000;color:#f5f5f7;}
html[data-theme="dark"] .creators-btn{border-color:#f5f5f7;color:#f5f5f7;}
html[data-theme="dark"] .comments{background:#17171c;}
html[data-theme="dark"] .comments .note{color:#b5b5bc;}
html[data-theme="dark"] .comment{border-top-color:rgba(255,255,255,.18);}
html[data-theme="dark"] .comment p{color:#d6d6db;}
html[data-theme="dark"] .article-body{color:#d9d9de;}
html[data-theme="dark"] .pull{color:#111;}
html[data-theme="dark"] .pull span{color:var(--pink);}
html[data-theme="dark"] mark{color:#111;}
html[data-theme="dark"] .progress{background:#2c2c33;}
html[data-theme="dark"] .prog-fill{background:#4a4a52;}
html[data-theme="dark"] .mani-body p,
html[data-theme="dark"] .dek,
html[data-theme="dark"] .mani-foot .statement,
html[data-theme="dark"] .look-desc,
html[data-theme="dark"] .look-cap,
html[data-theme="dark"] .spot .cap,
html[data-theme="dark"] .sl-intro,
html[data-theme="dark"] .sr-body p,
html[data-theme="dark"] .ndek,
html[data-theme="dark"] .next-side .ndek,
html[data-theme="dark"] .nl-form input{color:#c4c4cb;}
html[data-theme="dark"] .kicker{color:#9a9aa2;}
html[data-theme="dark"] .kicker::after{background:#34343b;}
html[data-theme="dark"] .creators .kicker::after{background:rgba(255,255,255,.35);}
html[data-theme="dark"] .tile{background:#1d1d23;}
/* floating toggle (pages without the tab bar) */
.theme-toggle.floating{
  position:fixed;bottom:1.2rem;right:1.2rem;z-index:1500;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(127,127,127,.35);cursor:pointer;
  background:var(--white);color:var(--black);font-size:1.05rem;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.tabbar .theme-toggle{font-size:1rem;}

/* ================= look display — simpler, reliable mobile layout ================= */
@media (max-width:560px){
  .look-wrap{display:block;}
  .look-preview,.look-right{display:block;}
  .look-preview h2,.look-preview .look-desc,.look-stage,.look-cap,.look-grid{grid-column:auto;grid-row:auto;}
  .look-stage{max-width:none;margin:1.1rem 0 0;}
  .look-stage .ph,.look-stage img{aspect-ratio:3/4;height:auto;}
  .look-cap{margin-top:.7rem;}
  .look-head{display:none;}
  /* horizontal thumbnail rail under the preview */
  .look-grid{
    display:flex;flex-direction:row;gap:.55rem;
    overflow-x:auto;margin-top:1rem;padding-bottom:.3rem;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .look-grid::-webkit-scrollbar{display:none;}
  .look-thumb{flex:0 0 64px;min-height:0;}
  .look-thumb .lab{display:none;}
  .look-thumb .ph,.look-thumb img{flex:none;aspect-ratio:3/4;height:auto;width:100%;}
  .look-thumb.active .ph,.look-thumb.active img{outline-width:2px;outline-offset:2px;}
}

/* ---------- per-section responsive visibility (set in admin → Homepage) ---------- */
@media (min-width:1025px){ .hide-desktop{display:none !important;} }
@media (min-width:641px) and (max-width:1024px){ .hide-tablet{display:none !important;} }
@media (max-width:640px){ .hide-mobile{display:none !important;} }

/* ---------- performance & responsive safety (Stage E) ---------- */
img,video{max-width:100%;height:auto;}
@media (prefers-reduced-motion: reduce){
  .grain{animation:none !important;}
  *{scroll-behavior:auto !important;}
}

/* ---------- manifesto large preview (image + big headline split) ---------- */
.mani-large{display:grid;grid-template-columns:1.12fr 1fr;align-items:stretch;min-height:min(86vh,760px);background:var(--white);color:var(--black);}
.mani-large .ml-img{position:relative;overflow:hidden;}
.mani-large .ml-img .ph{width:100%;height:100%;}
.mani-large .ml-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,6vw,6rem);}
.mani-large .ml-kick{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--pink);margin-bottom:1.3rem;}
.mani-large .ml-title{font-size:clamp(2rem,4.1vw,3.7rem);font-weight:900;line-height:1.02;letter-spacing:-.03em;max-width:14em;}
.mani-large .ml-dek{margin-top:1.3rem;font-size:clamp(1.05rem,1.5vw,1.32rem);font-weight:500;line-height:1.5;color:#3a3a3a;max-width:30em;}
.mani-large .ml-more{margin-top:2rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);}
.mani-large:hover .ml-title{color:var(--pink);}
html[data-theme="dark"] .mani-large{background:#0f0f13;color:#f2f2f5;}
html[data-theme="dark"] .mani-large .ml-dek{color:#c9c9d0;}
@media (max-width:820px){
  .mani-large{grid-template-columns:1fr;min-height:0;}
  .mani-large .ml-img .ph{aspect-ratio:4/5;height:auto;}
}