@font-face {
  font-family:DM Sans;
  src:url('assets/dm-sans.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Caveat;
  src:url('assets/caveat.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}

:root {
  --paper:#fdf5dd;/*#f6f2e8;*/
  --ink:#35382e;
  --sage:#D2E1FF;/*#c1dbe8;*/
  --butter:#eee3b6;
  --pink:#e8ccc1;
  --rust:#02522b;/*#915640;*/
  --line:#aaa99a
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:'DM Sans',Arial,sans-serif;
  font-size:16px;
  line-height:1.65
}

body:before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
  opacity:.065;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23716a59' filter='url(%23n)' opacity='.6' d='M0 0h160v160H0z'/%3E%3C/svg%3E")
}

a {
  color:inherit;
  text-decoration:none
}

a:focus-visible {
  outline:3px solid var(--rust);
  outline-offset:7px
}

p,h1,h2,h3 {
  margin:0
}

img {
  max-width:100%;
  display:block
}

.wrap {
  max-width:1296px;
  width:calc(100% - 112px);
  margin:auto
}

.site-header {
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #b9b7a977
}

.wordmark {
  font-family:Georgia,serif;
  font-size:28px;
  letter-spacing:-1.1px;
  white-space:nowrap
}

.brand-dot {
  display:inline-block;
  font-size:31px;
  color:var(--rust);
  margin-left:10px;
  vertical-align:middle
}

.site-header nav {
  display:flex;
  gap:35px;
  font-size:14px
}

.site-header nav a,.instagram {
  position:relative
}

.brand-logo {
  width:100px;
  height:auto;
  object-fit:contain
}

.hero-photo {
  position:relative;
  overflow:hidden;
  min-width:0;
  background:#52624d
}

.hero-photo-image {width:100%;height:auto;display:block}

.hero-photo .lamp-note,.hero-photo .product-note,.hero-photo .desktop-book-note {
  color:#fff;
  z-index:2;
  text-shadow:0 1px 5px #0009
}

.hero-photo .product-note-arrow,.hero-photo .desktop-book-note img {
  filter:brightness(0) invert(1)
}

.hero-library {
  display:flex!important;
  flex-direction:column;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  gap:0!important
}

.hero-photo {
  order:1;
  width:100vw!important;
  height:auto!important;
  min-height:0;
  max-height:none!important;
  margin:0!important;
  border-radius:0!important;
  background-position:center!important
}

.hero-lead {
  order:2;
  width:calc(100% - 112px)!important;
  max-width:1296px!important;
  margin:58px auto 72px!important;
  padding:0!important
}

.hero-lead .compact-intro.hand {
  width:max-content;
  max-width:100%;
  font-family:'Slow Little Handwriting','Bradley Hand','Segoe Print',cursive!important;
  font-size:clamp(17px,1.8vw,23px)!important;
  line-height:1.15!important
}

@media(max-width:700px) {
  .hero-photo {
    height:auto!important;
    min-height:0
  }
  .hero-lead {
    width:calc(100% - 40px)!important;
    margin:38px auto 54px!important
  }
}

.site-header nav a:after,.instagram:after {
  content:'';
  position:absolute;
  left:0;
  bottom:-5px;
  width:100%;
  height:2px;
  background:var(--rust);
  transform:scaleX(0) rotate(-1deg);
  transform-origin:left;
  transition:transform .25s
}

.site-header nav a:hover:after,.instagram:hover:after {
  transform:scaleX(1) rotate(-1deg)
}

.hero {
  min-height:700px;
  display:grid;
  grid-template-columns:1.03fr 1fr;
  align-items:center;
  gap:25px;
  padding-top:48px;
  padding-bottom:50px
}

.eyebrow {
  font-size:12px;
  font-weight:600;
  letter-spacing:2.3px;
  margin-bottom:24px
}

.hero h1 {
  font-family:Georgia,serif;
  font-size:clamp(52px,5.1vw,78px);
  font-weight:400;
  line-height:1.07;
  letter-spacing:-3.8px
}

.hero h1 em {
  font-weight:400;
  position:relative
}

.hero h1 em:after {
  content:'';
  position:absolute;
  bottom:-3px;
  left:-2%;
  width:106%;
  height:5px;
  border-bottom:2px solid var(--rust);
  border-radius:45%;
  transform:rotate(-4deg)
}

.intro {
  font-size:17px;
  line-height:1.7;
  margin:29px 0 29px;
  color:#5b5e52
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  min-height:52px;
  padding:12px 23px;
  background:var(--ink);
  color:var(--paper);
  font-size:14px;
  border:1px solid var(--ink);
  border-radius:3px 7px 4px 5px;
  transition:transform .2s,background .2s
}

.button span {
  font-size:17px;
  line-height:1
}

.button:hover {
  background:#4b5141;
  transform:translateY(-3px) rotate(-.5deg)
}

.hand {
  font-family:Caveat,'Bradley Hand',cursive;
  font-size:26px;
  line-height:1.18;
  font-weight:400
}

.hero-whisper {
  display:block;
  margin:20px 0 0 70px;
  transform:rotate(-5deg);
  color:var(--rust);
  font-size:23px
}

.opening-scene {
  height:580px;
  position:relative
}

.scene-note {
  position:absolute;
  right:30px;
  top:8px;
  transform:rotate(7deg);
  color:#676d55;
  font-size:27px
}

.hero-book {
  position:absolute;
  display:block;
  transition:transform .35s;
  z-index:2
}

.hero-book:hover {
  transform:rotate(0deg) translateY(-8px)
}

.hero-cozy {
  width:60%;
  left:1%;
  top:90px;
  transform:rotate(-10deg)
}

.hero-sudoku {
  width:43%;
  right:0;
  top:235px;
  transform:rotate(9deg)
}

.book-cover {
  aspect-ratio:1;
  position:relative;
  box-shadow:5px 8px 0 #363d2920,10px 16px 24px #363d2914
}

.book-cover.has-art {
  background:transparent;
  box-shadow:5px 8px 15px #363d2925
}

.book-cover img {
  width:100%;
  height:100%;
  object-fit:contain
}

.placeholder {
  border:1px dashed #747867;
  background:#e6e9dd;
  padding:8%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:center
}

.placeholder.sudoku {
  background:#eae0bd
}

.placeholder-label {
  font-size:10px;
  letter-spacing:1.3px;
  line-height:1.6
}

.placeholder-title {
  font-family:Georgia,serif;
  font-size:clamp(17px,2vw,27px);
  line-height:1.24;
  font-weight:400
}

.placeholder-bottom {
  font-size:10px;
  line-height:1.4
}

.scene-art {
  position:absolute;
  left:0;
  bottom:13px;
  width:230px;
  height:190px;
  background-repeat:no-repeat;
  z-index:3;
  pointer-events:none
}

.scene-caption {
  position:absolute;
  bottom:1px;
  right:0;
  font-size:10px;
  letter-spacing:1.6px
}

.pause-line {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:16px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  letter-spacing:1px
}

.pause-line span:nth-child(2) {
  font-size:22px
}

.collection-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:68px;
  padding-bottom:28px
}

.collection-heading .eyebrow {
  margin:0
}

.collection-heading .hand {
  font-size:24px
}

.book-feature {
  position:relative
}

.cozy-feature {
  background:var(--sage);
  border-radius:52% 0 0 0 / 18px 0 0 0
}

.sudoku-feature {
  background:var(--butter);
  border-radius:0 0 45% 0 / 0 0 16px 0
}

.feature-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  padding-top:74px;
  padding-bottom:75px;
  align-items:center
}

.feature-art {
  position:relative;
  text-align:center;
  padding-bottom:45px
}

.edition {
  display:block;
  font-size:10px;
  letter-spacing:2px;
  margin-bottom:36px
}

.feature-cover {
  max-width:330px;
  width:82%;
  margin:auto;
  transform:rotate(-5deg)
}

.feature-cover .placeholder-title {
  font-size:32px
}

.feature-cover .placeholder {
  background:#edf0e6
}

.book-annotation {
  display:block;
  margin:0 0 15px;
  font-size:24px;
  transform:rotate(-4deg)
}

.feature-copy {
  max-width:435px
}

.feature-copy .eyebrow {
  margin-bottom:17px
}

.feature-copy h2 {
  font-family:Georgia,serif;
  font-size:58px;
  font-weight:400;
  line-height:1.07;
  letter-spacing:-2px
}

.description {
  margin-top:24px;
  color:#4b5144;
  font-size:17px
}

.specs {
  display:flex;
  gap:19px;
  flex-wrap:wrap;
  font-size:12px;
  letter-spacing:.2px;
  margin:22px 0 29px;
  padding-top:18px;
  border-top:1px solid #7d82664d
}

.specs span+span:before {
  content:'·';
  margin-right:19px
}

.feature-note {
  font-size:24px;
  margin-top:27px;
  transform:rotate(-3deg)
}

.sudoku-feature .feature-art {
  order:2
}

.sudoku-feature .feature-copy {
  order:1;
}

.sudoku-feature .feature-cover {
  transform:rotate(5deg);
  max-width:290px
}

.sudoku-feature .placeholder {
  background:#f4eed4
}

.sudoku-subtitle {
  letter-spacing:3px;
  font-size:14px;
  margin-top:15px
}

.sudoku-feature .book-annotation {
  transform:rotate(4deg)
}

.brand-note {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:100px;
  padding-top:105px;
  padding-bottom:115px;
  align-items:center
}

.brand-note h2 {
  font-family:Georgia,serif;
  font-size:53px;
  line-height:1.1;
  font-weight:400;
  letter-spacing:-1.8px;
  margin-bottom:25px
}

.brand-note h2 em {
  font-weight:400
}

.brand-note p:not(.eyebrow):not(.signoff) {
  max-width:515px;
  font-size:17px;
  color:#5b5e52
}

.signoff {
  margin-top:26px;
  color:var(--rust);
  transform:rotate(-3deg)
}

.note-art {
  height:265px;
  width:100%;
  background-repeat:no-repeat
}

.site-footer {
  padding:0 0 20px
}

.footer-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.footer-main .hand {
  font-size:22px
}

