/* Sorrell & Smith gallery hub (/gallery/). One continuous dark river: each
   timber is a dense 12-column photo mosaic on fixed row units, the hero photo
   bleeding off the page edge and feathering into the ground, with the ground
   tint drifting toward each wood's own colour. Oswald + Nunito, as the site. */
.ssg{
  --ground:#121110; --ink:#efe9e1; --ink-soft:#b8aea2; --ink-mute:#7d746a;
  --rule:rgba(239,233,225,.14); --brass:#c9a46a;
  --oak:#8a5a2b; --elm:#9c5a22; --pippy:#a9742a; --mappa:#8f7a4a; --walnut:#4a2e22; --yew:#a0491f; --ash:#8c7f52; --cedar:#9a5e4e;
  --display:'Oswald','Arial Narrow',Impact,sans-serif;
  --body:'Nunito','Segoe UI',system-ui,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --unit:clamp(78px,8.6vw,140px);
  background:var(--ground);color:var(--ink);font-family:var(--body);font-weight:300;font-size:17px;line-height:1.65;overflow-x:hidden;
}
.ssg *,.ssg *::before,.ssg *::after{box-sizing:border-box}
.ssg img{max-width:100%;display:block}
.ssg a{color:inherit}
.ssg h1,.ssg h2{font-family:var(--display);font-weight:400;margin:0;padding:0;text-wrap:balance;line-height:1.02;color:var(--ink)}
.ssg p{padding:0}
.ssg .wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gutter)}
.ssg .eyebrow{font-family:var(--display);font-weight:300;letter-spacing:.22em;text-transform:uppercase;font-size:12px;color:var(--brass)}
body.ss-gallery-view #main-content{background:var(--ground, #121110)}
body.ss-gallery-view #main-content .container{width:100%;max-width:none;padding:0}
body.ss-gallery-view #main-content .ssg-page{padding:0}

