@font-face{font-family:InstrumentSerif;src:url('assets/InstrumentSerif.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Narrow;src:url('assets/ArialNarrow.woff2')}@font-face{font-family:Narrow;src:url('assets/ArialNarrow-Bold.woff2');font-weight:700}
:root{--canvas:#242424;--white:#fff;--ink:#101010}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--white);font-family:Narrow,'Arial Narrow',sans-serif;background:var(--canvas)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible{outline:2px solid currentColor;outline-offset:5px}figure,p,h1,h2{margin:0}img{display:block;max-width:100%}.intro{position:fixed;inset:0 auto 0 0;width:290px;padding:32px 30px;display:flex;flex-direction:column;background:#fff;color:var(--ink)}.wordmark{font:48px/.9 InstrumentSerif,serif;display:flex;justify-content:space-between;align-items:center}.mark{font:48px Georgia;color:var(--canvas)}.hello{font-size:27px;line-height:1.15;margin-top:78px}.description{font-size:20px;line-height:1.4;margin-top:22px;color:#555;max-width:225px}nav{display:grid;gap:12px;font-size:20px;margin-top:40px}nav a:first-child{color:var(--canvas)}.footnote{margin-top:auto;padding-top:50px;font-size:17px;color:#777}.footnote p{line-height:1.35;margin-bottom:25px}.footnote div{display:flex;gap:18px;margin-bottom:10px}small{font-size:14px}main{margin-left:290px;background-image:linear-gradient(#ffffff19 1px,transparent 1px),linear-gradient(90deg,#ffffff19 1px,transparent 1px);background-size:40px 40px}.hero{min-height:900px;display:grid;grid-template-columns:1fr .9fr;gap:25px;align-items:center;padding:65px 6% 70px}.eyebrow{font-size:13px;letter-spacing:1.1px}.hero h1{font:clamp(65px,6.3vw,106px)/.96 InstrumentSerif,serif;letter-spacing:-2px;margin:28px 0}.subhead{font-size:24px;line-height:1.3;color:#ffffffd9}.circle-link{display:inline-flex;gap:20px;align-items:center;font:30px InstrumentSerif,serif;border:1.5px solid white;border-radius:48% 52% 47% 53%;transform:rotate(-5deg);padding:8px 22px;margin-top:30px}.pinned{width:180px;padding:8px 8px 16px;background:white;color:var(--canvas);margin:50px 0 0 24px;transform:rotate(-7deg);box-shadow:1px 8px 13px #0003}.pinned img{height:140px;width:100%;object-fit:cover}.pinned figcaption{font-size:15px;padding-top:12px;text-align:center}.phone-area{text-align:center;align-self:center;position:relative}.hand-note{display:block;font:23px InstrumentSerif,serif;transform:rotate(4deg);margin-bottom:23px}.phone{width:min(100%,320px);margin:auto;padding:5px;border:2px solid #ffffff90;border-radius:44px;background:#242424;box-shadow:12px 22px 35px #0000004d;transform:rotate(3deg)}.phone img{width:100%;border-radius:37px}.phone-label{display:block;font-size:12px;letter-spacing:1.5px;margin-top:25px}.collection{padding:30px 6% 75px;scroll-margin-top:25px}.section-title{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:28px}.section-title h2{font:55px InstrumentSerif,serif}.section-title>span{font-size:13px;letter-spacing:1px}.reference-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.reference-row figure{background:white;color:var(--canvas);padding:12px;transform:rotate(-2deg)}.reference-row img{width:100%;height:270px;object-fit:cover}.reference-row figcaption{display:flex;justify-content:space-between;align-items:center;padding:18px 4px 5px;font-size:20px}.note{padding:20px 0}.note h2{font:60px/.98 InstrumentSerif,serif;margin:20px 0}.note p{font-size:21px;line-height:1.4;max-width:330px}.note .little{font-size:13px;color:#ffffffaa;margin-top:28px}footer{display:flex;justify-content:space-between;gap:20px;margin:0 6%;padding:25px 0 35px;border-top:1px solid #ffffff50;font-size:17px}.skip{position:absolute;top:-100px}.skip:focus{top:10px;left:310px;background:white;color:#000;padding:10px;z-index:4}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1600px){.hero{max-width:1350px;margin:auto}.phone{width:360px}}@media(max-width:1100px){.intro{width:235px;padding:25px}.wordmark{font-size:40px}.hello{margin-top:60px}main{margin-left:235px}.hero{padding:55px 5%;gap:20px;min-height:800px}.hero h1{font-size:75px}.phone{border-radius:35px}.phone img{border-radius:29px}.reference-row{gap:25px}.section-title h2{font-size:45px}}@media(max-width:760px){.intro{position:relative;width:100%;padding:20px 24px;display:block}.wordmark{font-size:35px}.mark{font-size:34px}.hello,.description,.footnote{display:none}nav{display:flex;gap:20px;margin-top:20px;font-size:16px}nav a:last-child{margin-left:auto}main{margin:0}.hero{display:flex;flex-direction:column;align-items:stretch;min-height:auto;padding:45px 26px;gap:40px}.hero h1{font-size:76px;margin:22px 0}.subhead{font-size:22px}.pinned{display:none}.phone-area{align-self:center;width:100%}.phone{width:280px;border-radius:39px}.phone img{border-radius:32px}.hand-note{font-size:22px}.collection{padding:30px 26px 40px}.section-title{display:block}.section-title>span{display:block;margin-top:12px}.reference-row{grid-template-columns:1fr;gap:20px}.note h2{font-size:57px}.reference-row img{height:250px}footer{font-size:15px}.skip:focus{left:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Moveable photos on a studio desk. The app preview remains charcoal. */
.photo-desk{display:flex;align-items:center;gap:26px;position:relative;margin-top:45px;min-height:230px}.photo-desk .pinned{margin:0;width:170px;flex:none}.photo-desk .pinned:nth-child(2){transform:rotate(8deg);margin-top:35px}.photo-desk .pinned img{height:135px}.drag-card{cursor:grab;touch-action:none;user-select:none;position:relative;translate:var(--drag-x,0px) var(--drag-y,0px);will-change:translate}.drag-card img{pointer-events:none;-webkit-user-drag:none}.drag-card:focus,.drag-card:focus-visible{outline:none}.drag-card.is-dragging{cursor:grabbing;z-index:10;box-shadow:4px 18px 30px #0005}.drag-hint{font-size:14px;color:#ffffffb0;margin-top:22px}.reset-photos{border:0;border-bottom:1px solid #ffffff60;padding:0 0 2px;margin-left:14px;background:none;color:inherit;font:inherit;cursor:pointer}.marker-trail{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;overflow:hidden}.marker-trail path{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}.intro{z-index:20}
@media(max-width:1100px) and (min-width:761px){.photo-desk{gap:15px}.photo-desk .pinned{width:135px}.photo-desk .pinned img{height:110px}}@media(max-width:760px){.photo-desk{gap:23px;margin-top:35px;min-height:180px}.photo-desk .pinned{display:block;width:135px}.photo-desk .pinned img{height:105px}.drag-hint{margin-top:12px}.hero h1{font-size:70px}}@media(prefers-reduced-motion:reduce){.marker-trail{display:none}}

/* Exact user-supplied cutting mat, including its fibers, grid and ruler marks. */
main{background-image:none;isolation:isolate}
main::before{content:"";position:fixed;inset:0 0 0 290px;z-index:-1;pointer-events:none;background:#242424 url('assets/charcoal-grid-background.png') right top/100% auto repeat-y}
@media(max-width:1100px){main::before{left:235px}}
@media(max-width:760px){main::before{left:0;background-size:auto 100%;background-position:center top;background-repeat:no-repeat}}

/* Top-bar study. Keep the workspace open and preserve the finer mat scale. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:20;max-width:1440px;margin:0 auto;padding:25px 48px 23px;border-bottom:1px solid #ffffff40;color:white}.top-brand{display:flex;align-items:center;gap:15px;font:42px/.9 InstrumentSerif,serif}.top-brand span{font:34px Georgia}.topbar nav{display:flex;align-items:center;gap:36px;font-size:18px;margin:0}.topbar nav a:first-child{color:inherit}.contact-link{border:1px solid #ffffff75;border-radius:24px;padding:10px 18px}main{margin:0}main::before{left:0;background-size:100% auto;background-repeat:repeat-y;background-position:center top}.hero{max-width:1350px;margin:auto;min-height:790px;padding:50px 70px 60px;gap:90px;grid-template-columns:1fr 1fr}.hero h1{font-size:clamp(74px,6.8vw,104px)}.phone{width:305px}.collection{max-width:1350px;margin:0 auto;padding:55px 70px 75px;scroll-margin-top:25px}footer{max-width:1210px;margin:0 auto;padding:26px 0 35px}footer small{display:block;margin-top:12px;color:#ffffffa6;font-size:13px}.footer-links{display:flex;align-items:flex-start;gap:24px}.skip:focus{left:20px}
@media(max-width:1100px){.topbar{margin:0 30px;padding:24px 0}.topbar nav{gap:24px}.hero{padding:45px 45px 55px;gap:40px;min-height:760px}.hero h1{font-size:78px}.collection{padding:35px 45px 65px}footer{margin:0 45px}main::before{left:0;background-size:100% auto}}
@media(max-width:760px){.topbar{margin:0 24px;padding:22px 0 18px;gap:23px;flex-wrap:wrap}.top-brand{font-size:36px;gap:10px}.top-brand span{font-size:29px}.topbar nav{width:100%;justify-content:space-between;gap:12px;font-size:16px}.topbar nav a:last-child{margin:0}.contact-link{border:0;padding:0}.hero{padding:36px 26px 45px;gap:35px;min-height:auto}.hero h1{font-size:70px}.phone{width:280px}.collection{padding:30px 26px 45px}footer{margin:0 26px;flex-direction:column;gap:24px}.footer-links{gap:24px}main::before{left:0;background-size:auto 100%;background-repeat:no-repeat;background-position:center top}}

/* White navigation band gives the charcoal studio canvas room to breathe. */
.topbar{max-width:none;margin:0;background:#fff;color:#101010;border-bottom:1px solid #10101012;padding-inline:max(48px,calc((100% - 1344px)/2))}.top-brand span{color:#242424}.topbar .contact-link{border-color:#24242460;color:#242424}
@media(max-width:1100px){.topbar{margin:0;padding:24px 30px}}
@media(max-width:760px){.topbar{padding:22px 24px 18px}}
@media(max-width:380px){.photo-desk{gap:18px}.photo-desk .pinned{width:calc((100% - 18px)/2)}.hero h1{font-size:clamp(52px,18vw,70px)}}
@media(max-width:380px){.phone{width:min(280px,calc(100% - 24px))}}

/* Inset white island, like a clean card resting on the cutting mat. */
body{display:flow-root}.topbar{width:calc(100% - 64px);max-width:1280px;margin:26px auto 0;padding:20px 28px;border:1px solid #1010100d;border-radius:6px;box-shadow:0 4px 18px #00000026}
@media(max-width:760px){.topbar{width:calc(100% - 32px);margin-top:16px;padding:20px;gap:20px}.topbar nav{font-size:15px;gap:10px}}

/* Give the product more presence and bring the two hero columns closer. */
@media(min-width:1101px){.hero{gap:44px;padding-top:36px;padding-bottom:36px;min-height:auto}.phone-area{width:100%;max-width:430px;justify-self:start}.phone{width:360px}.hand-note{margin-bottom:18px}.phone-label{margin-top:20px}}

/* Bring the sidebar introduction into the floating navigation island. */
.topbar{display:block;padding:20px 28px 22px}
.topbar-main{display:flex;align-items:center;justify-content:space-between;gap:28px}
.topbar nav a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.topbar .nav-arrow{width:22px;height:22px;flex:none}
.topbar nav a:first-child{color:#242424}
.topbar-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:19px;padding-top:17px;border-top:1px solid #10101014}
.topbar-greeting{font:26px/1.15 Narrow,'Arial Narrow',sans-serif;letter-spacing:-.3px;margin:0 0 7px}
.topbar-description{max-width:620px;font:17px/1.4 Narrow,'Arial Narrow',sans-serif;color:#595959;margin:0}
.topbar-audience span{display:block}
.topbar-audience{font:17px/1.4 Narrow,'Arial Narrow',sans-serif;color:#777;margin:0;flex:none}
@media(max-width:1100px){.topbar-main{gap:20px}.topbar nav{gap:20px}.topbar-description{max-width:540px}}
@media(max-width:760px){.topbar{padding:20px}.topbar-main{flex-wrap:wrap;gap:18px}.topbar nav{flex-wrap:wrap;justify-content:flex-start;gap:12px 18px}.topbar .nav-arrow{width:18px;height:18px}.topbar nav a{gap:6px}.topbar-intro{align-items:flex-start;gap:16px;flex-direction:column;margin-top:18px;padding-top:16px}.topbar-greeting{font-size:25px}.topbar-description{font-size:17px}.topbar-audience{font-size:15px}.topbar-audience span{display:inline}}


/* Studio note study: a separate white card below the hero headline. */
.topbar{padding:20px 28px}
.studio-note{width:100%;max-width:420px;background:#fff;color:#242424;padding:25px 28px 20px;border-radius:3px;box-shadow:3px 7px 0 #00000030;position:relative;margin-top:24px}
.studio-note h2{font:36px/.98 InstrumentSerif,serif;letter-spacing:-.4px;margin:0 0 14px}
.studio-note>p{font:19px/1.35 Narrow,'Arial Narrow',sans-serif;color:#555555;max-width:340px}
.studio-note-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #24242418;padding-top:16px;margin-top:20px}
.studio-note-bottom a{display:inline-flex;align-items:center;gap:20px;font:20px/1.2 Narrow,'Arial Narrow',sans-serif;color:#242424;min-height:44px}
.studio-note-bottom a span{font:29px/1 InstrumentSerif,serif}
.studio-note-bottom>span{font:14px/1.35 Narrow,'Arial Narrow',sans-serif;color:#707070;text-align:right}
.hero-copy>.eyebrow{font-size:12px}
.hero h1{margin:20px 0 0}
.photo-desk{margin-top:29px;min-height:190px}
.photo-desk .pinned{width:148px}.photo-desk .pinned img{height:112px}
.drag-hint{margin-top:16px}
@media(min-width:1101px){.hero{padding-top:40px;align-items:center}.hero h1{font-size:clamp(74px,6.3vw,94px)}.phone-area{align-self:center}}
@media(min-width:761px) and (max-width:1100px){.hero{gap:32px}.hero h1{font-size:74px}.studio-note{padding:23px}.studio-note h2{font-size:32px}.photo-desk{gap:20px}.photo-desk .pinned{width:130px}.photo-desk .pinned img{height:100px}}
@media(max-width:760px){.topbar{padding:20px}.studio-note{max-width:none;padding:24px;margin-top:26px}.studio-note h2{font-size:35px}.hero h1{font-size:70px}.photo-desk{margin-top:28px;min-height:180px}.photo-desk .pinned{width:135px}.photo-desk .pinned img{height:105px}}
@media(max-width:380px){.hero h1{font-size:clamp(52px,18vw,70px)}.studio-note{padding:22px}.studio-note h2{font-size:32px}.studio-note-bottom{gap:12px}.photo-desk .pinned{width:calc((100% - 23px)/2)}}


/* Navigation destinations, with room to wrap on smaller screens. */
#about{scroll-margin-top:28px}
@media(min-width:1101px){.topbar nav{gap:28px}}
@media(min-width:761px) and (max-width:1100px){.topbar-main{flex-wrap:wrap;gap:20px}.topbar nav{width:100%;justify-content:space-between;flex-wrap:wrap;gap:12px 20px}}

/* Keep the supplied portrait poster fully visible on the desk. */
.photo-desk .pinned-portrait img{height:auto;object-fit:contain}

.topbar .test-link[aria-disabled="true"]{cursor:default;text-decoration:none}

/* The type directory adds one destination to the shared navigation. */
.topbar-main{flex-wrap:wrap}
.topbar nav{flex-wrap:wrap}
@media(min-width:1101px){.topbar nav{gap:22px}}

/* User-supplied diamond reader logo, with the original artwork preserved. */
.top-brand{gap:12px}
.top-brand .brand-logo{position:relative;display:block;width:42px;height:42px;flex:none;overflow:hidden}
.brand-logo img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:760px){.top-brand .brand-logo{width:36px;height:36px}}

/* A1 copy study: give the longer headline a readable measure. */
.hero-a1 .hero-copy{min-width:0}
.hero-a1 h1{font-size:clamp(48px,4.6vw,68px);line-height:1.01;letter-spacing:-1.3px;max-width:540px;text-wrap:balance}
.hero-a1 h1 span{display:block}
.hero-a1 .studio-note{max-width:460px}
.hero-a1 .studio-note h2{font-size:32px;line-height:1.05;text-wrap:balance}
.hero-a1 .studio-note>p{max-width:none;font-size:18px;line-height:1.4}
@media(max-width:760px){
  .hero-a1 h1{font-size:clamp(42px,10.8vw,64px);letter-spacing:-.8px}
  .hero-a1 .studio-note{max-width:none}
  .hero-a1 .studio-note h2{font-size:30px}
  .hero-a1 .studio-note-bottom{gap:12px}
  .hero-a1 .studio-note-bottom>span{max-width:145px}
}

/* Primary download link in the shared navigation. */
.topbar .download-link{min-height:44px;padding:10px 18px;border:1px solid #000;border-radius:999px;background:#000;color:#fff}
.topbar .download-link:hover{background:#242424;border-color:#242424;color:#fff;text-decoration:none}
.topbar .download-link:focus-visible{outline:2px solid #000;outline-offset:4px}
.topbar .test-link{height:44px;min-height:44px;padding:10px 18px;border:1px solid #000;border-radius:999px;background:#fff;color:#000}
.topbar .test-link:hover{background:#f2f2f2;color:#000;text-decoration:none}
.topbar .test-link:focus-visible{outline:2px solid #000;outline-offset:4px}