.instagram {
  font-size:13px
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #9d847b55;
  margin-top:40px;
  padding-top:20px;
  font-size:11px;
  letter-spacing:.2px
}

.previews {
  grid-column:1/-1;
  order:3
}

.previews h3 {
  font-family:Georgia,serif;
  font-size:28px;
  font-weight:400;
  margin-bottom:20px
}

.preview-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:24px
}

.preview-grid img {
  width:100%;
  height:320px;
  object-fit:contain
}

.skip {
  position:absolute;
  left:20px;
  top:-100px;
  z-index:100;
  background:var(--ink);
  color:white;
  padding:12px
}

.skip:focus {
  top:10px
}

/* Subscription page */
.subscribe-page {
  /*min-height:calc(100vh - 190px);*/
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);
  gap:clamp(60px,9vw,150px);
  padding-top:clamp(72px,6vw,140px);
  padding-bottom:clamp(90px,6vw,170px)
}

.subscribe-copy h1 {
  max-width:760px;
  margin:15px 0 30px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(56px,6.4vw,94px);
  font-weight:400;
  line-height:.96;
  letter-spacing:-4.5px
}

.subscribe-copy .hand {
  max-width:610px;
  margin:0;
  color:var(--rust);
  font-size:clamp(23px,2.3vw,33px);
  line-height:1.12;
  transform:rotate(-2deg)
}

.subscribe-panel {
  padding:clamp(28px,4vw,52px);
  background:var(--butter);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M10%2020C130%208%20260%2024%20390%2014C550%202%20700%2022%20835%2012C930%208%20990%2018%20985%2080C976%20210%20995%20350%20982%20480C972%20640%20997%20780%20985%20930C980%20982%20920%20990%20835%20982C690%20972%20545%20995%20390%20982C250%20970%20120%20994%2024%20980C4%20930%2016%20810%209%20690C2%20530%2020%20380%207%20240C2%20140%204%2065%2010%2020Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M10%2020C130%208%20260%2024%20390%2014C550%202%20700%2022%20835%2012C930%208%20990%2018%20985%2080C976%20210%20995%20350%20982%20480C972%20640%20997%20780%20985%20930C980%20982%20920%20990%20835%20982C690%20972%20545%20995%20390%20982C250%20970%20120%20994%2024%20980C4%20930%2016%20810%209%20690C2%20530%2020%20380%207%20240C2%20140%204%2065%2010%2020Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat
}

