/* ============================================================
   Salescope Agency — brändialisivujen tyylit
   Käytössä: /dickies/, /nudie-jeans/, /true-religion/, /brixtol/,
   /gloverall/, /herschel/, /hunter/, /saucony/, /novesta/, /hightide/

   HUOM: värimuuttujat ovat myös index.html:n sisäisessä <style>-lohkossa.
   Jos vaihdat korostusvärin, muuta se MOLEMPIIN.
   ============================================================ */

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;
  src:url(fonts/instrument-sans-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;
  src:url(fonts/instrument-sans-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;
  src:url(fonts/instrument-sans-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;
  src:url(fonts/instrument-sans-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/space-mono-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/space-mono-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F8F5ED;
  --paper-2:#EFEBE0;
  --ink:#0B0B0A;
  --grey:#63625B;
  --line:#E0DCD0;
  /* Korostusväri — sama kolmikko kuin index.html:ssä. Terrakotta,
     johdettu brändikuvista. Kontrastit: paperilla 8,2:1 ·
     valkoinen sen päällä 8,9:1 · vaalea variantti inkillä 8,2:1. */
  --acc:#743925;
  --acc-2:#8C442C;
  --acc-lt:#D29B89;
  --acc-on:#FFFFFF;
  --gap:clamp(18px,2.2vw,30px);
  --pad:clamp(64px,7.5vw,116px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ink);
  color:var(--paper);padding:12px 20px;font-family:"Space Mono",monospace;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase}
.skip:focus{left:8px;top:8px}
.wrap{max-width:1500px;margin:0 auto;padding:0 clamp(18px,3.4vw,46px)}
.mono{font-family:"Space Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase}
.caps{text-transform:uppercase;letter-spacing:-.005em;font-weight:600;line-height:.93;margin:0}
.s-acc{background:var(--acc);color:var(--acc-on)}
.s-ink{background:var(--ink);color:var(--paper)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.mark{font-size:19px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.mark i{font-style:normal;color:var(--acc)}
.hdr-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.hdr-nav a{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey);border-bottom:1px solid transparent;padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease}
.hdr-nav a:hover{border-bottom-color:var(--acc);color:var(--acc)}
.hdr-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--acc)}
/* Mobiilissa kaikki nelja linkkia nakyviin pienemmalla, ks. index.html. */
@media(max-width:760px){
  .hdr-nav{gap:13px}
  .hdr-nav a{font-size:10px;letter-spacing:.09em}
}
/* Alle 560 px logo ja navigaatio eivat mahdu samalle riville: neljan
   linkin rivi tyontyy ulos ruudusta. Kaksirivinen palkki pitaa kaikki
   osiot saavutettavina ilman valikkoa ja ilman JavaScriptia. */
@media(max-width:560px){
  .hdr-in{flex-wrap:wrap;height:auto;padding-top:13px;padding-bottom:11px;gap:9px}
  .mark{flex:0 0 100%;font-size:17px;letter-spacing:.1em}
  .hdr-nav{width:100%;justify-content:space-between;gap:6px}
  .hdr-nav a{font-size:10px;letter-spacing:.06em}
}

/* ---------- murupolku ---------- */
.crumb{border-bottom:1px solid var(--line)}
.crumb ol{margin:0;padding:16px 0;list-style:none;display:flex;flex-wrap:wrap;gap:9px;
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey)}
.crumb a{transition:color .2s ease}
.crumb a:hover{color:var(--acc)}
.crumb li+li::before{content:"/";margin-right:9px;color:var(--line)}
.crumb [aria-current="page"]{color:var(--ink)}

/* ---------- brändin otsikko ---------- */
.bhero{padding:clamp(46px,6.5vw,104px) 0 clamp(42px,5.5vw,88px)}
.bhero .mono{color:rgba(255,255,255,.66);display:block;margin-bottom:clamp(22px,3.4vw,44px)}
.bhero h1{font-size:clamp(44px,8.4vw,128px);margin:0;max-width:14ch}
.bhero .tag{margin:clamp(20px,2.6vw,34px) 0 0;font-size:clamp(17px,1.85vw,25px);
  line-height:1.35;color:rgba(255,255,255,.84);max-width:30ch}

/* ---------- ylakuva ---------- */
/* Vaakasuuntainen kuva rajataan koko sivun levyiseen palkkiin. */
.bshot{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)}
.bshot img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.bshot:not(.tall){aspect-ratio:4/3}}

/* .tall = pystykuva. Ei rajausta lainkaan: kuva naytetaan kokonaan
   keskitettyna, korkeus rajattuna ettei se tayta koko naytt0a. */
