/* ==========================================================================
   SOCIAL SACK — SHARED STYLESHEET
   Used by every inner page (Work, Services, Studio, Contact).
   The homepage (index.html) keeps its own copy of these same rules inline
   because it was built and approved before this file existed — moving it
   over is a safe future cleanup, not required for this file to work.

   Sections in this file:
     1. Design tokens (colors, fonts)
     2. Reset + base
     3. Nav bar + footer ticker bar
     4. Buttons / links
     5. Section header pattern (eyebrow + heading + subhead)
     6. Marquee / moving banner strip
     7. Notebook-style content card
     8. TV-frame media viewer
     9. Ink statement band (pull-quote)
    10. Numbers strip
    11. Footer
    12. Scroll-reveal utility
    13. Responsive
   ========================================================================== */

/* 1. DESIGN TOKENS — same palette/type system as the homepage */
:root{
  --paper:#F2EDE2; --paper2:#E9E3D4; --ink:#161511; --grey:#6F6B60; --grey2:#A39E90;
  --cream:#FBF8F0; --line:rgba(22,21,17,.15); --linelt:rgba(251,248,240,.16);
  --disp:'Instrument Serif',serif; --body:'Switzer',sans-serif; --mono:'IBM Plex Mono',monospace;
  --accent:#A2764A;
}

/* 2. RESET + BASE */
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden;}
::selection{background:var(--ink);color:var(--cream);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.grain{position:fixed;inset:-60%;z-index:70;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

main{position:relative;z-index:10;}

/* 3. NAV BAR + FOOTER TICKER BAR */
.bar{position:fixed;left:0;right:0;top:0;z-index:72;display:flex;justify-content:space-between;align-items:center;
  padding:20px 34px;transition:background .4s;background:rgba(242,237,226,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.bar .logo-s{height:36px;}
.bar nav{display:flex;gap:30px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;}
.bar nav a{position:relative;padding-bottom:2px;}
.bar nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--ink);transition:width .28s;}
.bar nav a:hover::after,.bar nav a.active::after{width:100%;}
.bar nav a.active{color:var(--accent);}

.footbar{position:fixed;left:0;right:0;bottom:0;z-index:66;display:flex;justify-content:space-between;padding:14px 34px;
  pointer-events:none;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);}
.footbar .cities span{padding:2px 8px;border-radius:99px;transition:background .35s,color .35s;}
.footbar .cities span.lit{background:var(--accent);color:var(--cream);}
@media (max-width:720px){.footbar{display:none;}}

/* page top padding so fixed nav never overlaps content */
.pagehead{padding:20vh 7vw 8vh;}
.pagehead .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);}
.pagehead h1{font-family:var(--disp);font-weight:400;font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.05;letter-spacing:-.01em;max-width:900px;margin-top:2vh;}
.pagehead .sub{margin-top:3vh;max-width:640px;font-size:clamp(15px,1.8vw,18px);line-height:1.55;color:var(--grey);}

/* 4. BUTTONS / LINKS */
.cta-hand{position:relative;display:inline-block;font-family:var(--disp);font-weight:400;font-size:clamp(1.2rem,2.2vw,1.6rem);}
.cta-hand svg{position:absolute;inset:-22px -38px;width:calc(100% + 76px);height:calc(100% + 44px);pointer-events:none;}
.cta-hand:hover{color:var(--grey);}
.scrib path{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;}

/* 5. SECTION HEADER PATTERN */
.shead{padding:0 7vw;margin-bottom:6vh;}
.shead .note{font-family:var(--disp);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.01em;display:block;margin-bottom:1.2vh;}
.shead .subnote{color:var(--grey);font-size:15px;display:block;max-width:520px;}
.shead .subnote,.ann{font-family:var(--disp);font-style:italic;font-weight:400;}

/* 6. MARQUEE / MOVING BANNER STRIP (reused from the homepage client belt) */
.marquee-wrap{padding:8vh 0;background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;}
.belt{display:flex;flex-direction:column;gap:2.6vh;transform:rotate(-1.2deg);margin:0 -4vw;}
.beltrow{display:flex;width:max-content;gap:2.4vw;align-items:center;}
.beltrow .trk{display:flex;gap:2.4vw;align-items:center;width:max-content;animation:beltx 42s linear infinite;}
.beltrow.reverse .trk{animation-direction:reverse;}
.belt:hover .trk{animation-play-state:paused;}
.bname{font-family:var(--disp);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.6rem);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;flex:none;}
.bname small{display:block;font-family:var(--body);font-weight:500;font-size:12px;color:var(--grey);letter-spacing:.01em;}
.bimg{height:14vh;border-radius:12px;overflow:hidden;flex:none;position:relative;}
.bimg img{height:100%;width:auto;display:block;filter:grayscale(.35) contrast(1.04);}
.bx{flex:none;width:20px;height:20px;color:var(--grey2);}
@keyframes beltx{to{transform:translateX(-50%);}}
@media (max-width:720px){.bimg{height:10vh;}}

