/* Scrap Briding · ring-binder scrapbook */
:root{--ink:#3A2B28;--ink2:#6E5550;--paper:#F8F4EC;--blush:#EBD3CE;--rose:#D9B5AF;--dusty:#C9A09A;--ivory:#FBF8F3;--desk:#E4DBCD}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--desk)}
a{color:var(--ink)}a:hover{color:#8C5F58}
img{max-width:100%}

.desk{position:relative;width:100%;height:100vh;height:100dvh;min-height:620px;padding:16px 10px 16px 16px;overflow:hidden;
  font-family:'Times New Roman',Tinos,Times,serif;color:var(--ink);
  background:radial-gradient(rgba(110,85,70,.07) 1px,transparent 1.2px) 0 0/5px 5px,radial-gradient(rgba(110,85,70,.05) 1px,transparent 1.2px) 2px 3px/7px 7px,var(--desk)}
.hand{font-family:'Homemade Apple','Bradley Hand',cursive;font-weight:400}
.mono{font-family:'Courier Prime','Courier New',monospace}
.eyebrow{font-family:'Courier Prime','Courier New',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}

/* binder */
.binder{position:relative;width:100%;height:100%}
.spine{position:absolute;left:0;top:-4px;bottom:-4px;width:40px;border-radius:12px 0 0 12px;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,rgba(255,255,255,0) 1px 4px),linear-gradient(to right,#B98C86,#CFA7A1 60%,#B58782);
  box-shadow:inset -3px 0 6px rgba(60,35,30,.25),4px 10px 24px rgba(70,45,35,.25)}
.stack{position:absolute;top:0;bottom:0;left:30px;right:58px;border-radius:4px 12px 12px 4px;background:#F1EBE0;
  box-shadow:2px 2px 0 #E6DCCD,4px 4px 0 #F3EEE5,6px 6px 0 #E3D8C8,8px 8px 0 #F1EBE0,14px 20px 36px rgba(70,45,35,.28)}
.sheets{position:absolute;top:0;bottom:0;left:30px;right:58px}
.sheet{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;animation-duration:.75s;animation-timing-function:cubic-bezier(.45,.05,.35,1);animation-fill-mode:both}
.sheet.fwd{animation-name:flipF}
.sheet.bwd{animation-name:flipB}
@keyframes flipF{0%{transform:perspective(3200px) rotateY(0deg);opacity:1}65%{opacity:1}100%{transform:perspective(3200px) rotateY(-175deg);opacity:0}}
@keyframes flipB{0%{transform:perspective(3200px) rotateY(-175deg);opacity:0}35%{opacity:1}100%{transform:perspective(3200px) rotateY(0deg);opacity:1}}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px 12px 12px 4px;overflow:hidden;
  background:linear-gradient(to right,rgba(80,55,45,.10),rgba(80,55,45,0) 70px),var(--paper);box-shadow:inset 0 0 0 1px #E6DCCD}
.face.back{transform:rotateY(180deg);border-radius:12px 4px 4px 12px;background:#F3EDE3}
.face.is-cover{background:linear-gradient(to right,rgba(60,35,30,.16),rgba(60,35,30,0) 70px),repeating-linear-gradient(0deg,rgba(255,255,255,.17) 0 1px,rgba(255,255,255,0) 1px 4px),#E2C4BE;box-shadow:inset 0 0 0 1px #D2AEA8}
.face.endpaper{background:radial-gradient(circle,rgba(201,160,154,.45) 1.5px,transparent 2px) 0 0/22px 22px,#F2E4E0}
.holes{position:absolute;left:12px;top:0;bottom:0;width:24px;display:flex;flex-direction:column;justify-content:space-evenly;z-index:1;pointer-events:none}
.holes i{display:block;width:16px;height:16px;margin:4px;border-radius:50%;background:var(--desk);box-shadow:inset 1px 2px 3px rgba(60,40,30,.35)}
.rings{position:absolute;left:2px;top:0;bottom:0;width:64px;display:flex;flex-direction:column;justify-content:space-evenly;z-index:400;pointer-events:none}
.rings i{display:block;width:52px;height:16px;margin:2px 0;border-radius:14px;border:4px solid;border-color:#E9E5E0 #8F8780 #7E766F #D6D0C9;box-shadow:1px 3px 4px rgba(50,35,25,.35)}

/* bookmarks */
.tabs{position:absolute;top:64px;left:calc(100% - 58px);display:flex;flex-direction:column;gap:12px;z-index:0}
.tab{appearance:none;border:0;cursor:pointer;width:46px;min-height:120px;padding:14px 0 14px 8px;border-radius:0 12px 12px 0;display:flex;align-items:center;justify-content:center;
  box-shadow:2px 3px 6px rgba(70,45,35,.18);transition:width .25s ease}
.tab:hover{width:52px}.tab.on{width:56px}
.c-ivory{background:var(--ivory)}.c-blush{background:var(--blush)}.c-rose{background:var(--rose)}.c-dusty{background:var(--dusty)}
.tab-label{writing-mode:vertical-rl;transform:rotate(180deg);background:#FDFBF7;padding:10px 4px;font-family:'Courier Prime','Courier New',monospace;font-size:13px;color:var(--ink);white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tab:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* page content */
.pg{position:absolute;inset:0;padding:48px 64px 72px 84px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.pg::-webkit-scrollbar{display:none}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;min-height:100%}
.col{display:flex;flex-direction:column;gap:20px;min-width:0}
.body-copy{font-size:20px;line-height:1.6;margin:0;max-width:520px;text-wrap:pretty}
.corner{appearance:none;border:0;background:none;cursor:pointer;position:absolute;bottom:14px;padding:10px 14px;min-height:44px;font-family:'Homemade Apple',cursive;font-size:14px;color:var(--ink2);z-index:20}
.corner:hover{color:var(--ink)}
.corner.next{right:22px}.corner.prev{left:70px}

.polaroid{position:relative;background:#FCFAF6;padding:10px 10px 40px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 22px rgba(70,45,35,.16)}
.polaroid img{display:block;width:100%;height:100%;object-fit:cover}
.polaroid .cap{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-family:'Homemade Apple',cursive;font-size:13px;white-space:nowrap}
.photo{position:relative;box-shadow:0 10px 22px rgba(70,45,35,.2);background:#FCFAF6;padding:6px}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.tape{position:absolute;top:-13px;left:50%;width:96px;height:26px;transform:translateX(-50%) rotate(-4deg);background:rgba(235,211,206,.85);z-index:2;
  clip-path:polygon(2% 10%,6% 0,12% 8%,20% 0,30% 6%,40% 0,52% 8%,62% 0,72% 7%,82% 0,92% 8%,98% 0,100% 50%,98% 92%,92% 100%,82% 93%,72% 100%,60% 92%,50% 100%,40% 93%,30% 100%,20% 92%,10% 100%,3% 92%,0 50%)}
.tape.ivory{background:rgba(250,246,238,.88)}
.tape.tilt{transform:translateX(-50%) rotate(6deg)}
.tape.corner-l{left:8%;transform:translateX(-50%) rotate(-38deg);top:-6px}
.pin{position:absolute;top:-7px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;z-index:3;background:radial-gradient(circle at 35% 30%,#F6DCD8,#D59C95 55%,#B9807A);box-shadow:1px 3px 3px rgba(70,45,35,.35)}
.r-a{transform:rotate(-3deg)}.r-b{transform:rotate(2.2deg)}.r-c{transform:rotate(-1.4deg)}.r-d{transform:rotate(3.6deg)}.r-e{transform:rotate(-5deg)}.r-f{transform:rotate(6deg)}
.note{background:#FBF4D9;padding:16px 18px;box-shadow:0 8px 16px rgba(70,45,35,.14);font-family:'Homemade Apple',cursive;font-size:13px;line-height:1.9}
.note.pink{background:#F5E1DD}
.doodle{position:absolute;overflow:visible;pointer-events:none}
.ink{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ink.rose{stroke:#B9807A}
.ink.soft{stroke:#C9A09A;stroke-width:2.4}
.snaps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 18px}
.snap{position:relative;margin:0;background:#FCFAF6;padding:6px 6px 28px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 18px rgba(70,45,35,.14);transition:transform .3s ease,box-shadow .3s ease}
.snap:hover{transform:rotate(0deg) scale(1.08);box-shadow:0 18px 30px rgba(70,45,35,.24);z-index:6}
.snap img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.snap .cap{position:absolute;left:4px;right:4px;bottom:6px;text-align:center;font-family:'Homemade Apple',cursive;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* stylist page: bio on top (only as tall as it needs), then reels, then saves */
.two.fit{min-height:0}
.reels-wrap,.saves-wrap{display:flex;flex-direction:column;gap:16px;margin-top:48px}
.reels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 18px}
.snap.reel{padding-bottom:6px}
.reel-frame{position:relative;aspect-ratio:9/16;background:#EFE7DD}
.reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:1100px){.reels{grid-template-columns:repeat(3,minmax(0,1fr))}.snaps{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* cover */
.cover-title{margin:0;font-weight:400;line-height:.86;font-size:clamp(76px,13vh,150px);letter-spacing:-.02em}
.cover-title span{display:block}
.cover-title .b{position:relative;display:inline-block;font-style:italic;margin-left:.3em}
.open-btn{appearance:none;border:0;cursor:pointer;align-self:flex-start;background:#FCF8F2;color:var(--ink);padding:12px 22px;min-height:44px;font-family:'Homemade Apple',cursive;font-size:15px;box-shadow:0 4px 12px rgba(70,45,35,.18);transform:rotate(-2deg);transition:transform .2s}
.open-btn:hover{transform:rotate(0) translateY(-2px)}
.collage{position:relative;min-height:520px}
.collage>*{position:absolute}
.collage.table{flex:1 1 auto;min-height:440px;margin-top:10px}
.table-note{position:relative;z-index:5;align-self:flex-end;max-width:170px;margin-top:-84px}
.ticket{background:#FBF8F3;border:1.5px dashed #C9A09A;padding:8px 14px;font-family:'Courier Prime',monospace;font-size:12px;letter-spacing:.18em;text-align:center;line-height:1.5;box-shadow:0 4px 10px rgba(70,45,35,.12)}

/* receipt */
.receipt{position:relative;width:320px;max-width:100%;background:#FDFCF9;padding:28px 24px 18px;box-shadow:0 12px 26px rgba(70,45,35,.16);font-family:'Courier Prime',monospace;font-size:13px;color:#3A3330;line-height:1.55}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:linear-gradient(-45deg,transparent 7px,#FDFCF9 0) 0 0/14px 10px repeat-x,linear-gradient(45deg,transparent 7px,#FDFCF9 0) 0 0/14px 10px repeat-x}
.receipt .rule{letter-spacing:-.05em;color:#8F8682;overflow:hidden;white-space:nowrap}
.receipt .row{display:flex;justify-content:space-between;gap:12px}
.receipt .small{font-size:11px;color:#6B625E}
.book-link{display:flex;align-items:center;justify-content:center;min-height:44px;margin:14px 0 6px;background:var(--ink);color:#FBF6F2;text-decoration:none;font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.book-link:hover{background:#5A423D;color:#fff}
.contact-card{position:relative;width:340px;max-width:100%;margin-top:30px;background:#F5E1DD;padding:20px 22px 12px;text-align:center;box-shadow:0 8px 18px rgba(70,45,35,.14)}
.contact-lead{margin:0;font-size:20px;font-style:italic;line-height:1.35}
.contact-lines{margin:10px 0 4px;font-family:'Courier Prime',monospace;font-size:15px;font-weight:700;letter-spacing:.03em;line-height:1.8}
.contact-lines a{white-space:nowrap;text-decoration-color:#C9A09A;text-underline-offset:4px}

/* folders */
/* the folders are an archive drawer: the box keeps its size and the folders scroll inside it */
.folders{display:flex;flex-direction:column;height:520px;overflow-y:auto;padding:34px 0 64px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent)}
.folders::-webkit-scrollbar{display:none}
.folder{flex:none}
.folder{appearance:none;border:0;cursor:pointer;text-align:left;position:relative;display:block;width:100%;height:132px;margin-top:-48px;padding:0;background:none;transition:transform .25s ease;color:var(--ink);font-family:inherit}
.folder:first-child{margin-top:0}
.folder:hover{transform:translateY(-10px)}
.folder-tab{position:absolute;top:-24px;height:30px;width:150px;border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:center}
.folder-body{position:absolute;inset:0;border-radius:2px 8px 4px 4px;box-shadow:0 -2px 8px rgba(70,45,35,.10);padding:16px 22px;display:flex;flex-direction:column;gap:4px;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,rgba(255,255,255,0) 1px 4px)}
.f-0 .folder-tab,.f-0 .folder-body{background-color:#E8CFCA}.f-0 .folder-tab{left:0}
.f-1 .folder-tab,.f-1 .folder-body{background-color:#F2E6DC}.f-1 .folder-tab{left:22%}
.f-2 .folder-tab,.f-2 .folder-body{background-color:#DDBDB7}.f-2 .folder-tab{left:44%}
.f-3 .folder-tab,.f-3 .folder-body{background-color:#EFE2D6}.f-3 .folder-tab{left:66%;width:130px}
.f-4 .folder-tab,.f-4 .folder-body{background-color:#E4C6C1}.f-4 .folder-tab{left:8%}
.folder-label{background:#FDFBF7;padding:2px 10px;font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.12em}
.folder-title{font-size:23px;line-height:1.15}
.folder-status{font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5C433F}

/* posts */
.post-title{margin:0;font-size:clamp(40px,6.4vh,60px);line-height:1;font-weight:400;letter-spacing:-.01em}
.post-title em{font-style:italic}
.pull{font-family:'Homemade Apple',cursive;font-size:15px;line-height:2}
/* in-post subheadings and quote lines sit on the 32px ruled lines */
.post-h{margin:32px 0 0;max-width:520px;font-size:28px;line-height:32px;font-weight:400;font-style:italic;text-wrap:balance}
.pull.quote{margin:0;max-width:520px;line-height:32px}
.lined .quote+.quote{margin-top:-32px}
/* long posts: after the intro, each section runs across the page in two columns */
.spread{margin-top:56px}
.spread .post-h{margin:0;max-width:none;font-size:34px;line-height:40px}
.spread-cols{columns:2;column-gap:56px;margin-top:22px}
.spread-cols>*{margin:0 0 28px}
.spread-cols .body-copy{max-width:none}
.spread-cols .quote-card,.spread-cols .anno,.spread-cols .hand-line,.spread-cols .doodle-row{break-inside:avoid}
/* scrapbook annotations */
mark.hl{color:inherit;padding:0 3px;margin:0 -3px;background:linear-gradient(100deg,rgba(233,176,166,0) 0,rgba(233,176,166,.6) 3%,rgba(233,176,166,.45) 96%,rgba(233,176,166,0) 100%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.circled{position:relative;display:inline-block;padding:0 3px}
.hand-line{font-family:'Homemade Apple',cursive;font-size:19px;line-height:1.9;color:#5C433F;transform:rotate(-1.5deg);transform-origin:left center}
.anno{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;margin-top:-20px!important;font-family:'Homemade Apple',cursive;font-size:13px;line-height:1.6;color:#9A645E;transform:rotate(-2deg)}
.anno span{padding-top:18px}
.quote-card{position:relative;display:flex;flex-direction:column;gap:2px;background:#FDFBF7;padding:30px 22px 18px;margin:12px 8px 30px!important;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 22px rgba(70,45,35,.14)}
.quote-card .eyebrow{font-size:10px;margin-bottom:8px}
.quote-card .pull.quote{line-height:28px}
.doodle-row{display:flex;justify-content:center}
.lined{background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(150,120,110,.22) 31px 32px);background-position:0 6px}
.placeholder{border:1.5px dashed #C9A09A;color:var(--ink2);font-family:'Courier Prime',monospace;font-size:12px;letter-spacing:.06em;padding:12px 14px;background:rgba(255,255,255,.45)}
.scribble{height:10px;border-radius:5px;background:rgba(150,120,110,.18)}
.stamp{display:inline-block;border:2px solid #B9807A;color:#9A645E;font-family:'Courier Prime',monospace;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;padding:6px 12px;transform:rotate(-6deg)}
.link-btn{appearance:none;border:0;background:none;cursor:pointer;padding:8px 0;min-height:44px;font-family:'Homemade Apple',cursive;font-size:13px;color:var(--ink);text-decoration:underline;text-decoration-color:#C9A09A;text-underline-offset:6px}
.link-btn:hover{color:#8C5F58}
.bookplate{background:#FCF8F2;padding:30px 36px;text-align:center;box-shadow:0 6px 18px rgba(70,45,35,.12);display:flex;flex-direction:column;gap:12px;max-width:320px}
.bookplate.small{padding:20px 24px;gap:8px}
.ph{width:100%;height:100%;border:1.5px dashed #C9A09A;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-family:'Courier Prime',monospace;font-size:12px;color:var(--ink2);background:#F4ECE6}

/* phone: the page turns vertical */
@media (max-width:760px){
  .desk{padding:10px 6px 10px 8px;min-height:0}
  .spine{width:22px;border-radius:8px 0 0 8px}
  .stack,.sheets{left:16px;right:38px}
  .holes{left:6px;width:16px}
  .holes i{width:11px;height:11px;margin:3px 2px}
  .rings{width:36px;left:0}
  .rings i{width:30px;height:11px;border-width:3px}
  .tabs{left:calc(100% - 38px);top:40px;gap:8px}
  .tab,.tab:hover{width:32px;min-height:96px;padding:10px 0 10px 4px}
  .tab.on{width:38px}
  .tab-label{font-size:11px;padding:8px 2px}
  .pg{padding:30px 18px 76px 34px}
  .two{grid-template-columns:minmax(0,1fr);gap:34px;min-height:0}
  .collage,.collage.table{min-height:0;aspect-ratio:4/5}
  .collage.table .cap{font-size:10px}
  .table-note{margin-top:-18px}
  .snaps,.reels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .corner.prev{left:30px}
  .corner{font-size:12px}
  .body-copy{font-size:18px}
  .cover-title{font-size:clamp(64px,22vw,110px)}
  .post-title{font-size:clamp(36px,min(6.4vh,11.5vw),60px)}
  .post-h{font-size:24px}
  .spread{margin-top:40px}
  .spread .post-h{font-size:28px;line-height:34px}
  .spread-cols{columns:1}
  /* wrapped folder titles: the folder grows so the next tab never covers them */
  .folder{height:auto}
  .folder-body{position:relative;padding-bottom:72px}
  .f-3 .folder-tab{width:auto;right:0}
  .hide-phone{display:none}
  .wrap-phone{flex-wrap:wrap}
}
/* long pages scroll under the corner buttons: fade the paper's bottom edge */
.face.front:not(.is-cover)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(to top,var(--paper) 62%,rgba(248,244,236,0));z-index:15;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .sheet.fwd,.sheet.bwd{animation-duration:.01s!important;animation-delay:0s!important}
}