.bshot.tall{aspect-ratio:auto;display:flex;justify-content:center;
  padding:clamp(20px,3vw,44px) 0}
/* Rajaus on <picture>-elementissa, ei vain <img>:ssa: flex-elementtina
   picture venyy muuten koko leveyteen ja kuva jaa vasempaan reunaan. */
.bshot.tall picture{display:block;min-width:0;max-width:min(100%,780px)}
.bshot.tall img{width:100%;height:auto;object-fit:contain;max-height:82vh}
@media(max-width:700px){.bshot.tall{padding:16px 0}
  .bshot.tall img{max-height:68vh;max-width:calc(100% - 32px)}}

/* ---------- teksti + faktat ---------- */
.bbody{padding:var(--pad) 0 clamp(48px,6vw,88px)}
.bbody-grid{display:grid;grid-template-columns:.32fr .68fr;gap:var(--gap)}
.bfacts{margin:0}
.bfacts dt{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-top:20px}
.bfacts dt:first-of-type{margin-top:0}
.bfacts dd{margin:5px 0 0;font-size:15.5px;font-weight:500}
.bcopy p{margin:0;font-size:clamp(16.5px,1.55vw,20px);line-height:1.62;
  color:var(--grey);max-width:62ch}
@media(max-width:820px){.bbody-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- pystykuva + nostolause ---------- */
.bfig{padding:0 0 var(--pad)}
.bfig-grid{display:grid;grid-template-columns:.46fr .54fr;gap:var(--gap);align-items:center}
.bfig-img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.bfig-img img{width:100%;height:100%;object-fit:cover}
.bpull{font-size:clamp(24px,3.4vw,46px);text-transform:uppercase;font-weight:600;
  line-height:1.04;letter-spacing:-.015em;color:var(--acc);margin:0;max-width:15ch}
@media(max-width:820px){.bfig-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- lisakuvat: assets/gallery/<slug>/ ---------- */
.bgal{padding:0 0 var(--pad)}
.bgal h2.mono{display:block;color:var(--grey);font-weight:400;
  margin:0 0 clamp(20px,2.6vw,34px)}
/* auto-fit + 1fr: tyhjat sarakkeet romahtavat, joten kolme kuvaa tayttaa
   rivin. Kiintea ylaraja EI kay: se maaraisi myos sarakemaaran laskennan
   ja kolme kuvaa jaisi kahteen sarakkeeseen. Yksittaisen kuvan venymisen
   estaa figuren max-width alla. */
.bgal-grid{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
/* align-self:start — muuten figuren tausta venyy rivin korkuiseksi ja
   matalan kuvan alle jaa nakyva laatikko. */
.bgal figure{margin:0;overflow:hidden;background:var(--paper-2);align-self:start;max-width:520px}
.bgal img{width:100%;height:auto}

/* ---------- yhteydenotto ---------- */
.bcta{padding:var(--pad) 0}
.bcta h2{font-size:clamp(28px,4.4vw,62px);margin:0 0 clamp(26px,3.4vw,46px);color:var(--paper);max-width:16ch}
.bcta-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.bcta .mono{color:var(--acc-lt);display:block;margin-bottom:13px}
.bcta p{margin:0;color:rgba(248,245,237,.68);max-width:42ch;font-size:15.5px}
.bcta address{font-style:normal;line-height:1.72;color:rgba(248,245,237,.92);font-size:15.5px}
.bcta address a{border-bottom:1px solid rgba(248,245,237,.28);transition:color .2s ease,border-color .2s ease}
.bcta address a:hover{color:var(--acc-lt);border-bottom-color:var(--acc-lt)}
.bcta .ct-p{display:block;margin-top:15px}
@media(max-width:640px){.bcta-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- edellinen / seuraava ---------- */
.bnav{border-top:1px solid var(--line);padding:24px 0 clamp(56px,7vw,96px)}
.bnav-in{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.bnav a{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);border-bottom:1px solid transparent;
  padding-bottom:3px;transition:color .2s ease,border-color .2s ease}
.bnav a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.bnav .all{color:var(--ink);font-weight:700}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:rgba(248,245,237,.5);padding:26px 0 46px}
.ftr-in{border-top:1px solid rgba(248,245,237,.18);padding-top:26px;display:flex;
  flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:baseline}
.ftr-in .mark{font-size:15px;color:var(--paper)}
.ftr-in .mark i{color:var(--acc-lt)}

/* ---------- paljastusanimaatio ---------- */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
}