/* Social Media · three formats drawn as templates, platforms on a slow ticker, four services as hairline glyphs,
   the week as a cadence grid, community management as three live clocks */

/* ——— hero: three formats, one standard ——— */
.sm-hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,80px);align-items:center;
  padding:clamp(140px,15vw,190px) var(--gutter) clamp(70px,8vw,110px);max-width:1440px;margin:0 auto}
.sm-hero .col{display:grid;gap:clamp(22px,3vw,34px)}
.sm-hero h1{margin:0;font:300 clamp(52px,8.2vw,132px)/.92 var(--serif);letter-spacing:-.03em}
.frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);align-items:end;justify-self:end;width:100%;max-width:600px}
.frame{display:grid;gap:12px}
.frame.post{margin-bottom:clamp(34px,5vw,74px)}            /* the middle frame rides higher, like a shelf of three prints */
.frame figure{margin:0;position:relative;border-radius:8px;overflow:hidden;aspect-ratio:9/16;border:1px solid rgba(236,232,225,.16);
  background:linear-gradient(160deg,#17171a,#0c0c0e 70%);transform:translate3d(0,var(--y,0px),0);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.frame.post figure{aspect-ratio:4/5}
.frame figure::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(236,232,225,.16);border-radius:5px}          /* the safe area, drawn like a template */
.frame .sheen{position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(201,184,148,.10) 72%,transparent 84%);animation:sm-sheen 16s linear infinite}
.frame.post .sheen{animation-duration:21s;animation-direction:reverse}
.frame.reel .sheen{animation-duration:13s}
@keyframes sm-sheen{to{transform:rotate(360deg)}}
.frame .dim{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 9px var(--sans);letter-spacing:.24em;color:var(--ink-3);white-space:nowrap}
.frame .dim::before,.frame .dim::after{content:"";position:absolute;left:50%;width:1px;height:14px;background:rgba(236,232,225,.18)}
.frame .dim::before{bottom:calc(100% + 8px)}.frame .dim::after{top:calc(100% + 8px)}
.frame .bars{position:absolute;left:8px;right:8px;top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.frame .bars i{display:block;height:2px;border-radius:2px;background:rgba(236,232,225,.28);overflow:hidden;position:relative}
.frame .bars i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;animation:9s linear infinite}
.frame .bars i:nth-child(1)::after{animation-name:sm-bar1}
.frame .bars i:nth-child(2)::after{animation-name:sm-bar2}
.frame .bars i:nth-child(3)::after{animation-name:sm-bar3}
@keyframes sm-bar1{0%{transform:scaleX(0)}33.3%,100%{transform:scaleX(1)}}
@keyframes sm-bar2{0%,33.3%{transform:scaleX(0)}66.6%,100%{transform:scaleX(1)}}
@keyframes sm-bar3{0%,66.6%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.frame .ui{position:absolute;left:14px;right:14px;bottom:14px;display:grid;gap:6px}
.frame .ui i{display:block;height:2px;border-radius:2px;background:rgba(236,232,225,.22)}
.frame .ui i:last-child{width:55%}
.frame .play{position:absolute;left:12px;bottom:12px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(236,232,225,.5);display:grid;place-items:center}
.frame .play svg{width:9px;height:9px;margin-left:2px;fill:var(--ink)}
.frame figcaption{font:500 9.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);text-align:center}
@media (max-width:860px){.sm-hero{grid-template-columns:1fr}.frames{justify-self:start;max-width:460px}}

/* ——— intro ——— */
.sm-intro{max-width:1440px;margin:0 auto;padding:clamp(80px,10vw,150px) var(--gutter) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(30px,6vw,110px);border-top:1px solid var(--line)}
@media (max-width:860px){.sm-intro{grid-template-columns:1fr}}

/* platforms: a slow ticker in the label voice */
.platforms{margin-top:clamp(50px,7vw,90px)}
.platforms .wrap .label{display:block;margin-bottom:16px}
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .row{display:flex;width:max-content;animation:sm-ticker 70s linear infinite}
.ticker:hover .row{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;padding:18px 0;font:500 10.5px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.ticker span::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--champagne);margin:0 28px}
@keyframes sm-ticker{to{transform:translateX(-50%)}}

