/* Studio9Art — concept picker. Matches the client's own brand: the Didone
   wordmark from his logo, a gallery white ground, black frames throughout. */

:root{
  --paper:#F7F5F1; --paper-2:#EFEBE4; --card:#fff;
  --ink:#17161A; --ink-2:#57534B; --ink-3:#6C685F;
  --hair:rgba(23,22,26,.14); --hair-2:rgba(23,22,26,.07);
  --e:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:17px; line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.w{ width:min(1180px, calc(100% - 44px)); margin-inline:auto; }

.ph{ padding:34px 0 0; display:grid; place-items:center; }
.ph__logo{ height:70px; width:auto; }

.pk{ display:flex; align-items:center; gap:12px; font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.pk i{ width:26px; height:1px; background:currentColor; opacity:.6; flex:0 0 26px; }

.pi{ width:min(1180px, calc(100% - 44px)); margin:clamp(44px,6vw,80px) auto clamp(36px,5vw,60px); max-width:900px; }
.pi__h1{ font-family:"Bodoni Moda",Georgia,serif; font-weight:400;
  font-size:clamp(2.2rem,5.2vw,3.8rem); line-height:1.06; letter-spacing:-.02em; margin:18px 0 20px; }
.pi__l{ color:var(--ink-2); font-size:clamp(1.02rem,1.5vw,1.15rem); max-width:66ch; }
.pi__facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:34px; }
.pi__facts div{ border-top:2px solid var(--ink); padding-top:14px; }
.pi__facts b{ display:block; font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.25rem; }
.pi__facts span{ font-size:13.5px; color:var(--ink-3); }

.pc{ width:min(1180px, calc(100% - 44px)); margin-inline:auto;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.6vw,34px); }
.cd{ background:var(--card); box-shadow:0 20px 44px -26px rgba(23,22,26,.4); }
.cd--wide{ grid-column:1 / -1; }
.cd__a{ display:block; height:100%; transition:transform .3s var(--e), box-shadow .3s var(--e); }
.cd--wide .cd__a{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
@media (hover:hover) and (pointer:fine){
  .cd:hover{ box-shadow:0 30px 60px -28px rgba(23,22,26,.5); }
}
.cd__shot{ position:relative; min-height:280px; overflow:hidden; background:var(--paper-2); }
.cd--wide .cd__shot{ min-height:400px; }
.cd__shot--3{ background:#1E1811; }
.rail{ position:absolute; left:8%; right:8%; top:34px; height:4px; border-radius:2px;
  background:linear-gradient(180deg,#D8D3C9,#B0AB9F); }

.mini{ position:absolute; background:linear-gradient(145deg,#242329,#0F0E12 60%,#1A1920);
  padding:8px; box-shadow:0 16px 30px -14px rgba(23,22,26,.55); }
.mini__mat{ background:#FCFBF8; padding:12px; }
.mini__mat img{ width:100%; }
.cd__shot--1 .mini{ left:8%; top:38px; width:44%; }
.cd__shot--1 .mini--b{ left:52%; top:120px; width:38%; }
.cd__shot--2 .mini--s{ left:8%; top:56px; width:24%; padding:6px; }
.cd__shot--2 .mini--s .mini__mat{ padding:8px; }
.cd__shot--2 .mini--c{ left:38%; top:76px; }
.cd__shot--2 .mini--d{ left:68%; top:48px; }
.cd__shot--3 .mini--m{ left:50%; top:40px; transform:translateX(-50%); width:46%; }

.cd__body{ padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; }
.cd__n{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.cd__h{ font-family:"Bodoni Moda",Georgia,serif; font-weight:400;
  font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.12; margin:10px 0 14px; }
.cd__d{ color:var(--ink-2); font-size:15.5px; }
.cd__t{ list-style:none; margin:20px 0 24px; }
.cd__t li{ padding:11px 0; border-top:1px solid var(--hair-2); font-size:14.5px; color:var(--ink-2); }
.cd__go{ margin-top:auto; display:inline-block; align-self:flex-start;
  min-height:52px; padding:15px 28px; background:var(--ink); color:var(--paper);
  font-size:14px; font-weight:600; transition:background .2s var(--e); }
.cd__a:hover .cd__go{ background:#000; }

.pn{ width:min(1180px, calc(100% - 44px)); margin:clamp(56px,7vw,96px) auto 0;
  padding-top:clamp(36px,4vw,54px); border-top:1px solid var(--hair); }
.pn__h{ font-family:"Bodoni Moda",Georgia,serif; font-weight:400;
  font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:28px; }
.pn__g{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,44px); }
.pn__g h3{ font-family:"Bodoni Moda",serif; font-weight:400; font-size:1.2rem; margin-bottom:8px; }
.pn__g p{ color:var(--ink-2); font-size:15px; }

.pf{ width:min(1180px, calc(100% - 44px)); margin:clamp(48px,6vw,80px) auto 0;
  padding:22px 0 40px; border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--ink-3); }
.pf__sc{ display:inline-block; padding:12px 0; color:var(--ink-3); }
.pf__sc b{ color:var(--ink); font-weight:700; }

@media (max-width:900px){
  .pc{ grid-template-columns:1fr; }
  .cd--wide .cd__a{ grid-template-columns:1fr; }
  .pn__g{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .pi, .pc, .pn, .pf{ width:calc(100% - 32px); }
  .pi__facts{ grid-template-columns:1fr; gap:0; }
  .pi__facts div{ padding:14px 0; border-top:1px solid var(--hair-2); }
  .pi__facts div:first-child{ border-top:2px solid var(--ink); }
  .cd__shot, .cd--wide .cd__shot{ min-height:230px; }
  .cd__go{ align-self:stretch; text-align:center; }
  .ph__logo{ height:56px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}