/* Hero */
.ssg-hero{position:relative;padding-block:clamp(56px,9vw,120px) clamp(40px,6vw,80px);overflow:hidden}
.ssg-hero-bg{position:absolute;inset:0;z-index:0}
.ssg-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.5;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 100%);mask-image:linear-gradient(to bottom,#000 30%,transparent 100%)}
.ssg-hero .wrap{position:relative;z-index:1}
.ssg-hero h1{font-size:clamp(48px,7vw,104px);font-weight:300;letter-spacing:-.01em;text-transform:uppercase;line-height:.92}
.ssg-hero h1 em{font-style:normal;font-weight:500;color:var(--brass)}
.ssg-hero p{max-width:34em;font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);margin:26px 0 0}
.ssg-index{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;padding-top:26px;border-top:1px solid var(--rule)}
.ssg-index a{text-decoration:none;font-family:var(--display);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:10px}
.ssg-index a i{width:12px;height:12px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ssg-index a:hover{color:var(--ink)}

/* Timber bands */
.ssg-timber{position:relative;padding-block:clamp(44px,6vw,96px);isolation:isolate;scroll-margin-top:90px}
.ssg-timber::before{content:"";position:absolute;inset:-15% 0;z-index:-1;background:radial-gradient(ellipse 70% 60% at var(--gx,20%) 50%,color-mix(in srgb,var(--tint) 36%,transparent),transparent 70%);pointer-events:none}
.ssg-timber .wrap{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(var(--unit),auto);gap:clamp(8px,1.2vw,16px)}
.ssg .ph{position:relative;overflow:hidden;background:#1a1816;min-height:0}
.ssg .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.ssg .ph:hover img{transform:scale(1.04)}
.ssg .ph.hero-l{margin-left:calc(-1 * var(--gutter))}
.ssg .ph.hero-l img{-webkit-mask-image:linear-gradient(to right,#000 78%,transparent);mask-image:linear-gradient(to right,#000 78%,transparent)}
.ssg .ph.hero-r{margin-right:calc(-1 * var(--gutter))}
.ssg .ph.hero-r img{-webkit-mask-image:linear-gradient(to left,#000 78%,transparent);mask-image:linear-gradient(to left,#000 78%,transparent)}
.ssg .copy{display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0;padding-block:6px}
.ssg .copy h2{font-size:clamp(38px,4.6vw,66px);text-transform:uppercase;letter-spacing:-.005em}
.ssg .copy h2 small{display:block;font-family:var(--body);font-style:italic;font-weight:300;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink-mute);margin-top:8px;line-height:1.4}
.ssg .copy p{margin:0;max-width:34em;color:var(--ink-soft);font-size:16px}
.ssg .traits{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ssg .traits span{font-family:var(--display);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border:1px solid var(--rule);color:var(--ink-soft)}
.ssg .more{margin-top:8px;font-family:var(--display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--brass);display:inline-flex;gap:10px;align-items:center}
.ssg .more::after{content:"";width:34px;height:1px;background:var(--brass);transition:width .3s}
.ssg .more:hover::after{width:54px}
.ssg .cap{position:absolute;left:16px;bottom:14px;font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(239,233,225,.8);text-shadow:0 1px 8px rgba(0,0,0,.7);z-index:1}
.ssg .copy-l .copy{padding-right:clamp(0px,2vw,28px)}
.ssg .copy-r .copy{padding-left:clamp(0px,2vw,28px)}

/* Mosaics (grid-column / grid-row on a 12-column grid). */
#oak .p0{grid-column:1/8;grid-row:1/4}   #oak .copy{grid-column:8/13;grid-row:1/4}
#oak .p1{grid-column:1/4;grid-row:4/6}   #oak .p2{grid-column:4/9;grid-row:4/6}   #oak .p3{grid-column:9/13;grid-row:4/6}
#oak .p4{grid-column:1/6;grid-row:6/8}   #oak .p6{grid-column:6/9;grid-row:6/8}   #oak .p5{grid-column:9/11;grid-row:6/8}   #oak .p7{grid-column:11/13;grid-row:6/8}
#oak .p8{grid-column:1/7;grid-row:8/10}  #oak .p9{grid-column:7/13;grid-row:8/10}
#elm .copy{grid-column:1/6;grid-row:1/4} #elm .p0{grid-column:6/13;grid-row:1/4}
#elm .p2{grid-column:1/7;grid-row:4/6}   #elm .p1{grid-column:7/10;grid-row:4/6}  #elm .p5{grid-column:10/13;grid-row:4/6}
#elm .p3{grid-column:1/4;grid-row:6/8}   #elm .p4{grid-column:4/8;grid-row:6/8}   #elm .p6{grid-column:8/11;grid-row:6/8}  #elm .p7{grid-column:11/13;grid-row:6/8}
#elm .p8{grid-column:1/4;grid-row:8/10}  #elm .p9{grid-column:4/7;grid-row:8/10}  #elm .p10{grid-column:7/10;grid-row:8/10} #elm .p11{grid-column:10/13;grid-row:8/10}
#pippy .p0{grid-column:1/8;grid-row:1/4} #pippy .copy{grid-column:8/13;grid-row:1/4}
#pippy .p1{grid-column:1/4;grid-row:4/6} #pippy .p2{grid-column:4/8;grid-row:4/6} #pippy .p3{grid-column:8/10;grid-row:4/6} #pippy .p4{grid-column:10/13;grid-row:4/6}
#pippy .p5{grid-column:1/5;grid-row:6/8} #pippy .p6{grid-column:5/8;grid-row:6/8} #pippy .p7{grid-column:8/13;grid-row:6/8}
#pippy .p8{grid-column:1/5;grid-row:8/10} #pippy .p9{grid-column:5/7;grid-row:8/10} #pippy .p10{grid-column:7/13;grid-row:8/10}
#mappa .copy{grid-column:1/5;grid-row:1/4} #mappa .p0{grid-column:5/13;grid-row:1/4}
#mappa .p1{grid-column:1/3;grid-row:4/8}   #mappa .p2{grid-column:3/9;grid-row:4/6}  #mappa .p3{grid-column:9/13;grid-row:4/6}
#mappa .p4{grid-column:3/6;grid-row:6/8}   #mappa .p5{grid-column:6/9;grid-row:6/8}  #mappa .p6{grid-column:9/11;grid-row:6/8} #mappa .p7{grid-column:11/13;grid-row:6/8}
#walnut .p0{grid-column:1/8;grid-row:1/4}  #walnut .copy{grid-column:8/13;grid-row:1/4}
#walnut .p1{grid-column:1/4;grid-row:4/6}  #walnut .p2{grid-column:4/9;grid-row:4/6} #walnut .p3{grid-column:9/13;grid-row:4/6}
#walnut .p4{grid-column:1/5;grid-row:6/8}  #walnut .p5{grid-column:5/8;grid-row:6/8} #walnut .p6{grid-column:8/10;grid-row:6/8} #walnut .p7{grid-column:10/13;grid-row:6/8}
#yew .copy{grid-column:1/6;grid-row:1/4}   #yew .p0{grid-column:6/13;grid-row:1/4}
#yew .p1{grid-column:1/6;grid-row:4/6}     #yew .p3{grid-column:6/10;grid-row:4/6}   #yew .p2{grid-column:10/13;grid-row:4/6}
#yew .p4{grid-column:1/4;grid-row:6/8}     #yew .p5{grid-column:4/8;grid-row:6/8}    #yew .p6{grid-column:8/11;grid-row:6/8}   #yew .p7{grid-column:11/13;grid-row:6/8}
#ash .p0{grid-column:1/8;grid-row:1/4}     #ash .copy{grid-column:8/13;grid-row:1/4}
#ash .p1{grid-column:1/4;grid-row:4/6}     #ash .p2{grid-column:4/9;grid-row:4/6}    #ash .p3{grid-column:9/13;grid-row:4/6}
#ash .p4{grid-column:1/6;grid-row:6/8}     #ash .p5{grid-column:6/9;grid-row:6/8}    #ash .p6{grid-column:9/13;grid-row:6/8}
#cedar .copy{grid-column:1/6;grid-row:1/4} #cedar .p0{grid-column:6/13;grid-row:1/4}
#cedar .p1{grid-column:1/6;grid-row:4/6}   #cedar .p2{grid-column:6/10;grid-row:4/6} #cedar .p3{grid-column:10/13;grid-row:4/8}
#cedar .p5{grid-column:1/4;grid-row:6/8}   #cedar .p6{grid-column:4/7;grid-row:6/8}  #cedar .p4{grid-column:7/10;grid-row:6/8}

@media (max-width:820px){
  .ssg-timber .wrap{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:8px}
  .ssg-timber .ph{grid-column:auto!important;grid-row:auto!important;aspect-ratio:1;margin:0!important;order:1}
  .ssg-timber .ph.p0{grid-column:1/-1!important;aspect-ratio:4/3;order:0}
  .ssg-timber .copy{grid-column:1/-1!important;grid-row:auto!important;order:-1;padding:0 0 8px}
  .ssg .ph.hero-l img,.ssg .ph.hero-r img{-webkit-mask-image:none;mask-image:none}
}

.ssg-seam{height:1px;background:linear-gradient(to right,transparent,var(--rule) 30%,var(--rule) 70%,transparent);margin:0 auto;max-width:1280px}

/* The one-off */
.ssg-oneoff{position:relative;padding-block:clamp(60px,9vw,130px);overflow:hidden}
.ssg-oneoff .bg{position:absolute;inset:0;z-index:0}
.ssg-oneoff .bg img{width:100%;height:100%;object-fit:cover;opacity:.32;-webkit-mask-image:linear-gradient(to right,transparent,#000 45%);mask-image:linear-gradient(to right,transparent,#000 45%)}
.ssg-oneoff .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
.ssg-oneoff h2{font-size:clamp(40px,6vw,88px);text-transform:uppercase;font-weight:300;line-height:.95}
.ssg-oneoff h2 em{font-style:normal;font-weight:500;color:var(--brass)}
.ssg-oneoff p{color:var(--ink-soft);max-width:30em;margin:0 0 18px}
@media (max-width:820px){.ssg-oneoff .wrap{grid-template-columns:1fr}}

/* Close */
.ssg-close{padding-block:clamp(50px,7vw,90px);border-top:1px solid var(--rule)}
.ssg-close .wrap{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.ssg-close h2{font-size:clamp(28px,3.4vw,46px);text-transform:uppercase;font-weight:300}
.ssg-btns{display:flex;gap:12px;flex-wrap:wrap}
.ssg .btn{font-family:var(--display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:15px 24px;border:1px solid var(--brass);color:var(--brass);line-height:1.2}
.ssg .btn.solid{background:var(--brass);color:#141210}
@media (max-width:820px){.ssg-close .wrap{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ssg .ph img,.ssg .more::after{transition:none}}

/* Colour / Character / Good for */
.ssg .copy p{font-size:16px}
.ssg .spec{display:grid;gap:0;margin:6px 0 0;border-top:1px solid var(--rule)}
.ssg .spec div{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule)}
.ssg .spec dt{font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);padding-top:2px}
.ssg .spec dd{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.5}
.ssg-hero p + p{margin-top:12px}
.ssg-oneoff h2{font-size:clamp(34px,4.4vw,64px)}
.ssg-oneoff p + p{margin-top:0}
.ssg-close p{margin:12px 0 0;color:var(--ink-soft);max-width:44em}