/* ——— four services, four glyphs ——— */
.sm-services{max-width:1440px;margin:0 auto;padding:clamp(90px,11vw,160px) var(--gutter)}
.sm-services .label{display:block;margin-bottom:22px}
.svc{list-style:none;margin:clamp(30px,5vw,60px) 0 0;padding:0;border-top:1px solid var(--line)}
.svc li{display:grid;grid-template-columns:5ch clamp(96px,10vw,140px) minmax(0,1fr) minmax(0,.55fr);gap:clamp(16px,3vw,48px);align-items:start;padding:clamp(28px,3.5vw,48px) 0;border-bottom:1px solid var(--line)}
.svc .n{font:500 11px var(--sans);letter-spacing:.18em;color:var(--champagne);padding-top:.7em}
.svc svg{width:100%;height:auto;overflow:visible}
.svc h3{margin:0 0 12px;font:300 clamp(26px,2.8vw,42px)/1.08 var(--serif);letter-spacing:-.01em;transition:color .6s var(--ease)}
.svc li:hover h3{color:var(--champagne)}
.svc p{margin:0;color:var(--ink-2);max-width:52ch}
.svc .tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:0;padding-top:.6em}
.svc .tags span{font:500 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.svc .tags span + span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--champagne);margin:0 12px;vertical-align:middle}
.g{fill:none;stroke:rgba(236,232,225,.55);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.g.c{stroke:var(--champagne)}
.g.faint{stroke:rgba(236,232,225,.22);stroke-dasharray:2 4}
.dot{fill:var(--champagne)}
.js .svc li[data-reveal] .g{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.8s var(--ease) .15s}
.js .svc li[data-reveal] .dot{opacity:0;transition:opacity .8s var(--ease) 1.1s}
.js .svc li.in .g{stroke-dashoffset:0}
.js .svc li.in .dot{opacity:1}
@media (max-width:860px){
  .svc li{grid-template-columns:5ch minmax(0,1fr);gap:14px 18px}
  .svc svg{grid-column:2;max-width:110px}
  .svc li > div,.svc .tags{grid-column:2}
}

/* ——— the week, in rhythm: a cadence grid ——— */
.week{border-top:1px solid var(--line);background:var(--bg-2)}
.week .wrap{padding-top:clamp(90px,11vw,160px);padding-bottom:clamp(90px,11vw,160px)}
.week-head,.clocks-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);align-items:end}
.week-head .label,.clocks-head .label{display:block;margin-bottom:22px}
.week-head p,.clocks-head p{margin:0;color:var(--ink-2);max-width:48ch}
.grid{display:grid;grid-template-columns:minmax(140px,.9fr) repeat(7,minmax(0,1fr));gap:8px;align-items:center;margin-top:clamp(40px,6vw,80px)}
.grid .gh{font:500 10px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding-bottom:10px}
.grid .gr{font:300 clamp(18px,1.9vw,26px)/1.1 var(--serif);color:var(--ink-2);padding-right:14px}
.grid .cell{display:block;height:clamp(28px,3.2vw,44px);border-radius:3px;border:1px solid var(--line);opacity:0;transform:scale(.8);transition:opacity .7s var(--ease),transform .7s var(--ease),background .5s var(--ease);transition-delay:calc(var(--i) * 28ms)}
.grid.in .cell{opacity:1;transform:none}
.grid .cell.x{background:rgba(201,184,148,.85);border-color:transparent}
.grid .cell.s{background:rgba(201,184,148,.12);border-color:rgba(201,184,148,.32)}
.grid .cell.x:hover{background:var(--champagne)}
.legend{display:flex;gap:28px;margin:22px 0 0;font:500 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.legend span{display:inline-flex;align-items:center;gap:10px}
.legend i{display:inline-block;width:14px;height:10px;border-radius:2px;border:1px solid var(--line)}
.legend i.x{background:rgba(201,184,148,.85);border-color:transparent}
.legend i.s{background:rgba(201,184,148,.12);border-color:rgba(201,184,148,.32)}
@media (max-width:860px){
  .week-head,.clocks-head{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
  .grid .gh:first-child{display:none}
  .grid .gr{grid-column:1/-1;padding:16px 0 4px}
}

/* ——— community, around the clock: three live dials ——— */
.clocks-s .wrap{padding-top:clamp(90px,11vw,160px);padding-bottom:clamp(90px,11vw,160px);border-top:1px solid var(--line)}
.clocks{list-style:none;margin:clamp(40px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,60px)}
.clock{display:grid;justify-items:center;gap:16px;text-align:center}
.clock svg{width:min(100%,220px);height:auto;overflow:visible}
.clock .face{fill:none;stroke:rgba(236,232,225,.18);stroke-width:1}
.clock .hr-t{stroke:rgba(236,232,225,.55);stroke-width:1.2}
.clock .mn-t{stroke:rgba(236,232,225,.18);stroke-width:.8}
.clock .hand{stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;transform-box:view-box;transform-origin:100px 100px}
.clock .hand.m{stroke-width:1.1}
.clock .hand.s{stroke:var(--champagne);stroke-width:.8}
.clock .hub{fill:var(--champagne)}
.clock .city{font:300 clamp(24px,2.4vw,34px)/1 var(--serif)}
.clock .t{font:500 10.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.clock .t i{font-style:normal}
@media (max-width:640px){.clocks{grid-template-columns:1fr;gap:40px}}

.quote{padding:clamp(90px,12vw,170px) var(--gutter);max-width:1440px;margin:0 auto;border-top:1px solid var(--line)}
.quote blockquote{margin:0;font:300 clamp(34px,5vw,76px)/1.05 var(--serif);letter-spacing:-.015em;max-width:18ch;text-wrap:balance}