/* ============================================================ Dot — Website plugin · site.css Ported from the press-sheet design (01-press-sheet.html). Editable design tokens (--paper/--ink/--cyan/--magenta/--yellow/ --ink-soft) are OVERRIDDEN by an inline :root block the plugin prints in from saved settings — so saved values win by cascade order. The values here are the shipped defaults. @author Fourka Team · https://fourka.dev ============================================================ */ /* ============ TOKENS ============ */ :root{ --paper:#FCFCFA; --ink:#141413; --ink-soft:#3A3A38; --cyan:#00A4DC; --magenta:#E0218A; --yellow:#F8C300; --line:rgba(20,20,19,.14); --display:'Anton', Impact, 'Arial Narrow', sans-serif; --body:'Archivo', 'Helvetica Neue', Arial, sans-serif; --mono:'IBM Plex Mono', 'Courier New', monospace; --maxw:1240px; --pad:clamp(20px, 5vw, 64px); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{ background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100%;display:flex;flex-direction:column; /* sticky footer: short pages (e.g. About) push footer to the viewport bottom, no paper gap */ } /* overflow-x on html (NOT body) — clipping on a flex body would make it a scroll container and break the sticky header */ html{height:100%;overflow-x:hidden} /* height:100% so body's min-height:100% resolves (more robust than 100vh) */ main{flex:1 0 auto;display:flex;flex-direction:column} main>*{flex-shrink:0} /* sections keep natural height on long pages */ main>:last-child{flex-grow:1} /* short pages: last section fills leftover space so ITS bg (not paper) meets the footer */ ::selection{background:var(--magenta);color:#fff} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} :focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--paper)} /* ============ CMYK CALIBRATION BAR ============ */ .colorbar{ display:flex;height:8px;width:100%; } .colorbar span{flex:1} .colorbar .c{background:var(--cyan)} .colorbar .m{background:var(--magenta)} .colorbar .y{background:var(--yellow)} .colorbar .k{background:var(--ink)} .colorbar .c50{background:#7FD1ED} .colorbar .m50{background:#EF90C4} .colorbar .y50{background:#FBE17F} .colorbar .k50{background:#8A8A88} /* ============ HEADER ============ */ header{ position:sticky;top:0;z-index:50; background:rgba(252,252,250,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } header .colorbar{position:relative;z-index:2} .header-inner{ position:relative;z-index:2; max-width:var(--maxw);margin:0 auto; padding:0 var(--pad); display:flex;align-items:center;justify-content:space-between; height:72px; } .logo{ font-family:var(--display); font-size:30px;line-height:1;letter-spacing:.02em; display:flex;align-items:baseline;gap:1px; text-transform:uppercase; } .logo .dot{ width:11px;height:11px;border-radius:50%; background:var(--magenta); animation:inkcycle 9s steps(1) infinite; } nav.main-nav{display:flex;gap:36px;align-items:center} nav.main-nav a{ font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; position:relative;padding:4px 0; } nav.main-nav a::after{ content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0; background:var(--ink);transition:width .25s ease; } nav.main-nav a:hover::after{width:100%} .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--body);font-weight:600;font-size:15px; padding:13px 26px;border:2px solid var(--ink); background:var(--ink);color:var(--paper); cursor:pointer;transition:background .2s ease,color .2s ease,transform .15s ease; } .btn:hover{background:var(--paper);color:var(--ink)} .btn:active{transform:scale(.97)} .btn.ghost{background:transparent;color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--paper)} .btn .bdot{width:8px;height:8px;border-radius:50%;background:var(--yellow)} .menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px} .menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .25s ease,opacity .2s ease} .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ============ HERO ============ */ .hero{ position:relative; max-width:var(--maxw);margin:0 auto; padding:clamp(34px,5vh,62px) var(--pad) clamp(56px,8vh,100px); } /* crop marks */ .hero::before,.hero::after, .hero .crop-b::before,.hero .crop-b::after{ content:"";position:absolute;width:22px;height:22px; border:0 solid var(--ink);opacity:.55; } .hero::before{top:26px;left:26px;border-left-width:1px;border-top-width:1px} .hero::after{top:26px;right:26px;border-right-width:1px;border-top-width:1px} .hero .crop-b::before{bottom:26px;left:26px;border-left-width:1px;border-bottom-width:1px} .hero .crop-b::after{bottom:26px;right:26px;border-right-width:1px;border-bottom-width:1px} .eyebrow{ font-family:var(--mono);font-size:13px;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-soft); display:flex;align-items:center;gap:14px;margin-bottom:34px; } .eyebrow::before{content:"";width:34px;height:1px;background:var(--ink)} h1{ font-family:var(--display);font-weight:400; font-size:clamp(58px, 11.5vw, 158px); line-height:.94;letter-spacing:.005em; text-transform:uppercase; } h1 .line{display:block;overflow:hidden} h1 .line > span{display:inline-block;animation:riseup .8s cubic-bezier(.2,.7,.2,1) both} h1 .line:nth-child(2) > span{animation-delay:.12s} /* THE DOT — signature element: a registration-mark full stop */ .bigdot{ display:inline-block;vertical-align:baseline; width:.42em;height:.42em;border-radius:50%; background:var(--magenta); margin-left:.06em;position:relative; animation:dotdrop .9s cubic-bezier(.3,1.4,.4,1) .35s both, inkcycle 9s steps(1) 0s infinite; } .bigdot::before,.bigdot::after{ content:"";position:absolute;background:var(--paper);opacity:.85; } .bigdot::before{left:50%;top:-12%;width:1px;height:124%;transform:translateX(-50%)} .bigdot::after{top:50%;left:-12%;height:1px;width:124%;transform:translateY(-50%)} .hero-sub{ margin-top:38px;max-width:560px; font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft); } .hero-cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap} .hero-meta{ margin-top:64px;display:flex;gap:42px;flex-wrap:wrap; font-family:var(--mono);font-size:13px;color:var(--ink-soft); } .hero-meta b{display:block;font-family:var(--display);font-weight:400;font-size:34px;color:var(--ink);letter-spacing:.02em} @keyframes riseup{from{transform:translateY(110%)}to{transform:translateY(0)}} @keyframes dotdrop{from{transform:translateY(-1.4em) scale(.6);opacity:0}60%{opacity:1}to{transform:translateY(0) scale(1);opacity:1}} @keyframes inkcycle{ 0%{background-color:var(--magenta)} 25%{background-color:var(--cyan)} 50%{background-color:var(--yellow)} 75%{background-color:var(--ink)} 100%{background-color:var(--magenta)} } /* ============ SECTION SCAFFOLD ============ */ section{padding:clamp(72px,9vw,120px) 0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(36px,5vw,64px);flex-wrap:wrap} h2{ font-family:var(--display);font-weight:400; font-size:clamp(38px,5.5vw,72px);line-height:1; text-transform:uppercase;letter-spacing:.01em; } .sec-note{font-family:var(--mono);font-size:13px;color:var(--ink-soft);max-width:300px;letter-spacing:.04em} /* reveal on scroll */ .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} /* ============ SERVICES ============ */ #services{border-top:1px solid var(--line)} .svc-grid{ display:grid;grid-template-columns:repeat(6,1fr); border:1px solid var(--line); } .svc{ grid-column:span 2; padding:34px 30px 38px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative;background:var(--paper); transition:background .25s ease; display:flex;flex-direction:column;gap:14px;min-height:280px; } .svc:nth-child(3){border-right:0} .svc:nth-child(4),.svc:nth-child(5){grid-column:span 3;border-bottom:0} .svc:nth-child(5){border-right:0} .svc:hover{background:#fff} .ink-tag{ display:flex;align-items:center;gap:10px; font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-soft); } .ink-tag .sw{width:14px;height:14px;border-radius:50%} .sw.c{background:var(--cyan)} .sw.m{background:var(--magenta)} .sw.y{background:var(--yellow)} .sw.k{background:var(--ink)} .sw.reg{background:conic-gradient(var(--cyan) 0 25%, var(--magenta) 0 50%, var(--yellow) 0 75%, var(--ink) 0 100%)} .svc h3{ font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,32px); text-transform:uppercase;letter-spacing:.015em;line-height:1.05; } .svc p{font-size:15.5px;color:var(--ink-soft);flex:1} .svc .more{ font-weight:600;font-size:14px;letter-spacing:.03em; display:inline-flex;align-items:center;gap:8px; } .svc .more::after{content:"→";transition:transform .2s ease} .svc:hover .more::after{transform:translateX(5px)} /* website-design "our approach" — 3-up cards, even gap dividers, collapses on mobile */ .approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .approach-grid article{background:var(--paper);padding:30px 28px} .approach-grid h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2vw,28px);text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin-bottom:12px} .approach-grid p{font-size:15.5px;color:var(--ink-soft)} @media (max-width:760px){.approach-grid{grid-template-columns:1fr}} /* ============ ABOUT ============ */ #about{background:var(--ink);color:var(--paper)} #about ::selection{background:var(--yellow);color:var(--ink)} #about .eyebrow::before{background:#B9B9B5} .about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);align-items:center} #about h2{color:var(--paper)} #about .lead{font-size:clamp(18px,1.8vw,22px);line-height:1.55;margin:28px 0 20px;color:#EDEDEA} #about p{color:#B9B9B5;font-size:16px;margin-bottom:16px} .halftone{ position:relative;aspect-ratio:4/5;overflow:hidden; background: radial-gradient(circle at 30% 25%, var(--magenta), transparent 55%), radial-gradient(circle at 75% 70%, var(--cyan), transparent 55%), radial-gradient(circle at 60% 20%, var(--yellow), transparent 45%), var(--ink); } .halftone::after{ content:"";position:absolute;inset:0; background-image:radial-gradient(var(--ink) 34%, transparent 36%); background-size:9px 9px; } .halftone .label{ position:absolute;left:18px;bottom:14px;z-index:2; font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--paper);opacity:.8; } .about-stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(252,252,250,.18); margin-top:44px;border:1px solid rgba(252,252,250,.18); } .about-stats div{background:var(--ink);padding:22px 20px} .about-stats b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,42px);letter-spacing:.02em} .about-stats span{font-family:var(--mono);font-size:12px;color:#B9B9B5;letter-spacing:.06em} /* ============ WORK ============ */ .work-list{border-top:1px solid var(--line)} .work-row{ display:grid;grid-template-columns:54px 1.2fr 1fr auto; align-items:center;gap:clamp(16px,3vw,40px); padding:30px 0;border-bottom:1px solid var(--line); transition:padding-left .25s ease; } a.work-row:hover{padding-left:14px} .work-row .wdot{width:16px;height:16px;border-radius:50%;justify-self:start;transition:transform .25s ease} a.work-row:hover .wdot{transform:scale(1.5)} .work-row h3{ font-family:var(--display);font-weight:400; font-size:clamp(24px,3.4vw,42px);text-transform:uppercase;letter-spacing:.015em;line-height:1; } .work-row .wdesc{font-size:15px;color:var(--ink-soft)} .work-row .wmeta{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--ink-soft);text-align:right;white-space:nowrap} /* ============ MAGAZINE ============ */ #magazine{background:var(--yellow);color:var(--ink);position:relative;overflow:hidden} #magazine ::selection{background:var(--ink);color:var(--yellow)} #magazine::after{ content:"";position:absolute;right:-120px;top:-120px;width:480px;height:480px;border-radius:50%; background-image:radial-gradient(var(--ink) 30%, transparent 33%); background-size:16px 16px;opacity:.16;pointer-events:none; } .mag-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(36px,6vw,80px);align-items:center;position:relative;z-index:1} #magazine .eyebrow{color:var(--ink)} #magazine .eyebrow::before{background:var(--ink)} #magazine h2{margin-bottom:22px} #magazine p{font-size:clamp(16px,1.6vw,19px);max-width:520px;margin-bottom:30px} .mag-card{ background:var(--paper);border:2px solid var(--ink); padding:36px 32px;box-shadow:10px 10px 0 var(--ink); } .mag-card .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px} .mag-card b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(44px,5vw,66px);line-height:1;letter-spacing:.02em} .mag-card span{font-size:15px;color:var(--ink-soft)} .mag-card hr{border:0;border-top:1px solid var(--line);margin:22px 0} /* ============ CONTACT ============ */ #contact{text-align:center;border-top:1px solid var(--line)} #contact h2{font-size:clamp(46px,8vw,110px)} #contact .sub{margin:26px auto 38px;max-width:520px;color:var(--ink-soft);font-size:clamp(16px,1.6vw,19px)} .contact-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .phone-note{margin-top:26px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--ink-soft)} /* ============ FOOTER ============ */ footer{background:var(--ink);color:#B9B9B5;flex-shrink:0;width:100%} .foot-inner{ max-width:var(--maxw);margin:0 auto;padding:44px var(--pad); display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; } footer .logo{color:var(--paper);font-size:24px} .foot-links{display:flex;gap:26px;font-size:14px;font-weight:500} .foot-links a:hover{color:var(--paper)} .foot-copy{font-family:var(--mono);font-size:12px;letter-spacing:.06em} .foot-credit{font-family:var(--mono);font-size:12px;letter-spacing:.06em} .foot-credit a{color:var(--paper)} .foot-credit a:hover{color:var(--cyan)} /* ============ RESPONSIVE ============ */ @media (max-width: 920px){ .svc-grid{grid-template-columns:1fr 1fr} .svc, .svc:nth-child(4), .svc:nth-child(5){grid-column:span 1;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:0} .svc:nth-child(even){border-right:0} .svc:nth-child(5){border-bottom:0;border-right:0} .about-grid,.mag-grid{grid-template-columns:1fr} .halftone{aspect-ratio:16/10} .work-row{grid-template-columns:30px 1fr;grid-template-rows:auto auto} .work-row .wdesc{grid-column:2} .work-row .wmeta{grid-column:2;text-align:left} } @media (max-width: 920px){ /* Mobile nav = a drawer that grows DOWN from under the sticky header (never over it). */ nav.main-nav{ position:fixed;top:80px;left:0;right:0;z-index:40; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 20px 30px -22px rgba(20,20,19,.5); flex-direction:column;align-items:stretch;gap:0; padding:0 var(--pad); max-height:0;overflow:hidden;visibility:hidden; transition:max-height .32s ease, padding .32s ease, visibility 0s .32s; } nav.main-nav.open{ max-height:calc(100vh - 80px);visibility:visible;overflow-y:auto; padding:12px var(--pad) 20px; transition:max-height .32s ease, padding .32s ease; } nav.main-nav a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:16px} nav.main-nav a:last-child{border-bottom:0} nav.main-nav a::after{display:none} .menu-toggle{display:block} .header-cta{display:none} .hero::before,.hero::after,.hero .crop-b::before,.hero .crop-b::after{display:none} .about-stats{grid-template-columns:1fr} } /* ============ DIGITAL SOLUTIONS (Fourka × Dot) ============ */ :root{--fourka:#1F81A8;--fourka-ink:#136284;--fourka-tint:#E2EEF4} .collab-hero{max-width:var(--maxw);margin:0 auto;padding:clamp(32px,4.5vh,58px) var(--pad) clamp(30px,5vh,56px);display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(30px,5vw,70px);align-items:center} .collab-hero .eyebrow{color:var(--fourka-ink)} .collab-hero .eyebrow::before{background:var(--fourka-ink)} .collab-hero h1{font-size:clamp(38px,6.2vw,84px)} .collab-hero .lead{margin-top:26px;max-width:620px;font-size:clamp(17px,1.7vw,21px);color:var(--ink-soft)} .collab-mark{display:flex;flex-direction:column;align-items:center;gap:16px;justify-self:center;text-align:center} .collab-mark img{width:clamp(120px,16vw,188px);height:auto} .collab-mark .slogan{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fourka-ink)} .collab-band{background:var(--fourka-ink);color:#fff} .collab-band .sec-note{color:#BFE0ED} .collab-band h2{color:#fff} .fourka-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.26);margin-top:clamp(28px,4vw,48px)} .fourka-grid article{background:var(--fourka-ink);padding:26px 24px;min-height:150px} .fourka-grid h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,26px);text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin-bottom:10px} .fourka-grid p{font-size:15px;color:#E2EEF4} .collab-how{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,8vw,100px) var(--pad)} .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,44px)} .how-grid .step .n{font-family:var(--display);font-size:34px;color:var(--fourka-ink);letter-spacing:.02em} .how-grid .step h3{font-family:var(--display);font-weight:400;font-size:22px;text-transform:uppercase;letter-spacing:.015em;margin:8px 0} .how-grid .step p{font-size:15px;color:var(--ink-soft)} .collab-cta{text-align:center;border-top:1px solid var(--line);padding:clamp(56px,8vw,100px) var(--pad)} .collab-cta .closing{max-width:560px;margin:20px auto 0;color:var(--ink-soft);font-family:var(--mono);font-size:13px;letter-spacing:.03em} .btn.fourka{background:var(--fourka-ink);border-color:var(--fourka-ink);color:#fff} .btn.fourka:hover{background:var(--paper);color:var(--fourka-ink)} @media (max-width:920px){.collab-hero{grid-template-columns:1fr}.fourka-grid,.how-grid{grid-template-columns:1fr}} /* ============ INNER PAGES (shared) ============ */ .page-hero{max-width:var(--maxw);margin:0 auto;padding:clamp(32px,4.5vh,58px) var(--pad) clamp(20px,4vh,44px)} .page-hero h1{font-size:clamp(40px,7vw,96px)} .page-hero .lead{margin-top:26px;max-width:640px;font-size:clamp(17px,1.7vw,21px);color:var(--ink-soft)} .detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px} .detail-grid a,.detail-grid div{background:var(--paper);padding:26px 24px;display:block;transition:background .2s ease} .detail-grid a:hover{background:#fff} .detail-grid .k{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px} .detail-grid .v{display:block;font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,28px);letter-spacing:.01em;line-height:1.1} .point-list{list-style:none;margin-top:8px;border-top:1px solid var(--line)} .point-list li{padding:18px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:400;font-size:clamp(20px,2.4vw,30px);text-transform:uppercase;letter-spacing:.015em;display:flex;align-items:center;gap:16px} .point-list li::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--magenta);flex:none} .spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px} .spec-grid div{background:var(--paper);padding:22px 20px} .spec-grid b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,42px);letter-spacing:.02em} .spec-grid span{font-family:var(--mono);font-size:12px;color:var(--ink-soft);letter-spacing:.06em} .flip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,36px);margin-top:clamp(28px,4vw,48px)} .flip{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--ink)} .flip iframe{display:block;width:100%;height:clamp(320px,42vw,520px);border:0} .flip .cap{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);padding:12px 16px} @media (max-width:760px){.detail-grid,.flip-grid,.spec-grid{grid-template-columns:1fr}} .dark{background:var(--ink);color:var(--paper)} .dark .eyebrow{color:#B9B9B5}.dark .eyebrow::before{background:#B9B9B5} .dark h2{color:var(--paper)} .dark p{color:#B9B9B5} .dark .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)} .dark .btn:hover{background:transparent;color:var(--paper)} .tag-row{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .tag-row li{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);padding:8px 14px;border-radius:100px} .gallery{columns:3;column-gap:14px;margin-top:clamp(24px,4vw,44px)} .gallery img{width:100%;height:auto;margin:0 0 14px;display:block;break-inside:avoid;border:1px solid var(--line);background:var(--line)} @media(max-width:920px){.gallery{columns:2}} @media(max-width:560px){.gallery{columns:1}} /* ---- photography category filter: sticky bar just under the header ---- */ .gallery-filter{position:sticky;top:80px;z-index:30;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(20px,3vw,30px);padding:14px 0;background:var(--paper);border-bottom:1px solid var(--line)} .gf-btn{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);background:transparent;border:1px solid var(--line);padding:9px 15px;border-radius:100px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s ease,color .2s ease,border-color .2s ease} .gf-btn:hover{border-color:var(--ink);color:var(--ink)} .gf-btn.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)} .gf-n{font-size:10px;opacity:.55;font-variant-numeric:tabular-nums} .gallery img.is-hidden{display:none} .gf-btn[data-empty]{opacity:.45} .gf-btn[data-empty]:hover{opacity:1} .gallery-empty{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--ink-soft);text-align:center;padding:clamp(40px,8vw,80px) 0} @media (max-width:640px){.gallery-filter{top:80px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.gallery-filter::-webkit-scrollbar{display:none}.gf-btn{flex:0 0 auto}} /* ============ SMALL-SCREEN FIXES ============ */ @media (max-width:560px){ .svc-grid{grid-template-columns:1fr} .svc,.svc:nth-child(even){border-right:0} h1{font-size:clamp(40px,13.5vw,58px)} .hero-meta{gap:26px} } /* footer: stack cleanly on small screens (was cramped space-between wrap) */ @media (max-width:640px){ .foot-inner{flex-direction:column;align-items:flex-start;gap:16px} .foot-links{flex-wrap:wrap;gap:12px 22px} } /* nicer paragraph wrapping — avoid stranded single-word orphans */ .lead,.hero-sub,.sec-note{text-wrap:pretty} /* ============ PRINT / PDF ============ The flex sticky-footer (body{display:flex} + main{flex}) shrink-wraps and left-drifts the footer in paged media. Fall back to plain block flow so the footer, colourbar and content stay full-width when the page is saved/printed. */ @media print{ html,body{height:auto!important;min-height:0!important;display:block!important} main{display:block!important} main>:last-child{flex-grow:0} footer,.colorbar{width:100%!important} header,.gallery-filter{position:static} }