/* A short album opening, followed by the real everyday life of Link. */
.site-header { position:absolute; z-index:15; inset:20px 28px auto; height:94px; padding:0; background:none; gap:24px; }
.site-header .brand { width:104px; height:110px; display:grid; place-items:center; background:#fffefb; border-radius:46% 54% 46% 52%; }
.site-header .brand-logo { height:92px; animation:brand-settle 1s .3s both; }
.site-header nav { margin-left:auto; background:#fffefbf5; border-radius:60px; padding:19px 26px; gap:26px; font-weight:700; box-shadow:0 2px 15px #354a5305; }
.site-header nav a { padding:3px 0; }
.site-header .header-actions { background:#fffefbf5; border-radius:60px; padding:10px 15px; gap:16px; }
.site-header .header-button { background:transparent; padding:8px 0; }
.site-header .header-instagram img { width:30px; height:30px; }
.button { border-radius:40px; }
.photo-hero { padding:0; overflow:visible; background:var(--link-paper) url('./assets/link-paper-grain.svg'); text-align:left; }
.photo-hero::before,.photo-hero::after { display:none; }
.hero-scene { position:relative; height:clamp(660px,56vw,820px); max-height:920px; }
.hero-gallery { position:absolute; inset:0 0 0 31%; background:var(--link-sky); overflow:hidden; border-radius:0 0 0 100px; }
.hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.3s ease,visibility 1.3s; }
.hero-slide.is-active { opacity:1; visibility:visible; }
.hero-slide img { width:100%; height:100%; object-fit:cover; object-position:50% 46%; }
.hero-slide:nth-child(2) img { object-position:56% 48%; }
.hero-slide:nth-child(3) img { object-position:54% 45%; }
.photo-hero .hero-content { position:absolute; z-index:3; left:6%; top:30%; padding:0; pointer-events:none; }
.hero-content a { pointer-events:auto; }
.hero-place { font-size:14px; color:var(--deep); letter-spacing:.12em; margin-bottom:20px; }
.photo-hero h1 { margin:0; font-size:clamp(30px,3.05vw,45px); line-height:1.65; letter-spacing:.035em; font-weight:700; }
.photo-hero h1>span { display:table; width:fit-content; padding:0 13px 4px 0; background:var(--link-paper); margin-bottom:7px; }
.photo-hero h1>span:nth-child(2),.photo-hero h1>span:nth-child(3) { padding-left:10px; margin-left:-10px; }
.photo-hero .hero-lead { font-size:15px; line-height:2; margin-top:25px; width:fit-content; padding:8px 14px 8px 0; background:var(--link-paper); }
.hero-scroll { display:inline-flex; align-items:center; gap:10px; margin-top:21px; font-size:12px; background:var(--link-paper); padding:5px 14px 5px 0; }
.hero-scroll>span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#dce9ec; font-size:17px; }
.photo-montage { position:absolute; z-index:2; inset:0; background:var(--link-sky) url('./assets/link-paper-grain.svg'); pointer-events:none; animation:album-finish .7s 2.3s both; }
.montage-print { position:absolute; width:48%; left:26%; top:24%; padding:9px 9px 15px; background:#fffdf8; box-shadow:0 18px 35px #45657325; transform-origin:center 70%; animation:print-arrive .75s cubic-bezier(.2,.7,.2,1) both; }
.montage-print img { width:100%; aspect-ratio:4 / 3; height:auto; object-fit:cover; }
.montage-print span { display:block; text-align:center; font-size:14px; padding-top:9px; letter-spacing:.08em; }
.print-one { --turn:-12deg; --shift:-28%; animation-delay:.12s; }
.print-two { --turn:9deg; --shift:30%; animation-delay:.55s; }
.print-three { --turn:-3deg; --shift:0%; animation-delay:1s; top:26%; }
.recruitment-band { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr 1.2fr; gap:34px; padding:48px 25px 38px; align-items:center; }
.recruit-pill { font-size:13px; letter-spacing:.04em; line-height:1.8; }
.recruit-pill>span { display:block; font-size:17px; margin-bottom:5px; }
.recruit-pill small { font-size:12px; font-weight:500; margin-left:8px; }
.recruit-pill strong { font-size:21px; font-weight:700; }
.recruit-target { font-size:13px; margin-top:7px; }
.recruit-intro { border-left:1px solid #cfdedf; padding-left:30px; font-size:14px; }
.recruit-intro p { line-height:1.9; }
.recruit-action { text-align:center; }
.photo-hero .hero-button { margin:0; width:100%; gap:10px; font-size:15px; padding:16px 20px; min-height:64px; background:#e1ede6; }
.photo-hero .hero-button>span { margin-left:auto; font:22px/1 Arial,sans-serif; }
.photo-hero .hero-note { font-size:11px; margin-top:10px; }
.quick-links { display:flex; justify-content:center; gap:42px; max-width:1120px; margin:0 auto; padding:17px 24px 29px; border-top:1px solid #dce4e2; }
.quick-links a { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:13px; font-weight:500; min-height:44px; }
.quick-links a>span { display:grid; place-items:center; width:23px; height:23px; background:#f3e6b8; border-radius:50%; }
.quick-links a:hover { text-decoration:underline; text-underline-offset:5px; }
@keyframes print-arrive { from { opacity:0; transform:translate(var(--shift),100px) rotate(calc(var(--turn) - 9deg)) scale(.83); } to { opacity:1; transform:translate(var(--shift),0) rotate(var(--turn)) scale(1); } }
@keyframes album-finish { to { opacity:0; visibility:hidden; } }
@media(min-width:1500px) { .photo-hero .hero-content { left:calc((100vw - 1280px)/2); } }
@media(max-width:1100px) and (min-width:761px) {
  .site-header { inset:18px 22px auto; gap:14px; }
  .site-header nav { gap:18px; padding:16px 20px; font-size:12px; }
  .site-header .header-actions { gap:9px; padding:7px 12px; }
  .site-header .header-button { font-size:12px; gap:7px; }
  .site-header .brand { width:84px; height:95px; }
  .site-header .brand-logo { height:80px; }
  .photo-hero .hero-content { left:4%; top:30%; }
  .photo-hero h1 { font-size:32px; }
  .hero-gallery { left:27%; }
  .recruitment-band { grid-template-columns:1fr 1fr; gap:22px; padding:34px; }
  .recruit-intro { display:none; }
  .quick-links { gap:30px; margin:0 34px; }
}
@media(max-width:760px) {
  .site-header { inset:12px 14px auto; height:76px; gap:8px; align-items:flex-start; }
  .site-header .brand { width:73px; height:82px; flex:0 0 73px; }
  .site-header .brand-logo { height:70px; }
  .site-header .header-actions { margin-left:auto; gap:8px; padding:5px 11px; }
  .site-header .header-button { font-size:12px; padding:8px 0; gap:7px; min-height:44px; }
  .site-header .header-button .button-icon { width:24px; height:24px; }
  .site-header .header-instagram { width:33px; flex-basis:33px; }
  .site-header .header-instagram img { width:27px; height:27px; }
  .hero-scene { height:auto; max-height:none; padding-top:0; }
  .hero-gallery { position:relative; inset:auto; width:100%; height:clamp(320px,90vw,470px); border-radius:0 0 52px 0; }
  .hero-slide img { object-position:50% 48%; }
  .hero-slide:nth-child(2) img { object-position:58% 45%; }
  .hero-slide:nth-child(3) img { object-position:52% 42%; }
  .photo-hero .hero-content { position:relative; left:auto; top:auto; margin:-58px 0 0; padding:0 24px; width:100%; }
  .hero-place { display:none; }
  .photo-hero h1 { font-size:clamp(24px,6.8vw,36px); line-height:1.62; letter-spacing:.005em; }
  .photo-hero h1>span { margin-bottom:4px; padding:0 10px 3px 0; }
  .photo-hero h1>span:nth-child(2),.photo-hero h1>span:nth-child(3) { padding-left:0; margin-left:0; }
  .photo-hero .hero-lead { font-size:14px; margin-top:18px; padding:0; line-height:1.9; }
  .hero-scroll { margin-top:16px; font-size:11px; }
  .montage-print { width:65%; left:17.5%; top:28%; padding:6px 6px 10px; }
  .montage-print span { font-size:12px; padding-top:6px; }
  .print-one { --shift:-11%; --turn:-12deg; }
  .print-two { --shift:10%; --turn:10deg; }
  .print-three { top:29%; }
  .recruitment-band { grid-template-columns:1fr; gap:20px; margin:32px 24px 0; padding:25px 0 30px; border-top:1px solid #dce4e2; }
  .recruit-pill { display:flex; flex-wrap:wrap; column-gap:10px; align-items:center; }
  .recruit-pill>span { font-size:14px; margin:0; }
  .recruit-pill small { font-size:11px; margin-left:4px; }
  .recruit-pill strong { font-size:19px; }
  .recruit-target { margin-top:4px; font-size:12px; }
  .recruit-intro { display:none; }
  .photo-hero .hero-button { font-size:14px; min-height:60px; padding:13px 17px; }
  .photo-hero .hero-note { font-size:11px; }
  .quick-links { display:grid; grid-template-columns:1fr 1fr; gap:0 19px; margin:0 24px; padding:12px 0 16px; }
  .quick-links a { font-size:12px; min-height:48px; gap:7px; }
  .quick-links a>span { width:21px; height:21px; }
}
@media(max-width:360px) {
  .site-header { left:12px; right:12px; }
  .site-header .header-actions { gap:3px; padding:4px 9px; }
  .site-header .header-button { font-size:11px; }
  .photo-hero .hero-content { padding-left:20px; padding-right:20px; }
  .photo-hero h1 { font-size:24px; }
  .recruitment-band { margin-left:20px; margin-right:20px; }
  .recruit-pill { display:block; }
  .recruit-pill strong { display:block; margin-top:3px; }
}
@media(prefers-reduced-motion:reduce) { .photo-montage { display:none; } .hero-slide { transition:none; } }

/* Give the new everyday photographs their own place in the story. */
.homework-note { grid-template-columns: .9fr 1.1fr; align-items:start; }
.homework-note .daily-heading { grid-column:1; grid-row:1; }
.homework-note .daily-copy { grid-column:1; grid-row:2; }
.homework-memory { grid-column:2; grid-row:1 / span 2; margin:0; padding:0; background:none; box-shadow:none; transform:none; }
.homework-memory::before { display:none; }
.homework-memory .photo-window { border-radius:25px 6px 25px 6px; }
.homework-memory img { width:100%; height:100%; aspect-ratio:1 / 1; object-fit:cover; object-position:50% 45%; }
.homework-memory figcaption { text-align:left; margin:16px 4px 0; font-size:13px; line-height:1.9; }
.homework-note .routine-track { grid-column:1 / -1; grid-row:3; }
.intro-daily-photo .photo-window img { object-position:center 58%; }
@media(max-width:760px) {
  .homework-note { grid-template-columns:1fr; }
  .homework-note .daily-heading, .homework-note .daily-copy, .homework-memory, .homework-note .routine-track { grid-column:1; grid-row:auto; }
  .homework-memory { margin:10px 0 0; }
  .homework-memory img { aspect-ratio:4 / 3; object-position:50% 38%; }
  .hero-slide img { object-position:50% 45%; }
  .hero-slide:nth-child(2) img { object-position:49% 60%; }
  .hero-slide:nth-child(3) img { object-position:49% 45%; }
}

.staff-video-memory .photo-window { aspect-ratio:16 / 9; background:#f0efe8; }
.staff-video { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; }

.video-hint { display:block; margin-top:4px; font-size:12px; color:#586e76; }