.subscribe-panel h2 {margin:0 0 12px;font:400 30px/1.1 Georgia,serif}
.subscribe-panel > p {margin:0 0 27px;color:#5b5e52}
.subscribe-form label {display:block;margin-bottom:9px;font-size:12px;letter-spacing:1.1px;text-transform:uppercase}
.subscribe-form input[type=email] {
  width:100%;
  min-height:54px;
  padding:0 16px;
  border:1px solid rgba(54,61,41,.42);
  border-radius:0;
  background:rgba(255,255,255,.45);
  color:var(--ink);
  font:16px/1.2 Arial,sans-serif
}
.subscribe-form input[type=email]:focus {outline:2px solid var(--rust);outline-offset:3px}
.subscribe-consent {display:grid!important;grid-template-columns:18px 1fr;gap:11px;align-items:start;margin:18px 0 22px!important;font-size:12px!important;line-height:1.45!important;letter-spacing:0!important;text-transform:none!important}
.subscribe-consent input {width:16px;height:16px;margin:2px 0 0;accent-color:var(--rust)}
.subscribe-form .button {width:100%;margin:0;border:0;cursor:pointer}
.subscribe-form .button:disabled {cursor:default;opacity:.72;transform:none}
.subscribe-form .button[aria-busy="true"] {cursor:wait}
.subscribe-form .button[aria-busy="true"] span::before {
  content:"";
  display:inline-block;
  width:.8em;
  height:.8em;
  margin-right:9px;
  border:2px solid rgba(255,255,255,.42);
  border-top-color:#fff;
  border-radius:50%;
  vertical-align:-.08em;
  animation:subscribe-spin .75s linear infinite
}
@keyframes subscribe-spin {to {transform:rotate(360deg)}}
.subscribe-fineprint {margin:18px 0 0!important;font-size:11px!important;line-height:1.5!important}
.subscribe-fineprint a,.subscribe-consent a {text-decoration:underline;text-underline-offset:3px}
.subscribe-notice {margin:0 0 23px!important;padding:14px 16px;border-left:3px solid var(--rust);background:rgba(255,255,255,.55);color:var(--ink)!important;font-size:14px!important}
.subscribe-dialog {max-width:460px;padding:35px 34px;border:1px solid rgba(54,61,41,.35);background:var(--paper);color:var(--ink);text-align:center;box-shadow:0 20px 70px rgba(31,33,27,.18)}
.subscribe-dialog::backdrop {background:rgba(31,33,27,.34);backdrop-filter:blur(2px)}
.subscribe-dialog h2 {margin:0 0 12px;font:400 31px/1.1 Georgia,serif}
.subscribe-dialog p {margin:0 0 25px;line-height:1.5;color:#5b5e52}
.subscribe-dialog button {border:0;background:none;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.subscribe-hp {position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.subscribe-result {max-width:650px;margin:clamp(100px,14vw,210px) auto;padding:50px;border:1px solid rgba(54,61,41,.28);text-align:center;background:rgba(246,242,232,.82)}
.subscribe-result h1 {margin:0 0 18px;font:400 clamp(42px,6vw,72px)/1 Arial,sans-serif;letter-spacing:-3px}
.subscribe-result .hand {margin:0 0 32px;color:var(--rust);font-size:27px}
.subscribe-result a {text-decoration:underline;text-underline-offset:5px}
.privacy-page {max-width:820px;padding-top:90px;padding-bottom:120px}
.privacy-page h1 {font:400 clamp(48px,6vw,76px)/1 Arial,sans-serif;letter-spacing:-3px}
.privacy-page h2 {margin:42px 0 12px;font:400 27px/1.2 Georgia,serif}
.privacy-page p,.privacy-page li {line-height:1.65;color:#4f5348}

@media(max-width:900px) {
  .subscribe-page {grid-template-columns:1fr;gap:48px;padding-top:65px}
  .subscribe-copy h1 {font-size:clamp(50px,11vw,78px)}
}

@media(max-width:700px) {
  .subscribe-page {width:calc(100% - 40px);gap:38px;padding-top:45px;padding-bottom:80px}
  .subscribe-copy h1 {font-size:clamp(45px,14vw,64px);letter-spacing:-3px}
  .subscribe-copy .hand {display:none}
  .subscribe-panel {padding:25px 20px}
  .subscribe-dialog {width:calc(100% - 40px);padding:30px 22px}
  .subscribe-result {margin:70px 20px;padding:38px 22px}
  .privacy-page {width:calc(100% - 40px);padding-top:55px}
}


@media(min-width:1500px) {
  .hero {
    min-height:760px
  }
  .opening-scene {
    height:610px
  }
}

@media(max-width:1050px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .hero h1 {
    font-size:59px;
    letter-spacing:-3px
  }
  .hero {
    gap:10px;
    min-height:650px
  }
  .opening-scene {
    height:535px
  }
  .hero-cozy {
    top:105px;
    width:62%
  }
  .hero-sudoku {
    top:260px;
    width:45%
  }
  .scene-art {
    width:170px;
    height:150px
  }
  .feature-grid {
    gap:40px
  }
  .feature-copy h2 {
    font-size:48px
  }
  .brand-note {
    gap:45px
  }
  .footer-main .hand {
    display:none
  }
}


@media(max-width:700px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    height:auto;
    min-height:116px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:15px;
    padding:19px 0
  }
  .wordmark {
    font-size:26px
  }
  .brand-dot {
    font-size:26px
  }
  .site-header nav {
    gap:26px;
    font-size:13px
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:40px;
    padding-bottom:24px;
    gap:0
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:1.8px;
    margin-bottom:22px
  }
  .hero h1 {
    font-size:clamp(45px,11.6vw,72px);
    letter-spacing:-2.7px;
    line-height:1.08
  }
  .intro {
    font-size:16px;
    margin:24px 0
  }
  .button {
    min-height:50px
  }
  .hero-whisper {
    display:inline-block;
    margin:0 0 0 16px;
    font-size:22px;
    max-width:75px
  }
  .opening-scene {
    height:450px;
    margin-top:20px;
    max-width:440px;
    width:100%;
    align-self:center
  }
  .scene-note {
    top:10px;
    right:10px;
    font-size:23px
  }
  .hero-cozy {
    width:58%;
    top:83px;
    left:3%
  }
  .hero-sudoku {
    width:43%;
    top:207px;
    right:3%
  }
  .scene-art {
    bottom:12px;
    width:180px;
    height:155px
  }
  .scene-caption {
    bottom:0;
    font-size:8px;
    letter-spacing:1px
  }
  .pause-line {
    font-size:10px;
    gap:12px;
    letter-spacing:0
  }
  .pause-line span:last-child {
    display:none
  }
  .collection-heading {
    display:block;
    padding-top:0;
    padding-bottom:25px
  }
  .collection-heading .hand {
    font-size:23px;
    margin-top:12px;
    max-width:100%
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:18px;
    padding-top:37px;
    padding-bottom:50px
  }
  .feature-art {
    padding-bottom:20px
  }
  .edition {
    margin-bottom:26px
  }
  .feature-cover {
    width:70%;
    max-width:290px
  }
  .feature-copy {
    max-width:none;
    padding:15px 5px 0
  }
  .feature-copy h2 {
    font-size:47px
  }
  .description {
    font-size:16px
  }
  .specs {
    gap:14px
  }
  .specs span+span:before {
    margin-right:14px
  }
  .sudoku-feature .feature-art {
    order:0
  }
  .sudoku-feature .feature-copy {
    margin-left:0;
    order:1
  }
  .sudoku-feature .feature-cover {
    max-width:255px;
    width:65%
  }
  .feature-note {
    font-size:23px
  }
  .brand-note {
    grid-template-columns:1fr;
    gap:20px;
    padding:54px 0 50px
  }
  .note-art {
    height:145px;
    max-width:260px;
    margin:auto
  }
  .brand-note h2 {
    font-size:46px
  }
  .brand-note p:not(.eyebrow):not(.signoff) {
    font-size:16px
  }
  .brand-note .eyebrow {
    margin-bottom:18px
  }
  .footer-main {
    align-items:flex-start;
    flex-direction:column;
    gap:22px
  }
  .footer-bottom {
    flex-wrap:wrap;
    margin-top:30px;
    font-size:10px
  }
  .footer-bottom span:nth-child(2) {
    display:none
  }
  .footer-bottom a {
    margin-left:auto
  }
  .preview-grid {
    grid-template-columns:1fr 1fr
  }
  .preview-grid img {
    height:220px
  }
}


@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}


.note-art {
  background-image:url('assets/loose-ink-doodles.webp');
  background-size:357.2% auto;
  background-position:100% 24%;
  width:270px;
  height:230px;
  margin:auto;
  transition:transform .5s
}

.note-art:hover {
  transform:translateX(12px) rotate(-2deg)
}

.footer-main:after {
  content:'';
  display:block;
  width:88px;
  height:62px;
  background:url('assets/snail-handdrawn.svg') center / contain no-repeat;
  transform:rotate(4deg)
}


@media(max-width:700px) {
  .note-art {
    width:190px;
    height:145px
  }
  .footer-main {
    position:relative;
    padding-right:70px
  }
  .footer-main:after {
    position:absolute;
    right:0;
    top:-15px
  }
  .footer-main .wordmark {
    font-size:24px
  }
}


.placeholder-label,.placeholder-bottom,.edition {
  font-size:12px
}

.scene-caption {
  font-size:12px;
  letter-spacing:.7px
}

.hero .placeholder-label {
  font-size:11px;
  letter-spacing:.7px
}

.hero .placeholder-bottom {
  font-size:11px
}

.scene-caption {
  bottom:-20px
}

.opening-scene {
  margin-bottom:15px
}


@media(max-width:700px) {
  .hero .placeholder-label,.hero .placeholder-bottom {
    font-size:10px
  }
  .scene-caption {
    font-size:10px;
    bottom:-6px
  }
}


/* LOCAL FONT STUDY — pending user approval, do not push. */
@font-face {
  font-family:'Slow Little Letters';
  src:url('assets/slow-little-letters.woff2?v=2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0061-007A,U+0020-0021,U+0027,U+002C,U+002E,U+003F,U+2018-2019
}

.wordmark,.feature-copy h2,.brand-note h2,.hand {
  font-family:'Slow Little Handwriting',cursive!important;
  text-transform:lowercase;
  font-weight:400;
  font-style:normal;
  letter-spacing:0
}

.wordmark {
  font-size:27px;
  letter-spacing:.2px
}

.brand-note h2 em {
  font-style:normal
}

.hand {
  font-size:23px;
  line-height:1.6
}

.hero-whisper {
  font-size:21px
}

.feature-copy h2 {
  font-size:44px;
  line-height:1.45
}

.brand-note h2 {
  font-size:41px;
  line-height:1.45
}

.hero {
  min-height:750px
}

.feature-note,.book-annotation {
  font-size:22px
}

.brand-note .signoff {
  font-size:23px
}


@media(max-width:1050px) {
  .wordmark {
    font-size:23px
  }
  .feature-copy h2 {
    font-size:38px
  }
}


@media(max-width:700px) {
  .wordmark {
    font-size:25px
  }
  .hero-whisper {
    font-size:19px
  }
  .feature-copy h2 {
    font-size:38px
  }
  .brand-note h2 {
    font-size:35px
  }
  .collection-heading .hand {
    font-size:21px
  }
  .scene-note {
    font-size:20px
  }
  .footer-main .wordmark {
    font-size:22px
  }
}


/* Local refinement: quieter supporting type; title and logo sizes unchanged. */
.site-header nav {
  font-size:12.5px
}

.intro,.description,.brand-note p:not(.eyebrow):not(.signoff) {
  font-size:15px
}

.button {
  font-size:12.5px
}

.eyebrow,.specs,.pause-line,.edition {
  font-size:11px
}

.placeholder-label,.placeholder-bottom {
  font-size:11px
}

.hero .placeholder-label,.hero .placeholder-bottom {
  font-size:10px
}

.scene-caption {
  font-size:11px
}

.instagram {
  font-size:16px
}

.footer-bottom {
  font-size:14px
}

.hand,.collection-heading .hand,.brand-note .signoff,.footer-main .hand {
  font-size:19px
}

.hero-whisper,.feature-note,.book-annotation {
  font-size:18px;
  color: var(--rust);
}


@media(max-width:700px) {
  .site-header nav {
    font-size:12px
  }
  .intro,.description,.brand-note p:not(.eyebrow):not(.signoff) {
    font-size:14.5px
  }
  .eyebrow,.pause-line,.footer-bottom {
    font-size:9px
  }
  .hero .placeholder-label,.hero .placeholder-bottom,.scene-caption {
    font-size:9px
  }
  .hand,.collection-heading .hand,.brand-note .signoff,.footer-main .hand {
    font-size:18px
  }
  .hero-whisper,.feature-note,.book-annotation,.scene-note {
    font-size:14px
  }
}


/* Local artwork study: studio cup and sparse pen doodles. */
.brand-cup {
  display:inline-block;
  width:55px;
  height:46px;
  vertical-align:middle;
  margin-left:8px;
  background:url('assets/studio-cup.webp') center / 145% auto no-repeat
}

.note-art {
  background-size:357.2% auto;
  background-position:100% 12%;
  width:230px;
  height:170px
}

.footer-main:after {
  background-size:contain;
  background-position:center
}


@media(max-width:700px) {
  .brand-cup {
    width:47px;
    height:40px;
    margin-left:6px
  }
  .note-art {
    width:190px;
    height:145px
  }
}


/* Local logo correction: full outline and steam, smaller optical alignment. */
.wordmark {
  display:inline-flex;
  align-items:center;
  gap:6px
}

.brand-cup {
  width:40px;
  height:40px;
  flex:0 0 40px;
  margin-left:0;
  background:url('assets/studio-cup-v2.webp') center / contain no-repeat;
  transform:translateY(-4px)
}

.note-art {
  background:url('assets/snail-handdrawn.svg') center / contain no-repeat;
  width:240px;
  height:190px
}


@media(max-width:700px) {
  .brand-cup {
    width:36px;
    height:36px;
    flex-basis:36px;
    margin-left:0
  }
  .note-art {
    width:210px;
    height:155px
  }
}


/* Keep navigation visible without removing the header from document flow. */
.header-shell {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--paper)
}

html {
  scroll-padding-top:144px
}


@media(max-width:700px) {
  html {
    scroll-padding-top:156px
  }
}


/* Cup-only header home link, aligned with the left content edge. */
.site-header .wordmark {
  justify-content:flex-start;
  min-width:44px;
  min-height:44px;
  gap:0
}

.site-header .brand-cup {
  transform:none
}

/* Compact sticky navigation on desktop and phones. */
.site-header {
  height:72px;
  min-height:72px;
  padding-top:0;
  padding-bottom:0
}

html {
  scroll-padding-top:96px
}


@media(max-width:700px) {
  .site-header {
    height:64px;
    min-height:64px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px
  }
  .site-header nav {
    gap:18px
  }
  html {
    scroll-padding-top:88px
  }
}



@media(max-width:360px) {
  .site-header nav {
    gap:12px
  }
}


/* Local divider study — awaiting approval, do not push. */
:root {
  --ink-divider:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%2210%22%20viewBox%3D%220%200%201200%2010%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%205.5%20C54%203.2%2093%206.4%20151%204.8%20S239%203.8%20302%205.5%20S389%206.8%20457%204.5%20S547%203.4%20609%205.2%20S702%206.2%20766%204.7%20S861%203.5%20929%205.4%20S1045%206.2%201101%204.9%20S1168%203.9%201198%205%22%20fill%3D%22none%22%20stroke%3D%22%23747662%22%20stroke-opacity%3D%22.6%22%20stroke-width%3D%221.15%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M91%205.3%20Q186%203.9%20257%205%20M741%205.6%20Q815%204.2%20870%204.8%20M1072%205.7%20L1146%204.5%22%20fill%3D%22none%22%20stroke%3D%22%23747662%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%22.65%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")
}

.site-header,.pause-line,.specs,.footer-bottom {
  position:relative;
  border-top:0;
  border-bottom:0
}

.site-header:after,.pause-line:before,.pause-line:after,.specs:before,.footer-bottom:before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:10px;
  background:var(--ink-divider) center / 100% 10px no-repeat;
  pointer-events:none
}

.site-header:after,.pause-line:after {
  bottom:-5px
}

.pause-line:before,.specs:before,.footer-bottom:before {
  top:-5px
}

.pause-line:after {
  transform:scaleX(-1)
}

.specs:before {
  opacity:.65;
  transform:scaleY(-1)
}

.footer-bottom:before {
  opacity:.8;
  transform:scaleX(-1)
}

/* Local design refinement — pending user approval. */
.site-header nav {
  font-size:15px
}

.book-feature,.site-footer {
  position:relative;
  border-radius:0
}

.cozy-feature {
  --section-paper:var(--sage)
}

.sudoku-feature {
  --section-paper:var(--butter)
}

.site-footer {
  --section-paper:#e9d7ce
}

.book-feature:before,.site-footer:before,.sudoku-feature:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:24px;
  top:-12px;
  pointer-events:none;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2012%20C48%208%2078%2015%20139%2011%20S224%206%20298%2012%20S404%2015%20465%209%20S560%2013%20636%2010%20S732%205%20807%2011%20S913%2016%20982%2010%20S1098%2014%201200%209%20L1200%2024%20L0%2024Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center / 100% 24px no-repeat
}

.book-feature:before,.sudoku-feature:after {
  background:var(--section-paper)
}

.sudoku-feature:before {
  transform:scaleX(-1)
}

.site-footer:before {
  transform:scaleX(-1);
  height:20px;
  top:-10px;
  mask-size:100% 20px
}

.sudoku-feature:after {
  top:auto;
  bottom:-12px;
  transform:rotate(180deg)
}

.button {
  background:var(--rust);
  border:0;
  border-radius:48% 44% 46% 42% / 22% 35% 25% 32%;
  padding:14px 27px;
  transition:transform .22s ease,background-color .22s ease,border-radius .3s ease,box-shadow .22s ease
}

.button span {
  transition:transform .22s ease
}

.button:hover {
  background:var(--rust);
  border-radius:42% 49% 41% 50% / 34% 24% 36% 25%;
  transform:translateY(-3px) rotate(-1deg);
  box-shadow:0 5px 0 #91564020
}

.button:hover span {
  transform:translate(3px,-2px)
}

.button:active {
  transform:translateY(1px) rotate(.5deg);
  box-shadow:none
}

/* Frame the supplied book photos, preserving their original pixels and proportions. */
.book-cover.has-art.photo {
  aspect-ratio:407 / 419;
  overflow:hidden;
  border-radius:2px 11px 4px 2px;
  box-shadow:3px 5px 0 #363d2912,6px 12px 18px #363d2920
}

.book-cover.has-art.photo img {
  position:absolute;
  width:124.57%;
  height:auto;
  max-width:none;
  left:-13.27%;
  top:-10.98%;
  object-fit:contain
}

.book-cover.has-art.photo.sudoku {
  aspect-ratio:408 / 420
}

.book-cover.has-art.photo.sudoku img {
  width:124.51%;
  left:-12.99%;
  top:-10.95%
}


@media(max-width:700px) {
  .site-header nav {
    font-size:14px;
    gap:14px
  }
}



@media(max-width:360px) {
  .site-header nav {
    font-size:13px;
    gap:10px
  }
}

.button {
  border-radius:44px 38px 42px 35px / 30px 26px 29px 25px
}

.button:hover {
  border-radius:37px 45px 35px 43px / 26px 31px 25px 30px
}


@media(max-width:700px) {
  .hero-whisper {
    display:block;
    max-width:none;
    margin:16px 0 0 28px
  }
}


/* Local refinement: fully curved buttons and clean photo edges. */
.button {
  border-radius:48% 52% 47% 53% / 52% 48% 52% 48%;
  padding:16px 32px
}

.button:hover {
  border-radius:51% 49% 53% 47% / 48% 52% 48% 52%
}

.book-cover.has-art.photo {
  aspect-ratio:398 / 410;
  box-shadow:none;
  border:0;
  border-radius:3px 9px 4px 3px
}

.book-cover.has-art.photo img {
  width:127.39%;
  left:-14.57%;
  top:-11.95%;
  height:auto
}

.book-cover.has-art.photo.sudoku {
  aspect-ratio:397 / 410
}

.book-cover.has-art.photo.sudoku img {
  width:127.96%;
  left:-14.61%;
  top:-12.2%
}

/* Local button revision: smooth, wide silhouette based on the user's screenshot. */
.button,.button:hover {
  position:relative;
  background:var(--rust);
  border:0;
  border-radius:48% 52% 47% 53% / 50% 50% 50% 50%;
  box-shadow:none;
  font-size:16px;
  font-weight:500;
  line-height:1.4;
  min-height:58px;
  min-width:230px;
  padding:18px 36px;
  gap:0;
  text-align:center;
  filter:none
}

.button:before {
  content:none
}

.button:hover {
  transform:translateY(-2px);
  background:var(--rust)
}

.button:active {
  transform:translateY(1px)
}


@media(max-width:700px) {
  .button,.button:hover {
    font-size:16px;
    min-width:220px;
    padding:17px 32px
  }
}


/* User-selected button silhouette. */
.button,.button:hover {
  border-radius:25% 36% 31% 41% / 47% 48% 53% 55%
}

/* Button #2: silhouette traced from the user's reference, not approximated with radii. */
.button,.button:hover {
  isolation:isolate;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  min-width:230px;
  min-height:0;
  aspect-ratio:705 / 230;
  padding:20px 32px
}

.button:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--rust);
  mask:url('assets/button-two.svg') center / 100% 100% no-repeat;
  pointer-events:none
}