/* 7. NOTEBOOK-STYLE CONTENT CARD — flat version of the homepage's service book page */
.ncard{background:var(--cream);border:1px solid var(--line);border-radius:6px 6px 16px 16px;padding:40px 34px 30px;position:relative;}
.ncard::before{content:"";position:absolute;top:0;left:52px;bottom:0;width:1px;background:rgba(178,60,40,.15);}
.ncard .pin-holes{position:absolute;top:7px;left:0;right:0;display:flex;justify-content:center;gap:16px;}
.ncard .pin-holes i{width:8px;height:8px;border-radius:50%;background:var(--paper);border:1.5px solid var(--line);display:block;}
.ncard .pnum{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--grey2);}
.ncard h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.05;margin:10px 0 12px;}
.ncard p{font-size:15px;line-height:1.55;color:var(--grey);}
.ncard .meta{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey2);}
.ncard .badgerow{display:flex;gap:10px;margin-top:20px;}
.ncard .pbadge{width:48px;height:48px;border-radius:50%;background:var(--cream);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;flex:none;}
.ncard .pbadge svg{width:52%;height:52%;fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;}
.ncard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;padding:0 7vw;}
@media (max-width:720px){.ncard{padding:34px 22px 24px;}}

/* 8. TV-FRAME MEDIA VIEWER — static version of the homepage tape deck chrome */
.tv-frame{position:relative;width:100%;max-width:1080px;margin:0 auto;}
.tv-frame .ants{position:absolute;left:50%;top:-7vh;width:150px;height:7vh;transform:translateX(-50%);z-index:0;}
.tv-frame .ants path{stroke:rgba(22,21,17,.3);stroke-width:4;fill:none;stroke-linecap:round;}
.tv-frame .ants circle{fill:rgba(22,21,17,.3);}
.tv-frame .tvbody{position:relative;z-index:2;background:#1A1813;border:1px solid var(--linelt);border-radius:14px;
  padding:clamp(12px,1.6vw,22px);display:flex;gap:clamp(10px,1.4vw,18px);}
.tv-frame .screen{position:relative;flex:1;aspect-ratio:16/10;border-radius:12px/20px;overflow:hidden;background:#000;}
.tv-frame .screen img,.tv-frame .screen video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04) brightness(.9);}
.tv-frame .scan{position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 2px,transparent 2px 4px);}
.tv-frame .caption{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:5% 6%;color:var(--cream);
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);}
.tv-frame .caption .t{font-family:var(--disp);font-weight:400;font-size:clamp(1.3rem,3vw,2.2rem);line-height:1;}
.tv-frame .caption .c{margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,240,.6);}
.tv-frame .tvside{width:clamp(70px,7vw,100px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.tv-frame .knob{width:40px;height:40px;border-radius:50%;background:transparent;border:2px solid rgba(251,248,240,.5);position:relative;}
.tv-frame .knob::after{content:"";position:absolute;left:50%;top:4px;width:3px;height:11px;background:var(--accent);border-radius:2px;transform:translateX(-50%);}
@media (max-width:720px){.tv-frame .tvbody{flex-direction:column;}.tv-frame .tvside{flex-direction:row;width:100%;}}

/* 9. INK STATEMENT BAND — pull-quote, reused from the homepage story section */
.ink-band{background:var(--ink);color:var(--cream);padding:15vh 7vw;position:relative;overflow:hidden;}
.ink-band .quote{font-family:var(--disp);font-weight:400;font-size:clamp(1.7rem,4vw,3rem);line-height:1.28;max-width:1000px;letter-spacing:-.01em;}
.ink-band .quote .dim{color:rgba(251,248,240,.45);}
.ink-band .cite{margin-top:5vh;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,248,240,.5);}

/* 10. NUMBERS STRIP */
.numbers{padding:12vh 7vw;display:flex;flex-wrap:wrap;gap:6vh 8vw;background:var(--paper2);border-top:1px solid var(--line);}
.numbers .rr .v{font-family:var(--disp);font-weight:400;font-size:clamp(3rem,7vw,5.6rem);letter-spacing:-.02em;line-height:1;}
.numbers .rr .k{font-size:13px;color:var(--grey);display:block;margin-top:8px;font-weight:500;}

/* 11. FOOTER */
footer{background:var(--ink);color:var(--cream);padding:15vh 7vw 12vh;position:relative;}
footer .fhead{font-family:var(--disp);font-weight:400;letter-spacing:-.02em;line-height:.98;font-size:clamp(2.4rem,7vw,6rem);}
footer .fhead .out{color:transparent;-webkit-text-stroke:1.5px var(--cream);}
.fcontact{margin-top:8vh;border-top:1px solid var(--linelt);}
.fcontact a,.fcontact .frow{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:26px 0;border-bottom:1px solid var(--linelt);}
.fcontact .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,248,240,.5);min-width:150px;}
.fcontact .v{font-family:var(--disp);font-weight:400;font-size:clamp(1.1rem,2.4vw,1.8rem);transition:color .25s,transform .25s;}
.fcontact a:hover .v{transform:translateX(-6px);color:#fff;}
.fcontact .v.dim{color:rgba(251,248,240,.55);font-family:var(--body);font-size:15px;font-weight:400;}
footer .fine{margin-top:8vh;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:rgba(251,248,240,.35);text-transform:uppercase;}

/* 12. SCROLL-REVEAL UTILITY — plain IntersectionObserver, no animation library needed */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

/* 13. RESPONSIVE */
@media (max-width:720px){
  .bar nav{gap:14px;font-size:11px;}
  .pagehead{padding:16vh 6vw 6vh;}
  .ink-band,.numbers,.shead{padding-left:6vw;padding-right:6vw;}
}