/* Noa Rotem · Selected Works 2026 · flipbook viewer
   Page typography mirrors the PDF (A4, 595 x 842 pt). 1 pt = var(--u). */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 500;font-display:swap;src:url("fonts/cormorant-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 500;font-display:swap;src:url("fonts/cormorant-italic.woff2") format("woff2")}

:root{
  --ink:#1a1a1a; --ink-2:#444444; --mute:#8a8a8a; --faint:#b5b5b5; --hair:#dddddd;
  --paper:#ffffff; --stage:#e9e6e1; --stage-2:#dedad3;
  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html,body{touch-action:manipulation;overscroll-behavior:none}
body{
  background:var(--stage);
  background-image:radial-gradient(ellipse at 50% 42%, #f1efea 0%, var(--stage) 55%, var(--stage-2) 100%);
  color:var(--ink);font-family:var(--serif);overflow:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}

/* ---------- book shell ---------- */
.book-wrap{position:relative;transition:transform .7s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.book-wrap::before{content:"";position:absolute;inset:0;z-index:0;box-shadow:0 18px 38px rgba(40,34,26,.22),0 2px 6px rgba(40,34,26,.12);transition:left .7s cubic-bezier(.4,0,.2,1)}
.book-wrap.at-cover::before{left:50%}
.book{position:relative;z-index:1}
.work__fig img{-webkit-touch-callout:none;pointer-events:none}
.contact__row a{-webkit-user-select:text;user-select:text}
.book-wrap.at-cover{transform:translateX(calc(var(--half) / -2))}
.page{background:var(--paper);overflow:hidden}
.page.--hard,.page.--soft{} /* page-flip classes */
.pg{position:relative;width:100%;height:100%;container-type:size;overflow:hidden;background:var(--paper)}
.pg::after{ /* subtle paper grain */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* inner gutter shading for the spread */
.page.--left .pg::before,.page.--right .pg::before{content:"";position:absolute;top:0;bottom:0;width:7%;pointer-events:none;z-index:1}
.page.--left .pg::before{right:0;background:linear-gradient(to left,rgba(0,0,0,.06),rgba(0,0,0,0))}
.page.--right .pg::before{left:0;background:linear-gradient(to right,rgba(0,0,0,.06),rgba(0,0,0,0))}

/* ---------- typographic scale: 1pt of the A4 page ---------- */
.pg{--u:calc(100cqw / 595)}
.pg p,.pg h1,.pg h2,.pg h3{margin:0}
.rule{display:block;height:0;border-top:calc(.6 * var(--u)) solid var(--faint);min-height:1px;border-top-width:max(.5px,calc(.6 * var(--u)))}

/* Cover (pdf p1) */
.cover{text-align:center}
.cover__block{position:absolute;left:0;right:0;top:calc(300 * var(--u))}
.cover__name{font-weight:500;font-size:calc(34 * var(--u));line-height:1.25;letter-spacing:.2em;text-indent:.2em;color:var(--ink)}
.rule--cover{width:calc(56 * var(--u));margin:calc(6 * var(--u)) auto calc(8 * var(--u))}
.cover__sub{font-style:italic;font-size:calc(16 * var(--u));line-height:1.2}
.cover__year{font-weight:300;font-size:calc(12 * var(--u));color:var(--mute);letter-spacing:.2em;text-indent:.2em;margin-top:calc(6 * var(--u))}
.cover__foot{position:absolute;left:0;right:0;bottom:calc(42 * var(--u))}
.cover__for{font-style:italic;font-size:calc(10.5 * var(--u));color:var(--mute)}
.cover__tag{font-weight:300;font-size:calc(9 * var(--u));color:var(--faint);letter-spacing:.65em;text-indent:.65em;margin-top:calc(12 * var(--u))}

/* Shared section heading (pdf p2, p20) */
.heading{font-weight:500;font-size:calc(15 * var(--u));letter-spacing:.5em;text-indent:.5em;text-align:center;line-height:1.3;color:var(--ink)}

/* Artist statement (pdf p2) */
.statement .inner{padding:calc(94 * var(--u)) calc(80 * var(--u)) 0}
.statement__draft{font-style:italic;font-size:calc(11 * var(--u));color:var(--mute);text-align:center;margin-top:calc(9 * var(--u))}
.statement__body{margin-top:calc(36 * var(--u));font-size:calc(13 * var(--u));line-height:calc(21 * var(--u));color:var(--ink)}
.statement__body p + p{margin-top:calc(21 * var(--u))}

/* Divider (pdf p3) */
.divider{display:flex;align-items:center;justify-content:center}
.divider__title{font-weight:500;font-size:calc(15 * var(--u));letter-spacing:.58em;text-indent:.58em;color:var(--mute);margin-top:calc(-56 * var(--u))}

/* Painting page (pdf p5,7,...) */
.work__fig{position:absolute;left:calc(63 * var(--u));right:calc(63 * var(--u));top:calc(82 * var(--u));height:calc(660 * var(--u));margin:0;display:flex;align-items:center;justify-content:center}
.work__fig img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:0;transition:opacity .6s ease}
.work__fig img.is-loaded{opacity:1}
.work__cap{position:absolute;left:0;right:0;top:calc(752 * var(--u));text-align:center}
.work__title{font-style:italic;font-size:calc(15 * var(--u));line-height:1.3;color:var(--ink)}
.work__meta{font-weight:300;font-size:calc(10.5 * var(--u));line-height:calc(16 * var(--u));color:var(--mute);letter-spacing:.08em}
.work__cap .work__meta:first-of-type{margin-top:calc(5 * var(--u))}

/* Story page (pdf p4,6,...) */
.story{text-align:center}
.story__title{position:absolute;left:0;right:0;top:calc(336 * var(--u));font-style:italic;font-weight:400;font-size:calc(17 * var(--u));line-height:1.25;color:var(--ink)}
.rule--story{position:absolute;left:50%;top:calc(370 * var(--u));width:calc(32 * var(--u));margin-left:calc(-16 * var(--u))}
.story__text{position:absolute;left:calc(60 * var(--u));right:calc(60 * var(--u));top:calc(386 * var(--u));font-size:calc(13 * var(--u));line-height:calc(22 * var(--u));color:var(--ink-2)}

/* Price list (pdf p20) */
.prices .inner{padding:calc(84 * var(--u)) calc(110 * var(--u)) 0}
.prices__sub{font-style:italic;font-size:calc(12 * var(--u));text-align:center;margin-top:calc(8 * var(--u));color:var(--ink)}
.prices__table{width:100%;border-collapse:collapse;margin-top:calc(34 * var(--u))}
.prices__table th{font-weight:300;font-size:calc(10 * var(--u));color:var(--faint);text-align:left;letter-spacing:.12em;padding:0 0 calc(6 * var(--u));border-bottom:max(.5px,calc(.5 * var(--u))) solid var(--faint)}
.prices__table td{padding:0;height:calc(36 * var(--u));vertical-align:middle;border-bottom:max(.5px,calc(.4 * var(--u))) solid var(--hair)}
.prices__table tbody tr:last-child td{border-bottom-color:var(--hair)}
.c-no{width:calc(30 * var(--u));font-weight:300;font-size:calc(11 * var(--u));color:var(--mute)}
.c-work{font-style:italic;font-size:calc(12.5 * var(--u));color:var(--ink)}
.c-size{width:calc(85 * var(--u));font-size:calc(11.5 * var(--u));color:var(--ink);white-space:nowrap}
.prices__note{font-weight:300;font-size:calc(10.5 * var(--u));line-height:calc(16 * var(--u));color:var(--mute);text-align:center;margin-top:calc(26 * var(--u))}

/* Contact (pdf p21) */
.contact{text-align:center}
.contact__block{position:absolute;left:0;right:0;top:calc(298 * var(--u))}
.contact__name{font-weight:500;font-size:calc(20 * var(--u));letter-spacing:.48em;text-indent:.48em;line-height:1.3;color:var(--ink)}
.rule--contact{width:calc(48 * var(--u));margin:calc(8 * var(--u)) auto calc(26 * var(--u))}
.contact__row{font-size:calc(12 * var(--u));line-height:calc(21 * var(--u));color:var(--ink)}
.contact__row a{color:inherit;text-decoration:none}
.contact__row a:hover{text-decoration:underline;text-underline-offset:.15em;text-decoration-color:var(--faint)}
.contact__foot{position:absolute;left:0;right:0;bottom:calc(58 * var(--u))}
.contact__disc{font-style:italic;font-size:calc(9.5 * var(--u));line-height:calc(13 * var(--u));color:var(--faint)}
.contact__date{font-weight:300;font-size:calc(9 * var(--u));color:var(--faint);margin-top:calc(22 * var(--u));letter-spacing:.12em}

/* ---------- viewer chrome ---------- */
.nav{position:fixed;top:50%;transform:translateY(-50%);pointer-events:auto;width:48px;height:48px;border:0;border-radius:50%;background:transparent;color:#6b665f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s,opacity .25s}
.nav:hover{color:#1a1a1a;background:rgba(255,255,255,.55)}
.nav:focus-visible{outline:1px solid #8a8a8a;outline-offset:2px}
.nav--prev{left:max(8px,calc(50% - var(--half) - 60px))}
.nav--next{right:max(8px,calc(50% - var(--half) - 60px))}
.nav[disabled]{opacity:.22;cursor:default;background:transparent}
.bar{position:absolute;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.counter{font-size:13px;letter-spacing:.14em;color:#7a756e;font-variant-numeric:tabular-nums;pointer-events:auto;min-width:5.5em;text-align:center}
.fs{pointer-events:auto;position:absolute;right:max(12px,env(safe-area-inset-right));bottom:0;width:34px;height:34px;border:0;background:transparent;color:#7a756e;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center}
.fs:hover{color:#1a1a1a;background:rgba(255,255,255,.55)}
.fs.is-hidden{display:none}


@media (max-width:640px){
  .nav{position:static;transform:none;width:40px;height:40px;background:transparent}
  .bar{gap:18px;bottom:max(6px,env(safe-area-inset-bottom))}
  .book-wrap::before{box-shadow:0 10px 24px rgba(40,34,26,.22)}
  .pg::after{display:none} /* no grain overlay on phones: cheaper flips */
  .counter{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.book{transition:none}}

/* ---------- small screens: keep running text readable (PDF proportions otherwise) ---------- */
@media (max-width:640px){
  .statement .inner{padding:calc(70 * var(--u)) calc(44 * var(--u)) 0}
  .statement__draft{margin-top:calc(8 * var(--u))}
  .statement__body{margin-top:calc(24 * var(--u));font-size:max(calc(13 * var(--u)),11.5px);line-height:1.55}
  .statement__body p + p{margin-top:1em}
  .heading{font-size:max(calc(15 * var(--u)),11px)}
  .statement__draft{font-size:max(calc(11 * var(--u)),9.5px)}
  .story__title{font-size:max(calc(17 * var(--u)),16px)}
  .story__text{left:calc(40 * var(--u));right:calc(40 * var(--u));font-size:max(calc(13 * var(--u)),11.5px);line-height:1.65}
  .work__title{font-size:max(calc(15 * var(--u)),13px)}
  .work__meta{font-size:max(calc(10.5 * var(--u)),9.5px);line-height:1.5}
  .work__fig{height:calc(652 * var(--u))}
  .prices .inner{padding:calc(70 * var(--u)) calc(40 * var(--u)) 0}
  .prices__sub{font-size:max(calc(12 * var(--u)),11px)}
  .prices__table{margin-top:calc(28 * var(--u))}
  .prices__table th{font-size:max(calc(10 * var(--u)),8.5px)}
  .prices__table td{height:max(calc(36 * var(--u)),26px)}
  .c-no{font-size:max(calc(11 * var(--u)),10px)}
  .c-work{font-size:max(calc(12.5 * var(--u)),11.5px)}
  .c-size{font-size:max(calc(11.5 * var(--u)),10.5px)}
  .prices__note{font-size:max(calc(10.5 * var(--u)),9.5px);line-height:1.5;margin-top:calc(20 * var(--u))}
  .contact__row{font-size:max(calc(12 * var(--u)),12px);line-height:1.75}
  .contact__name{font-size:max(calc(20 * var(--u)),16px)}
  .contact__disc{font-size:max(calc(9.5 * var(--u)),8.5px);line-height:1.4}
  .contact__date{font-size:max(calc(9 * var(--u)),8.5px)}
  .cover__for{font-size:max(calc(10.5 * var(--u)),9.5px)}
  .cover__tag{font-size:max(calc(9 * var(--u)),8px)}
  .cover__sub{font-size:max(calc(16 * var(--u)),14px)}
  .cover__year{font-size:max(calc(12 * var(--u)),10px)}
  .divider__title{font-size:max(calc(15 * var(--u)),12px)}
}