.button:focus-visible {
  outline-offset:5px
}


@media(max-width:700px) {
  .button,.button:hover {
    min-width:220px;
    min-height:0;
    padding:19px 30px
  }
}


/* Gentle, one-shot movement that preserves the approved button outline. */
.button,.button:hover {
  transition:transform .25s ease,filter .25s ease
}

.button:before {
  transform-origin:50% 55%;
  transition:transform .2s ease
}


@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .button:hover {
    transform:translateY(-3px);
    filter:drop-shadow(0 5px 3px #91564022)
  }
  .button:hover:before {
    animation:button-soft-settle .7s ease-out both
  }
}


@keyframes button-soft-settle {
  0% {
    transform:scale(1,1) rotate(0)
  }
  28% {
    transform:scale(1.04,.95) rotate(-.7deg)
  }
  58% {
    transform:scale(.99,1.04) rotate(.4deg)
  }
  80% {
    transform:scale(1.015,.985) rotate(-.2deg)
  }
  100% {
    transform:scale(1,1) rotate(0)
  }
}

.button:active {
  transform:translateY(1px) scale(.97);
  filter:none
}

.button:active:before {
  animation:none;
  transform:scale(1.02,.96)
}


@media(prefers-reduced-motion:reduce) {
  .button:hover,.button:active,.button:active:before {
    transform:none;
    filter:none
  }
  .button:hover:before {
    animation:none
  }
}


/* Keep the three intentional headline lines. */
.hero h1>span {
  display:block;
  white-space:nowrap
}

.hero h1 em {
  white-space:nowrap
}

/* Preserve the supplied photographs; add a slim paper block beneath each cover. */
.book-cover.has-art.photo {
  box-shadow:1px 1px 0 #eae4d4,2px 2px 0 #cfc7b5,3px 3px 0 #faf6e9, 4px 4px 0 #d9d1bf,5px 5px 0 #f3eddf,6px 6px 0 #ccc3af, 8px 10px 8px #51473518,13px 22px 25px #51473526;
}

.book-cover.has-art.photo:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 3px 0 3px #fff6,inset 7px 0 5px #51473518,inset -1px 0 1px #fff5
}

.hero-book,.feature-cover {
  perspective:1000px
}

.book-cover {
  transition:transform .55s ease,box-shadow .55s ease;
  transform-origin:20% 60%
}

.feature-cover {
  transition:transform .55s ease
}


@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .hero-book:hover .book-cover,.hero-book:focus-visible .book-cover {
    transform:rotateY(-7deg) rotateX(3deg)
  }
  .feature-cover:hover {
    transform:rotate(-2deg) translateY(-7px)
  }
  .sudoku-feature .feature-cover:hover {
    transform:rotate(2deg) translateY(-7px)
  }
  .feature-cover:hover .book-cover {
    transform:rotateY(-7deg) rotateX(3deg)
  }
  .wordmark:hover .brand-cup {
    animation:cup-hello .8s ease-in-out
  }
  .note-art:hover {
    animation:snail-stroll 1.8s ease-in-out
  }
}



@media(prefers-reduced-motion:no-preference) {
  .arrived {
    animation:quiet-arrival 1.1s ease-out both
  }
  .note-art.arrived {
    animation:snail-stroll 1.8s ease-in-out
  }
}


@keyframes quiet-arrival {
  from {
    opacity:.35;
    translate:0 18px
  }
  to {
    opacity:1;
    translate:0 0
  }
}

@keyframes cup-hello {
  0%,100% {
    rotate:0deg
  }
  30% {
    rotate:-5deg
  }
  65% {
    rotate:3deg
  }
  85% {
    rotate:-1deg
  }
}

@keyframes snail-stroll {
  0%,100% {
    translate:0 0;
    rotate:0deg
  }
  35% {
    translate:-7px -2px;
    rotate:-2deg
  }
  70% {
    translate:-12px 0;
    rotate:1deg
  }
}

/* Slow, staggered movement for the books and illustrated objects. */

@media(prefers-reduced-motion:no-preference) {
  .book-cover.has-art {
    animation:book-drift 7s ease-in-out infinite
  }
  .book-cover.has-art.sudoku {
    animation-duration:8.5s;
    animation-delay:-3s
  }
  .feature-cover .book-cover.has-art {
    animation-delay:-2s
  }
  .note-art,.note-art.arrived,.note-art:hover {
    animation:snail-wander 11s ease-in-out infinite
  }
  .brand-cup,.wordmark:hover .brand-cup {
    animation:illustration-sway 7.5s ease-in-out infinite;
    animation-delay:-2s
  }
  .preview-grid img {
    animation:book-drift 8s ease-in-out infinite
  }
  .preview-grid img:nth-child(even) {
    animation-delay:-4s
  }
}

@keyframes book-drift {
  0%,100% {
    translate:0 0;
    rotate:-.35deg
  }
  50% {
    translate:0 -6px;
    rotate:.35deg
  }
}

@keyframes illustration-sway {
  0%,100% {
    translate:0 0;
    rotate:-1deg
  }
  50% {
    translate:0 -3px;
    rotate:1deg
  }
}

@keyframes snail-wander {
  0%,100% {
    translate:0 0;
    rotate:-.5deg
  }
  50% {
    translate:-8px -2px;
    rotate:.5deg
  }
}

/* Individually layered still-life objects, retaining the original drawing. */
/* A restrained paperback edge and contact shadow instead of stacked outlines. */
.book-cover.has-art.photo {
  box-shadow:2px 3px 0 #e8e1d2,3px 4px 0 #c8bfad,4px 6px 4px #51473520,9px 16px 19px #51473529;
  border-radius:1px 5px 3px 1px
}

.book-cover.has-art.photo:after {
  box-shadow:inset 2px 0 2px #fff3,inset 5px 0 4px #51473512
}

/* Website-only interior-page artwork: a quiet framed page, not the retail cover. */
.book-cover.has-art:not(.photo) {
  overflow:hidden;
  border-radius:2px 9px 4px 3px;
  background:#f8f4e9;
  box-shadow:4px 7px 12px #363d2920,9px 16px 24px #363d2915
}

