/* ARTWORK, COLLECTIONS and ABOUT share the homepage paper, type and pins. */
.page-head{margin:clamp(24px,4.5vw,60px) var(--gutter) clamp(24px,3vw,36px)}
.page-head h1{margin:0;font-size:clamp(44px,7vw,96px);font-weight:500;line-height:1;letter-spacing:-.04em}
/* The heading block never changes between sections, so the tabs below it stay put. */
.page-head p{max-width:40em;min-height:calc(1.7em*2);margin:clamp(14px,2vw,22px) 0 0;font-size:15px;line-height:1.7;color:var(--ink-soft)}

/* Text tabs with counts */
.archive-tabs{position:sticky;top:var(--sticky-top);z-index:15;display:flex;gap:clamp(18px,2.4vw,30px);overflow-x:auto;margin:0 0 clamp(24px,3vw,40px);padding:0 var(--gutter);background:#f5f4f0ed;border-bottom:1px solid var(--rule);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);scrollbar-width:none}
.archive-tabs::-webkit-scrollbar{display:none}
.archive-tabs a{transition:color .24s ease;display:flex;flex:none;align-items:center;min-height:46px;margin-bottom:-1px;font-size:13px;letter-spacing:.02em;color:var(--ink-soft);white-space:nowrap}
.archive-tabs a[aria-current]{color:var(--ink)}
.archive-tabs{--ink-pad:0}
.tabs-ink{position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--ink);transition:left .36s cubic-bezier(.2,.8,.2,1),width .36s cubic-bezier(.2,.8,.2,1)}
.archive-tabs sup{margin:-6px 0 0 3px;font-size:10.5px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--ink-soft)}

/* Keeps the page tall enough for the stuck tabs to hold their place on short sections. */
#archive-view{min-height:100vh}
.section-head{margin:0 var(--gutter) clamp(24px,3vw,36px)}
.section-head h2{margin:0;font-size:clamp(21px,2.3vw,30px);font-weight:500;line-height:1.25;letter-spacing:-.02em}
.section-head p{max-width:44em;margin:10px 0 0;font-size:15px;line-height:1.7;color:var(--ink-soft)}

/* Overview covers */
.cover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(20px,3vw,40px);margin:0 var(--gutter) clamp(64px,8vw,110px)}
.cover-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:4px 12px}
/* As on the homepage, only the paper tilts. */
.cover-paper{position:relative;isolation:isolate;grid-column:1/-1;display:block;margin-bottom:12px;padding:10px}
.cover-paper::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);box-shadow:var(--paper-shadow)}
.cover-card:nth-child(3n+1) .cover-paper::before{transform:rotate(.4deg)}
.cover-card:nth-child(3n+2) .cover-paper::before{transform:rotate(-.45deg)}
.cover-card:nth-child(3n) .cover-paper::before{transform:rotate(.25deg)}
.cover-paper img{display:block;width:100%;height:auto;aspect-ratio:1200/676;object-fit:cover}
.cover-title{font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.cover-count{padding-top:4px;font-size:12px;letter-spacing:.06em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.cover-summary{grid-column:1/-1;font-size:14px;line-height:1.6;color:var(--ink-soft)}
@media(hover:hover){.cover-card:hover .cover-title{text-decoration:underline;text-underline-offset:4px}}

/* Story text on collection pages */
.archive-story{max-width:44em;margin:0 var(--gutter) clamp(32px,4vw,56px)}
.archive-story h3{margin:0 0 14px;font-size:clamp(19px,2vw,24px);font-weight:600;line-height:1.35;letter-spacing:-.015em}
.archive-story p{margin:0 0 12px;font-size:15px;line-height:1.75}

/* Paper sheets. The pin sits on the sheet, not the rotated paper, so it stays above the next sheet. */
.sheets{--sheet-columns:3;--sheet-gap:clamp(24px,2.8vw,36px);display:grid;grid-template-columns:repeat(var(--sheet-columns),minmax(0,1fr));gap:calc(var(--sheet-gap) + 8px) var(--sheet-gap);margin:0 var(--gutter) clamp(44px,6vw,72px)}
.sheets-wide,.sheets-sketch{--sheet-columns:1}
.sheet{position:relative;margin:0;min-width:0}
.sheet-paper{position:relative;isolation:isolate;height:100%;padding:16px}
.sheet-paper::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);box-shadow:var(--paper-shadow)}
.sheet:nth-child(3n+1) .sheet-paper::before{transform:rotate(.3deg)}
.sheet:nth-child(3n+2) .sheet-paper::before{transform:rotate(-.35deg)}
.sheet:nth-child(3n) .sheet-paper::before{transform:rotate(.2deg)}
.sheet-photos{display:flex;align-items:center;gap:8px}
.sheet-photo{display:block;flex:var(--shape) 1 0;min-width:0;cursor:zoom-in}
.sheets-sketch .sheet-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:12px}
.sheet-photo img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.sheet figcaption{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink-soft)}