.book-cover.has-art:not(.photo) img {
  width:100%;
  height:100%;
  object-fit:contain
}

/* Reference-led hero: quiet editorial bookshelf on the existing paper background. */
.hero-library {
  min-height:calc(100vh - 72px);
  height:auto;
  display:grid;
  grid-template-columns:minmax(330px,.78fr) minmax(650px,1.55fr);
  gap:22px;
  align-items:start;
  padding-top:52px;
  padding-bottom:38px;
  overflow:hidden
}

.hero-lead {
  position:relative;
  z-index:3;
  align-self:start;
  padding-bottom:88px
}

.hero-library .eyebrow {
  display:none
}

.hero-library h1 {
  font-family:Georgia,serif;
  font-size:clamp(66px,6.3vw,103px);
  line-height:.94;
  letter-spacing:-5.5px;
  font-weight:400
}

.hero-library h1 span {
  display:block;
  white-space:nowrap
}

.compact-title,.compact-intro {
  display:none!important
}

.hero-script {
  font-family:'Slow Little Handwriting',cursive!important;
  font-size:clamp(24px,2.35vw,38px)!important;
  line-height:1.42!important;
  letter-spacing:.2px!important;
  margin:26px 0 0 9px;
  transform:rotate(-3deg);
  color:#32342e
}

.hero-table {
  height:620px;
  position:relative;
  align-self:start
}

.table-line {
  position:absolute;
  left:-265px;
  right:0;
  top:286px;
  width:calc(100% + 275px);
  height:64px;
  max-width:none;
  object-fit:fill;
  overflow:visible;
  z-index:0
}

.table-line path {
  fill:none;
  stroke:#4d5048;
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round
}

.table-line .table-front,.table-line .table-back {
  stroke:#34372f;
  stroke-width:1.15
}

.table-line .table-front-echo,.table-line .table-back-echo {
  stroke:#575a50;
  stroke-width:.48;
  opacity:.32
}

.hero-lamp {
  position:absolute;
  left:-108px;
  top:164px;
  width:146px;
  height:177px;
  color:#3c3f37;
  z-index:1;
  transform:rotate(-1deg)
}

.hero-lamp svg {
  width:100%;
  height:100%
}

.hero-lamp path {
  stroke-width:2.1
}

.lamp-note {
  position:absolute;
  left:25px;
  top:326px;
  font-size:19px!important;
  line-height:1.03!important;
  transform:rotate(12deg);
  z-index:4
}

.lamp-note:after {
  content:'';
  position:absolute;
  width:34px;
  height:1px;
  background:#53564d;
  right:15px;
  bottom:-16px;
  transform:rotate(-53deg)
}

.hero-product {
  position:absolute;
  top:54px;
  z-index:2;
  width:39%;
  margin:0
}

.hero-product-cozy {
  left:12%
}

.hero-product-sudoku {
  right:1%;
  top:112px;
  width:33%
}

.hero-product-cover {
  display:block;
  position:relative;
  z-index:2;
  margin:auto;
  width:100%;
  transition:transform .3s ease
}

.hero-yellow-backdrop {display:none}
.hero-quiet-button {display:none}

.sudoku-botanical {
  position:absolute;
  z-index:1;
  right:-69%;
  top:-32%;
  width:78%;
  height:auto;
  pointer-events:none
}

.hero-product-copy {
  position:relative;
  z-index:3
}

.hero-product .book-cover {
  transform:none!important;
  animation:none!important;
  box-shadow:0 14px 23px #504a3c18,3px 4px 0 #d5cec0!important;
  border-radius:0!important
}

.hero-product-cozy .book-cover {
  aspect-ratio:1
}

.hero-product-sudoku .book-cover {
  aspect-ratio:1
}

.hero-product-cover:hover {
  transform:translateY(-5px)
}

.hero-product-copy {
  text-align:center;
  padding-top:24px;
  font-family:Georgia,serif;
  color:#2f312c
}

.hero-product-copy h2 {
  font:400 17px/1.3 Georgia,serif;
  letter-spacing:2px;
  text-transform:uppercase;
  margin:0
}

.hero-product-copy p {
  font:400 15px/1.45 Georgia,serif;
  letter-spacing:.3px;
  margin-top:5px
}

.hero-product-copy p:nth-of-type(1) {
  display:none
}

.hero-product-copy p span {
  padding:0 5px
}

.hero-shop {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  width:78%;
  min-height:53px;
  margin:20px auto 0;
  border:1.4px solid #35382e;
  border-radius:49% 47% 51% 45% / 48% 52% 45% 55%;
  font:400 16px Georgia,serif;
  transition:transform .2s,background .2s
}

.hero-shop:hover {
  transform:translateY(-2px);
  background:#ffffff38
}

.hero-shop span {
  font-size:22px;
  line-height:1
}

.product-note {
  display:none
}


@media(max-width:1100px) {
  .hero-library {
    grid-template-columns:1fr;
    display:block;
    min-height:auto;
    padding-top:54px;
    padding-bottom:70px;
    overflow:hidden
  }
  .hero-lead {
    padding:0;
    max-width:760px
  }
  .hero-library .eyebrow {
    display:block;
    margin-bottom:18px
  }
  .desktop-title,.desktop-script {
    display:none!important
  }
  .compact-title,.compact-intro {
    display:block!important;
    font-size: 64px;
  }
  .hero-library h1 {
    font-size:clamp(60px,8.9vw,88px);
    line-height:.95;
    letter-spacing:-4.5px
  }
  .hero-intro {
    font-family:Georgia,serif;
    font-size:18px;
    line-height:1.25;
    margin-top:30px
  }
  .hero-table {
    height:590px;
    margin-top:34px;
    width:100%
  }
  .table-line,.hero-lamp,.lamp-note,.sudoku-botanical {
    display:none
  }
  .hero-product {
    top:34px;
    width:47%;
    position:absolute
  }
  .hero-product-cozy {
    left:10%;
    width:43%
  }
  .hero-product-sudoku {
    right:8%;
    left:auto;
    top:108px;
    width:32%
  }
  .hero-product-copy {
    text-align:left;
    padding-top:20px
  }
  .hero-product-copy h2 {
    font-size:16px;
    letter-spacing:1.7px
  }
  .hero-product-copy p {
    font-size:13px;
    letter-spacing:1.1px
  }
  .hero-product-copy p:nth-of-type(1) {
    display:block;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:2px
  }
  .hero-shop {
    width:78%;
    margin:18px 0 0;
    min-height:47px;
    font-size:14px;
    gap:17px
  }
  .product-note {
    display:block;
    position:absolute;
    font-size:22px!important;
    line-height:1.05!important;
    z-index:4;
    top:-16px;
    left:-55px;
    transform:rotate(-15deg);
    text-align:center
  }
  .hero-product-sudoku .product-note {
    left:auto;
    right:-15px;
    top:-54px;
    transform:rotate(10deg)
  }
  .product-note i {
    display:block;
    width:45px;
    height:28px;
    border-left:1.5px solid #34372e;
    border-bottom:1.5px solid #34372e;
    border-radius:0 0 0 70%;
    transform:rotate(-33deg);
    margin:4px 0 0 34px;
    position:relative
  }
  .product-note i:after {
    content:'';
    position:absolute;
    width:8px;
    height:8px;
    border-right:1.5px solid #34372e;
    border-bottom:1.5px solid #34372e;
    left:-5px;
    bottom:-2px;
    transform:rotate(31deg)
  }
  .hero-product-sudoku .product-note i {
    transform:scaleX(-1) rotate(-29deg);
    margin-left:2px
  }
}



@media(max-width:700px) {
  body {
    overflow-x:hidden
  }
  .site-header nav a:last-child {
    display:none
  }
  .hero-library {
    padding-top:40px;
    padding-bottom:60px
  }
  .hero-library h1 {
    font-size:clamp(36px,10.5vw,58px);
    line-height:1;
    letter-spacing:-2.2px
  }
  .hero-library h1 .compact-title {
    white-space:normal;
    font-size: 44px;
  }
  .hero-intro {
    font-size:16px;
    line-height:1.32;
    margin-top:20px
  }
  .hero-intro br {
    display:none
  }
  .hero-table {
    height:auto;
    margin-top:72px;
    display:grid;
    grid-template-columns:1.18fr .9fr;
    gap:30px 24px;
    align-items:start
  }
  .hero-product {
    position:relative;
    inset:auto!important;
    width:auto!important;
    min-width:0
  }
  .hero-product-sudoku {
    margin-top:64px
  }
  .hero-product-copy {
    padding-top:14px;
    min-width:0
  }
  .hero-product-copy h2 {
    font-size:12px;
    letter-spacing:1.25px
  }
  .hero-product-copy p {
    font-size:10px;
    letter-spacing:.4px;
    white-space:normal
  }
  .hero-product-copy p:nth-of-type(1) {
    font-size:8px;
    letter-spacing:1.2px
  }
  .hero-product-copy p span {
    padding:0 2px
  }
  .hero-shop {
    width:100%;
    min-height:42px;
    margin-top:14px;
    font-size:11px;
    gap:10px
  }
  .hero-shop span {
    font-size:16px
  }
  .product-note {
    font-size:17px!important;
    left:8px;
    top:-55px;
    transform:rotate(-14deg)
  }
  .hero-product-sudoku .product-note {
    right:6px;
    top:-55px
  }
  .product-note i {
    width:34px;
    height:22px;
    margin-left:22px
  }
}



@media(max-width:390px) {
  .site-header nav {
    font-size:11px;
    gap:10px
  }
  .hero-table {
    gap:22px 15px
  }
  .hero-library h1 {
    font-size:36px
  }
  .hero-intro {
    font-size:14px
  }
  .hero-product-copy p {
    font-size:9px
  }
  .hero-shop {
    font-size:10px
  }
}

/* Exact desktop composition from the approved hero reference. */

@media(min-width:1101px) {
  .hero-library {
    width:calc(100% - 80px);
    max-width:1590px;
    min-height:580px;
    height:calc(100vh - 72px);
    max-height:650px;
    grid-template-columns:38% 62%;
    gap:0;
    padding:100px 0 0;
    align-items:start
  }
  .hero-lead {
    padding:0 0 0 0;
    margin:0;
    align-self:start
  }
  .hero-library h1 {
    font-family:Georgia,serif;
    font-size:clamp(72px,5.65vw,91px);
    line-height:1.02;
    letter-spacing:-4.7px;
    color:#080908;
    margin:0
  }
  .hero-script {
    font-family:'Caveat',cursive!important;
    font-size:clamp(27px,2.15vw,35px)!important;
    line-height:1.36!important;
    margin:0 0 0 5px;
    transform:rotate(-3deg)
  }
  .hero-table {
    height:535px;
    margin:0;
    align-self:start;
    margin-top: 100px;
  }
  .table-line {
    left:-238px;
    top:286px;
    width:calc(100% + 250px);
    height:64px
  }
  .table-line path {
    stroke:#292b27;
    stroke-width:1.05
  }
  .hero-lamp {
    left:-90px;
    top:170px;
    width:142px;
    height:174px
  }
  .hero-lamp path {
    stroke-width:1.7
  }
  .lamp-note {
    left:28px;
    top:304px;
    font-family:'Caveat',cursive!important;
    font-size:18px!important;
    line-height:.9!important;
    transform:rotate(11deg)
  }
  .lamp-note:after {
    width:31px;
    right:11px;
    bottom:-17px
  }
  .hero-product {
    top:15px;
    width:38%;
    margin:0
  }
  .hero-product-cozy {
    left:9%;
    top:28px
  }
  .hero-product-sudoku {
    right:18%;
    top:74px;
    width:29%
  }
  .hero-product-cover {
    width:100%;
    margin:0
  }
  .design-cover {
    position:relative;
    display:flex;
    width:100%;
    aspect-ratio:1;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    color:#11120f;
    font-family:Georgia,serif;
    box-shadow:0 13px 20px #504b4018,4px 4px 0 #d4cec1;
    overflow:hidden
  }
  .design-cover-cozy {
    aspect-ratio:1.08;
    background:linear-gradient(100deg,#e2d7c4 0,#eee5d7 7%,#e9dfcf 48%,#ded2bf 100%);
    padding-top:62px
  }
  .design-cover-sudoku {
    background:linear-gradient(100deg,#aeb59e 0,#bec5ae 8%,#b5bca5 55%,#aeb59e 100%);
    padding-top:63px
  }
  .design-spine {
    position:absolute;
    left:9px;
    top:0;
    bottom:0;
    width:2px;
    background:#c8bead;
    box-shadow:6px 0 7px #80786613
  }
  .design-cover strong {
    font-weight:400;
    text-align:center;
    display:block
  }
  .design-cover-cozy strong {
    font-size:27px;
    line-height:1.18;
    letter-spacing:4px
  }
  .design-cover-sudoku strong {
    font-size:27px;
    line-height:.98
  }
  .design-cover i {
    display:block;
    width:25px;
    height:1px;
    background:#34362f;
    margin:21px auto 18px
  }
  .design-cover small {
    font-size:11px;
    line-height:1.6;
    letter-spacing:3px;
    text-align:center
  }
  .design-cover-sudoku small {
    font-size:17px;
    letter-spacing:.2px;
    line-height:1.2
  }
  .design-cover b {
    position:absolute;
    bottom:26px;
    font-size:8px;
    font-weight:400;
    letter-spacing:2.2px
  }
  .hero-product-copy {
    padding-top:25px;
    text-align:center
  }
  .hero-product-copy h2 {
    font-size:16px;
    line-height:1.2;
    letter-spacing:1.8px
  }
  .hero-product-copy p {
    font-size:14px;
    line-height:1.35;
    letter-spacing:.15px;
    margin-top:6px
  }
  .hero-shop {
    width:80%;
    min-height:54px;
    margin-top:20px;
    border-width:1px;
    font-size:16px;
    gap:25px
  }
  .hero-product-sudoku .hero-product-copy {
    padding-top:26px
  }
  .hero-product-sudoku .hero-shop {
    width:90%;
    margin-top:14px
  }
}


.visually-hidden {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}

.hero-script img {
  width:clamp(280px,22vw,348px);
  height:auto
}

.hero-lamp img {
  width:100%;
  height:100%;
  object-fit:contain
}

.lamp-note img {
  width:100%;
  height:100%;
  object-fit:contain
}

.lamp-note:after {
  content:none
}


@media(min-width:1101px) {
  .hero-lamp {
    width:178px;
    height:193px;
    left:-100px;
    top:164px
  }
  .lamp-note {
    display:block;
    width:106px;
    height:114px;
    left:25px;
    top:280px;
    transform:none
  }
}


/* Hero handwriting rebuilt from the user's supplied alphabet sheet. */
@font-face {
  font-family:'Slow Little Handwriting';
  src:url('assets/slow-little-handwriting-v2.woff2') format('woff2'),url('assets/slow-little-handwriting-v2.ttf') format('truetype');
  font-display:swap;
  font-style:normal;
  font-weight:400
}

.janerudoman-hand,.slow-little-handwriting,.hero-script,.lamp-note,.product-note {
  font-family:'Slow Little Handwriting',cursive!important;
  font-weight:400;
  font-style:normal
}

.hero-script {
  font-size:clamp(27px,2.15vw,35px)!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  width:max-content
}

.lamp-note {
  width:auto;
  height:auto;
  font-size:17px!important;
  line-height:.88!important;
  text-align:right;
  transform:rotate(8deg)
}

.hero-lamp img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

.hero-lamp:before {
  content:none
}

.hero-lamp img {
  position:relative;
  z-index:1
}


@media(min-width:1101px) {
  .hero-lamp {
    width:165px;
    height:184px;
    left:-92px;
    top:161px
  }
  .lamp-note {
    right:50px;
    top:-90px;
    width:auto;
    height:auto
  }
}



@media(max-width:1100px) {
  .product-note {
    width:auto;
    height:auto;
    font-size:21px!important;
    line-height:.92!important;
    text-align:center;
    transform:rotate(-12deg)
  }
  .hero-product-sudoku .product-note {
    width:auto;
    height:auto;
    transform:rotate(8deg)
  }
  .product-note i {
    display:block;
    width:45px;
    height:28px;
    border-left:1.5px solid #34372e;
    border-bottom:1.5px solid #34372e;
    border-radius:0 0 0 70%;
    transform:rotate(-33deg);
    margin:6px 0 0 34px;
    position:relative
  }
  .product-note i:after {
    content:'';
    position:absolute;
    width:8px;
    height:8px;
    border-right:1.5px solid #34372e;
    border-bottom:1.5px solid #34372e;
    left:-5px;
    bottom:-2px;
    transform:rotate(31deg)
  }
  .hero-product-sudoku .product-note i {
    transform:scaleX(-1) rotate(-29deg);
    margin-left:2px
  }
}



@media(max-width:520px) {
  .product-note {
    font-size:16px!important;
    left:-18px;
    top:-50px
  }
  .hero-product-sudoku .product-note {
    right:-13px;
    top:-50px
  }
  .product-note i {
    width:34px;
    height:22px;
    margin-left:22px
  }
}


/* Exact responsive composition from the approved phone/tablet reference. */

@media(max-width:1100px) {
  .hero-library {
    width:calc(100% - clamp(40px,14vw,100px));
    padding-top:12px;
    padding-bottom:30px;
    overflow:hidden
  }
  .hero-lead {
    max-width:none
  }
  .hero-table {
    position:relative;
    left:clamp(0px,2.4vw,17px);
    display:grid;
    width:76%;
    height:auto;
    grid-template-columns:minmax(0,1.36fr) minmax(0,1fr);
    gap:clamp(14px,6vw,42px);
    align-items:start;
    margin:70px auto 0
  }
  .hero-product,.hero-product-cozy,.hero-product-sudoku {
    position:relative;
    inset:auto;
    width:auto;
    margin:0;
    min-width:0
  }
  .hero-product-sudoku {
    margin-top:68px
  }
  .hero-product-cover {
    display:block;
    width:100%;
    margin:0
  }
  .design-cover {
    position:relative;
    display:flex;
    width:100%;
    aspect-ratio:1;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    color:#11120f;
    font-family:Georgia,serif;
    box-shadow:0 7px 12px #504b4015,3px 3px 0 #d4cec1;
    overflow:hidden
  }
  .design-cover-cozy {
    background:linear-gradient(100deg,#afb7a3 0,#c1c9b5 8%,#b8c0aa 58%,#aeb6a1 100%);
    padding-top:22%
  }
  .design-cover-sudoku {
    background:linear-gradient(100deg,#e1d6c4 0,#eee5d8 8%,#e8dece 58%,#ddd1be 100%);
    padding-top:20%
  }
  .design-spine {
    position:absolute;
    left:7px;
    top:0;
    bottom:0;
    width:1.5px;
    background:#939d89;
    box-shadow:5px 0 6px #77746712
  }
  .design-cover strong {
    font-weight:400;
    text-align:center;
    display:block
  }
  .design-cover-cozy strong {
    font-size:clamp(11px,2.5vw,18px);
    line-height:1.28;
    letter-spacing:clamp(1.3px,.42vw,3px)
  }
  .design-cover-sudoku strong {
    font-size:clamp(15px,3vw,22px);
    line-height:.95
  }
  .design-cover i {
    display:block;
    width:22px;
    height:1px;
    background:#34362f;
    margin:16px auto 17px
  }
  .design-cover small {
    font-size:clamp(7px,1.25vw,10px);
    line-height:1.55;
    letter-spacing:clamp(1px,.3vw,2.2px);
    text-align:center
  }
  .design-cover-sudoku small {
    font-size:clamp(8px,1.5vw,11px);
    letter-spacing:1.4px;
    line-height:1.2
  }
  .design-cover b {
    position:absolute;
    bottom:10%;
    font-size:clamp(5px,.75vw,7px);
    font-weight:400;
    letter-spacing:clamp(.8px,.22vw,1.7px);
    white-space:nowrap
  }
  .hero-product-copy {
    padding-top:18px;
    text-align:left;
    min-width:0
  }
  .hero-product-copy h2 {
    font-size:clamp(10px,2vw,15px);
    line-height:1.24;
    letter-spacing:1.5px
  }
  .hero-product-copy p {
    font-size:clamp(8px,1.55vw,11px);
    line-height:1.35;
    letter-spacing:.55px;
    margin-top:5px;
    white-space:normal
  }
  .hero-product-copy p:nth-of-type(1) {
    display:block;
    text-transform:uppercase;
    font-size:clamp(7px,1.25vw,9px);
    letter-spacing:1.5px
  }
  .hero-shop {
    width:78%;
    min-height:44px;
    margin:17px 0 0;
    border-width:1px;
    font-size:clamp(10px,1.7vw,13px);
    gap:14px
  }
  .hero-product-sudoku .hero-shop {
    width:92%
  }
  .product-note {
    display:block;
    position:absolute;
    z-index:5;
    width:96px;
    height:113px;
    top:-33px;
    left:clamp(-90px,calc(74px - 23vw),-64px);
    transform:none
  }
  .hero-product-sudoku .product-note {
    width:124px;
    height:95px;
    top:-84px;
    left:auto;
    right:-40px;
    transform:none
  }
  .product-note img {
    width:100%;
    height:100%;
    object-fit:contain
  }
  .product-note i {
    display:none
  }
}



@media(max-width:520px) {
  .hero-library {
    width:calc(100% - 40px);
    padding-top:36px
  }
  .hero-library h1 {
    font-size:clamp(36px,10.4vw,49px);
    letter-spacing:-2px
  }
  .hero-intro {
    font-size:14px
  }
  .hero-table {
    width:92%;
    margin-top:80px;
    gap:15px
  }
  .hero-product-sudoku {
    margin-top:52px
  }
  .product-note {
    width:72px;
    height:85px;
    left:-22px;
    top:-48px
  }
  .hero-product-sudoku .product-note {
    width:86px;
    height:66px;
    right:-18px;
    top:-50px
  }
  .hero-shop {
    width:100%;
    min-height:40px
  }
  .hero-product-sudoku .hero-shop {
    width:100%
  }
}


/* Keep live handwritten text above the earlier screenshot-image sizing rules. */

@media(max-width:1100px) {
  .product-note {
    width:auto;
    height:auto;
    font-size:21px!important;
    line-height:.92!important;
    text-align:center;
    transform:rotate(-12deg)
  }
  .hero-product-sudoku .product-note {
    width:auto;
    height:auto;
    transform:rotate(8deg)
  }
  .product-note i {
    display:block;
    width:45px;
    height:28px;
    border-left:1.5px solid #34372e;
    border-bottom:1.5px solid #34372e;
    border-radius:0 0 0 70%;
    transform:rotate(-33deg);
    margin:6px 0 0 34px;
    position:relative
  }
  .product-note i:after {
    content:'';
    position:absolute;
    width:8px;
    height:8px;
    border-right:1.5px solid #34372e;
    border-bottom:1.5px solid #34372e;
    left:-5px;
    bottom:-2px;
    transform:rotate(31deg)
  }
  .hero-product-sudoku .product-note i {
    transform:scaleX(-1) rotate(-29deg);
    margin-left:2px
  }
}



@media(max-width:520px) {
  .product-note {
    width:auto;
    height:auto;
    font-size:18px!important;
    left:-10px;
    top:-52px
  }
  .hero-product-sudoku .product-note {
    width:auto;
    height:auto;
    right:0;
    top:-50px
  }
  .product-note i {
    width:34px;
    height:22px;
    margin-left:22px
  }
}


/* Exact hand-drawn arrows extracted from the approved reference artwork. */

@media(max-width:1100px) {
  .product-note i {
    display:none!important
  }
  .product-note .product-note-arrow {
    display:block;
    width:45px;
    height:auto;
    max-width:none;
    margin:5px 0 0 29px;
    object-fit:contain
  }
  .hero-product-sudoku .product-note .product-note-arrow {
    width:42px;
    margin:4px 0 0 0
  }
}


@media(max-width:520px) {
  .product-note .product-note-arrow {
    width:36px;
    margin:4px 0 0 23px
  }
  .hero-product-sudoku .product-note .product-note-arrow {
    width:34px;
    margin-left:0
  }
}

.desktop-book-note {
  display:none;
  font-family:'Slow Little Handwriting',cursive;
  font-size:clamp(14px,2vw,17px);
  font-weight:400;
  font-style:normal;
  line-height:1.04;
  letter-spacing:0
}

/* Temporary blank covers only. Remove the body class to restore cover content. */
.temporary-blank-books .design-cover > :not(.design-spine), .temporary-blank-books .book-cover > * {
  visibility:hidden!important
}

.temporary-blank-books .book-cover {
  background:linear-gradient(100deg,#dfd4c1,#eee5d7 8%,#e7ddcd 58%,#dcd0bd);
  border:0;
  box-shadow:3px 4px 0 #363d2920,8px 12px 18px #363d2914
}

.temporary-blank-books .book-cover.sudoku {
  background:linear-gradient(100deg,#aeb59e,#bec5ae 8%,#b5bca5 55%,#aeb59e)
}

.temporary-blank-books .book-cover:before {
  content:'';
  position:absolute;
  left:3%;
  top:0;
  bottom:0;
  width:1.5px;
  background:#817b6638;
  box-shadow:5px 0 6px #77746712
}

/* Original pencil cup replaces the studio snail; footer has no snail. */
.note-art {
  width:240px;
  height:210px;
  background:url('assets/studio-cup-description.png') center / contain no-repeat
}

.footer-main:after {
  content:none!important;
  display:none!important
}


@media(max-width:700px) {
  .note-art {
    width:190px;
    height:175px
  }
  .footer-main {
    padding-right:0
  }
}


@media(min-width:1101px) {
  .desktop-book-note {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:9px;
    min-height:62px;
    margin:7px auto 0;
    color:#505148;
    font-family:'Slow Little Handwriting',cursive;
    font-size:16px;
    line-height:1.04;
    letter-spacing:0;
    transform:rotate(-3deg)
  }
  .desktop-book-note img {
    flex:0 0 auto;
    width:39px;
    height:51px;
    object-fit:contain
  }
  .desktop-book-note span {
    display:block;
    padding-top:15px;
    text-align:left;
    white-space:nowrap
  }
  .hero-product-sudoku .desktop-book-note {
    gap:7px;
    transform:rotate(2deg)
  }
  .hero-product-sudoku .desktop-book-note img {
    width:36px;
    height:53px
  }
  .hero-product-sudoku .desktop-book-note span {
    padding-top:16px
  }
}



/* Local floating-drawing preview. Original transparent artwork, no interaction. */
.floating-doodle {
  position:absolute;
  height:auto;
  max-width:none;
  pointer-events:none;
  user-select:none;
  opacity:.68;
  z-index:1;
  transform:rotate(var(--doodle-tilt,0deg));
}
.brand-note {position:relative}
.doodle-croissant {position:static;align-self:center;justify-self:center;width:255px;opacity:.88;--doodle-tilt:-7deg;--doodle-delay:-2s}
.doodle-logo {position:static;align-self:center;justify-self:center;width:min(360px,32vw);opacity:1;--doodle-tilt:-3deg}
@keyframes doodle-float {
  0%,100% {translate:0 0;rotate:-1deg}
  50% {translate:3px -7px;rotate:1deg}
}

@media(max-width:700px) {
  .doodle-logo {width:min(250px,68vw)}
}


@media(prefers-reduced-motion:no-preference) {
  .floating-doodle {animation:doodle-float 14s ease-in-out infinite;animation-delay:var(--doodle-delay,0s)}
}

@media(max-width:700px) {
  .doodle-croissant {width:180px}
}

@media(min-width:1101px) {
  .hero-table {isolation:isolate}
  .hero-yellow-backdrop {
    display:block;
    position:absolute;
    z-index:-1;
    left:-20%;
    top:-120px;
    width:120%;
    max-width:none;
    height:525px;
    pointer-events:none;
  }
  .hero-quiet-button {
    display:flex;
    align-items:center;
    justify-content:center;
    width:285px;
    max-width:92%;
    height:80px;
    aspect-ratio:auto;
    padding:16px 24px;
    margin-top:58px;
    margin-left: 10px;
    color:#fff;
    background:transparent;
    border-radius:0;
    font-family:inherit;
    font-size:18px;
    font-weight:400;
    text-decoration:none;
  }
  .hero-quiet-button:focus-visible {outline:2px solid #63682f;outline-offset:5px}
  /* The raster's horizontal surface is about 20px below its top at 64px high. */
  .hero-table {
    --table-line-top:286px;
    --table-surface-offset:20px;
    --book-table-overlap:6px;
  }
  .table-line {top:var(--table-line-top)}
  .hero-product-cozy,.hero-product-sudoku {
    top:calc(var(--table-line-top) + var(--table-surface-offset) + var(--book-table-overlap));
  }
  .hero-product-cover {
    position:absolute;
    bottom:100%;
    left:0;
    margin:0;
  }
  .hero-product-cover:hover {transform:none}
  .hero-product-sudoku .sudoku-botanical {
    top:auto;
    bottom:100%;
  }
  .hero-product-sudoku .hero-pencil-holder {
    width:60%;
    max-width:none;
    right:-44%;
    transform:translateY(17.5%);
  }
}

@keyframes hero-book-drift {
  0%,100% {translate:0 0;rotate:-.7deg}
  50% {translate:0 -12px;rotate:.7deg}
}
@media(prefers-reduced-motion:no-preference) {
  .hero-product-cover,.hero-product-cover:hover {
    transform:none;
    transform-origin:center;
    animation:hero-book-drift 7s ease-in-out infinite;
  }
  .hero-product-sudoku .hero-product-cover {animation-duration:8.5s;animation-delay:-3s}
}
@media(prefers-reduced-motion:reduce) {
  .hero-product-cover,.hero-quiet-button {animation:none!important;transform:none!important}
}

@media(min-width:1101px) {
  .hero-library {
    grid-template-columns:38% 62%;
    width:calc(100% - 40px);
    max-width:none;
    margin-left:40px;
    margin-right:0
  }
  .hero-photo {
    height:535px;
    margin-top:0;
    border-radius:2px
  }
  .hero-photo .lamp-note {
    display:block;
    position:absolute;
    right:4%;
    top:0%;
    text-align:right
  }
  .hero-photo .product-note {
    display:block;
    position:absolute;
    right:33%;
    top:30%;
    left:auto;
    text-align:center;
    transform:rotate(8deg)
  }
  .hero-photo .desktop-book-note {
    display:flex;
    position:absolute;
    left:44%;
    bottom:6%;
    align-items:flex-start
  }
}

@media(max-width:1100px) {
  .hero-library {
    width:calc(100% - 40px);
    margin-left:40px;
    margin-right:0
  }
  .hero-photo {
    position:relative;
    width:100%;
    height:clamp(430px,64vw,620px);
    margin-top:46px
  }
  .hero-photo .lamp-note {display:block;position:absolute;left:7%;bottom:9%;color:#fff}
  .hero-photo .product-note {display:block;position:absolute;right:16%;top:4%;color:#fff}
  .hero-photo .desktop-book-note {display:flex;position:absolute;right:24%;bottom:8%;color:#fff}
  .hero-photo .desktop-book-note img {margin-top: -20px;}
}

@media(max-width:700px) {
  .hero-library {
    width:calc(100% - 20px);
    margin-left:20px;
    margin-right:0
  }
  .hero-photo {
    height:118vw;
    min-height:430px;
    max-height:650px;
    margin-top:42px
  }
  .hero-photo .lamp-note {left:7%;bottom:8%;right:auto;top:auto;text-align:left}
  .hero-photo .product-note {right:72%;top:4%;bottom:auto;left:auto}
  .hero-photo .desktop-book-note {right:6%;bottom:0%;left:auto;top:auto}
  .hero-product-cozy .product-note .product-note-arrow {
    transform:rotate(-90deg) scaleX(-1);
    transform-origin:center;
  }
  .hero-table {margin-top:130px}
  .hero-product .product-note,
  .hero-product-sudoku .product-note {
    top:auto;
    bottom:calc(100% + 26px);
    width:auto;
    height:auto;
    transform-origin:center bottom;
  }
}

.hero-library {
  display:flex!important;
  flex-direction:column;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  gap:0!important
}
.hero-photo {order:1;width:100vw!important;height:auto!important;min-height:0;max-height:none!important;margin:0!important;border-radius:0!important}
.hero-lead {order:2;width:calc(100% - 112px)!important;max-width:1296px!important;margin:58px auto 72px!important;padding:0!important}
.hero-lead .compact-intro.hand {width:max-content;max-width:100%;font-family:'Slow Little Handwriting','Bradley Hand','Segoe Print',cursive!important;font-size:clamp(17px,1.8vw,23px)!important;line-height:1.15!important}
@media(max-width:700px) {.hero-photo {height:auto!important;min-height:0}.hero-lead {width:calc(100% - 40px)!important;margin:38px auto 54px!important}}


.hero-lead {
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(320px,1.5fr);
  align-items:start;
  gap:clamp(50px,8vw,140px)
}
.hero-lead h1 {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(38px,4.3vw,64px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-2.5px
}
.hero-actions .hero-script {font-size:clamp(17px,1.55vw,21px)!important;line-height:1.18!important}
.hero-action-links {display:flex;align-items:center;gap:42px;margin-top:28px}
.hero-action-links .hero-quiet-button {display:flex;margin:0}
.hero-look-inside {white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:7px;text-decoration:none}
@media(max-width:900px) {
  .hero-lead {grid-template-columns:1fr;gap:26px}
  .hero-lead h1 {font-size:clamp(34px,8vw,52px);letter-spacing:-1.8px}
  .hero-actions {padding-top:0}
  .hero-action-links {gap:25px;margin-top:24px;flex-wrap:wrap}
}


body,.header-shell,.book-feature {
  background-image:
    linear-gradient(rgba(65,70,59,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(65,70,59,.065) 1px,transparent 1px);
  background-size:48px 48px;
  background-position:0 0;
  background-attachment:fixed
}


.inside-gallery {
  padding:clamp(76px,8vw,126px) 0 clamp(88px,10vw,150px);
  scroll-margin-top:30px
}

.inside-heading {
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(300px,1.2fr);
  align-items:end;
  gap:20px 70px;
  margin-bottom:clamp(34px,4vw,60px)
}

.inside-heading .eyebrow {
  grid-column:1/-1;
  margin:0
}

.inside-heading h2 {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(38px,4.3vw,64px);
  font-weight:400;
  line-height:1;
  letter-spacing:-2.5px
}

.inside-heading .hand {
  justify-self:end;
  max-width:430px;
  margin:0 4% 4px 0;
  font-size:clamp(19px,2vw,27px);
  line-height:1.15;
  transform:rotate(-2deg)
}

.inside-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.6vw,24px)
}

.inside-photo {
  grid-column:span 3;
  margin:0;
  overflow:hidden;
  background:#deddd6
}

.inside-categories {
  grid-column:1/-1;
  display:flex;
  gap:clamp(12px,1.6vw,24px);
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch
}

.inside-categories::-webkit-scrollbar {display:none}

.inside-categories .inside-photo {
  flex:0 0 calc((100% - clamp(12px,1.6vw,24px))/2);
  grid-column:auto;
  scroll-snap-align:start
}

.inside-photo img,.inside-photo video {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)
}

.inside-video video {background:#deddd6}

@media(hover:hover) {
  .inside-photo:hover img,.inside-photo:hover video {transform:scale(1.018)}
}

@media(max-width:700px) {
  .inside-gallery {padding:62px 0 82px}
  .inside-heading {grid-template-columns:1fr;gap:18px;margin-bottom:30px}
  .inside-heading .eyebrow {grid-column:auto}
  .inside-heading h2 {font-size:clamp(38px,12vw,54px);letter-spacing:-2px}
  .inside-heading .hand {justify-self:start;margin:0;max-width:290px;font-size:20px}
  .inside-grid {grid-template-columns:1fr;gap:14px}
  .inside-photo {grid-column:auto}
  .inside-categories {
    display:flex;
    gap:12px;
    width:calc(100% + 20px);
    margin-right:-20px;
    padding-right:20px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch
  }
  .inside-categories::-webkit-scrollbar {display:none}
  .inside-categories .inside-photo {
    flex:0 0 86%;
    scroll-snap-align:start
  }
}


@media(max-width:1100px) {
  .hero-photo .product-note .product-note-arrow {
    display:block!important;
    width:clamp(38px,5vw,52px)!important;
    height:auto!important;
    max-width:none!important;
    margin:7px auto 0!important;
    opacity:1!important;
    visibility:visible!important;
    filter:brightness(0) invert(1)!important;
    transform:none!important;
    object-fit:contain
  }
}


@media(max-width:1100px) {
  .hero-photo-image {
    position:relative;
    left:50%;
    width:200%;
    max-width:200%;
    transform:translateX(-50%)
  }
}


.inside-cta {
  display:flex;
  justify-content:center;
  margin-top:clamp(34px,4vw,58px)
}

.inside-cta .button {margin:0}

@media(max-width:1100px) {
  .inside-categories {
    display:flex;
    grid-column:1/-1;
    gap:16px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch
  }
  .inside-categories::-webkit-scrollbar {display:none}
  .inside-categories .inside-photo {
    flex:0 0 72%;
    scroll-snap-align:start
  }
}

@media(max-width:700px) {
  .inside-categories {
    width:100%;
    margin-right:0;
    padding-right:0;
    gap:12px
  }
  .inside-categories .inside-photo {flex-basis:86%}
  .inside-cta {margin-top:32px}
}


.inside-category-slider {
  position:relative;
  grid-column:1/-1
}

.inside-slider-arrow {display:none}

.inside-cta {
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding-top:clamp(24px,3vw,38px);
}

.inside-cta .hand {
  margin:0;
  color:var(--rust);
  font-size:clamp(20px,2vw,27px);
  transform:rotate(-2deg)
}

.inside-slider-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:16px;
  padding-top:13px;
}

.inside-slider-progress {
  color:rgba(54,61,41,.68);
  font-size:11px;
  letter-spacing:1.5px
}

.inside-slider-controls {display:flex;align-items:center;gap:21px}

.inside-slider-arrow {
  position:static;
  display:block;
  width:auto;
  height:auto;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  font:300 24px/1 Arial,sans-serif;
  transform:none;
  transition:opacity .2s,transform .2s;
  cursor:pointer
}

.inside-slider-arrow:active {transform:translateY(1px)}
.inside-slider-arrow:disabled {opacity:.32;cursor:default}

@media(max-width:1100px) {
  .inside-categories .inside-photo {flex-basis:72%}
}

@media(max-width:700px) {
  .inside-slider-nav {margin-top:13px;padding-top:0}
  .inside-slider-arrow {font-size:22px}
  .inside-cta {
    align-items:flex-start;
    flex-direction:column;
    gap:20px;
    padding-top:27px
  }
  .inside-cta .hand {font-size:21px}
}


@media(max-width:700px) {
  .hero-photo-image {
    width:250%;
    max-width:250%
  }
  .hero-lead .compact-intro.hand {width:auto;font-size: 22px !important;}
}


.hero-photo .product-note .product-note-arrow {
  transform:scaleX(-1)!important
}

@media(max-width:700px) {
  .hero-lead {gap:26px}
  .hero-lead .hero-intro.compact-intro {display:none!important}
  .hero-action-links {margin-top:0}
  .collection-heading .hand {display:none}
  .inside-gallery {padding-bottom:24px}
  .brand-note {gap:0;padding-top:0;margin-top: 30px;}
  .brand-note::before {
    content:"";
    position:absolute;
    top:-17px;
    left:0;
    right:0;
    height:10px;
    background:var(--ink-divider) center / 100% 10px no-repeat;
    opacity:.8;
    transform:scaleX(-1);
    pointer-events:none
  }
  .brand-note .doodle-logo {width:min(190px,52vw)}
  .sudoku-feature .feature-copy h2 {display:none}
  .sudoku-feature .sudoku-subtitle {font-size:30px}
  .brand-note .signoff {display:none}
}