.sheet::after{content:"";position:absolute;z-index:5;top:calc(32% + var(--pin-shift,0%));right:calc((var(--sheet-gap) + 80px)/-2);width:80px;aspect-ratio:360/65;background:url("../images/safety-pin.webp") center/contain no-repeat;transform:rotate(var(--pin-turn,4deg));pointer-events:none}
.sheet:nth-child(even){--pin-shift:30%;--pin-turn:-8deg}
.sheets-looks .sheet:nth-child(3n)::after,.sheet:last-child::after{display:none}
.sheets-wide .sheet::after,.sheets-sketch .sheet::after{top:auto;right:12%;bottom:calc((var(--sheet-gap) + 8px + 80px)/-2);--pin-turn:82deg;transform:rotate(var(--pin-turn))}
.sheets-wide .sheet:nth-child(even)::after,.sheets-sketch .sheet:nth-child(even)::after{right:auto;left:12%;--pin-turn:-84deg}

/* Pager between sections */
.archive-pager{display:flex;justify-content:space-between;gap:16px;margin:0 var(--gutter) clamp(44px,6vw,72px);padding-top:8px;border-top:1px solid var(--rule)}
.archive-pager a{display:flex;align-items:center;min-height:44px;font-size:14px}
@media(hover:hover){.archive-pager a:hover{text-decoration:underline;text-underline-offset:4px}}

/* About page */
.about-page{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start;margin:0 var(--gutter) clamp(64px,8vw,110px)}
.about-page>.about-sheet{grid-column:2;grid-row:1}
.about-page>.about-text{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.2vw,32px);align-items:start}
.about-text h2{margin:0 0 6px;font-size:20px;font-weight:500;line-height:1.35;letter-spacing:-.015em}
.skill-list{list-style:none;margin:0;padding:0}
.skill-list li{padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.55}

.resume-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.resume-actions button{min-height:44px;padding:10px 8px;border:1px solid var(--rule);background:transparent;color:var(--ink-soft);font-size:14px;line-height:1.4;cursor:default}

@media(max-width:1100px){
  .about-page{grid-template-columns:minmax(0,1fr)}
  .about-page>.about-text{grid-column:1;grid-row:1}
  .about-page>.about-sheet{grid-column:1;grid-row:2;width:100%;max-width:620px}
  .cover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sheets{--sheet-columns:2}
  .sheets-wide,.sheets-sketch{--sheet-columns:1}
  .sheets-looks .sheet:nth-child(3n)::after{display:block}
  .sheets-looks .sheet:nth-child(2n)::after,.sheet:last-child::after{display:none}
}

@media(max-width:700px){
  .page-head{margin:28px var(--gutter) 24px}
  .page-head h1{font-size:clamp(40px,12.6vw,72px)}
  .archive-tabs{gap:22px;margin-bottom:28px}
  .section-head{margin-bottom:24px}
  .section-head h2{font-size:24px}
  .about-page{grid-template-columns:minmax(0,1fr);gap:48px;margin-bottom:72px}
  .about-page>.about-sheet,.about-page>.about-text{grid-column:1;grid-row:auto}
  .about-page>.about-text{grid-template-columns:minmax(0,1fr);gap:32px}
  .skill-list li{font-size:15px}
  .page-head p{min-height:calc(1.7em*3)}
  .cover-grid{grid-template-columns:minmax(0,1fr);gap:40px;margin-bottom:72px}
  .sheets,.sheets-wide,.sheets-sketch{--sheet-columns:1;--sheet-gap:32px}
  /* A 29px vertical gap with a 64px pin matches the desktop 36px/80px proportion. */
  body[data-archive="artwork"] .sheets{--sheet-gap:21px}
  .sheets-sketch .sheet-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sheets-wide .sheet-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .sheet-paper{padding:14px}
  /* One column: each pin hangs across the gap to the sheet below. */
  .sheets-looks .sheet::after,.sheets-looks .sheet:nth-child(3n)::after{display:block;top:auto;right:12%;bottom:calc((var(--sheet-gap) + 8px)/-2 - 6px);width:64px;--pin-turn:82deg}
  .sheets-looks .sheet:nth-child(even)::after{right:auto;left:12%;--pin-turn:-84deg}
  .sheets-wide .sheet::after,.sheets-sketch .sheet::after{bottom:calc((var(--sheet-gap) + 8px)/-2 - 6px);width:64px}
  .sheets-looks .sheet:last-child::after,.sheets-wide .sheet:last-child::after,.sheets-sketch .sheet:last-child::after{display:none}
}