/* Tiny Art Club: precise layout, handmade details. */
.reference-home .wrap { width:min(calc(100% - 2 * var(--page-gutter)),var(--content-width)); }
.reference-home .site-header { background:#fcf9f3; border:0; }
.reference-home .header-inner { height:75px; grid-template-columns:150px minmax(0,1fr) auto; }
.reference-home .brand-wordmark { width:auto; font-family:Georgia,'Times New Roman',serif; font-size:1.85rem; line-height:.91; letter-spacing:-.075em; }
.reference-home .main-nav a { font-size:.64rem; }
.reference-home .header-contact { padding:10px 20px; }
.reference-home h1,.reference-home h2,.reference-home h3 { letter-spacing:-.055em; }
.reference-home .button { min-height:44px; padding:10px 19px; font-size:.75rem; }
.reference-home .button svg { width:20px; height:20px; flex:none; }
.reference-home .hand-note { font-size:1.35rem; }

/* The image and copy share a stable two-column grid. */
.ref-hero { position:relative; display:grid; grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr); gap:var(--layout-gap); align-items:start; padding-block:32px 24px; }
.ref-hero-copy { position:relative; z-index:3; min-width:0; }
.ref-hero h1 { font-size:clamp(3.15rem,5vw,5.2rem); line-height:.97; }
.ref-hero-copy .hand-note { margin:18px 0 24px; line-height:1.45; transform:rotate(-2deg); }
.ref-hero .actions { gap:12px; }
.ref-hero-art { position:relative; min-width:0; aspect-ratio:4/3; }
.ref-hero-photo { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 47%; border-radius:1px; filter:saturate(.88) sepia(.05); }
.ref-scrap { position:absolute; z-index:2; display:block; clip-path:polygon(5% 0,34% 6%,64% 0,95% 5%,100% 91%,78% 100%,51% 95%,21% 100%,0 90%); }
.ref-scrap-ochre { left:0; top:5px; width:130px; height:100px; background:#d7c3a7; transform:rotate(-12deg); }
.ref-scrap-pink { right:-8px; top:1px; width:112px; height:112px; background:#dfa5a1; transform:rotate(7deg); }
.ref-house-sketch { position:absolute; z-index:3; left:4%; top:105px; width:110px; height:110px; color:#332e2b; filter:drop-shadow(0 1px 0 #fff); }
.ref-tape { position:absolute; z-index:3; display:block; width:93px; height:24px; background:#cec3b1a8; clip-path:polygon(0 4%,100% 0,97% 100%,2% 92%); }
.ref-tape-hero { left:0; top:3px; transform:rotate(-18deg); }
.ref-hero-crosses { position:absolute; z-index:3; right:3px; bottom:-22px; width:58px; height:58px; }
.ref-left-scrap { position:absolute; left:-95px; bottom:-55px; width:130px; height:95px; background:#dfb562; clip-path:polygon(0 0,100% 8%,87% 100%,0 88%); transform:rotate(-11deg); }
.ref-left-doodle { position:absolute; left:-85px; bottom:12px; width:90px; height:65px; transform:rotate(93deg); }

/* Four existing illustrations, equal stages and text baselines. */
.ref-activities { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--layout-gap); padding-block:24px 48px; }
.ref-activity { display:grid; grid-template-rows:112px 2.4em auto; gap:8px; justify-items:center; align-content:start; min-width:0; text-align:center; }
.ref-activity > svg { width:120px; height:110px; margin:0; align-self:center; transition:transform .2s; }
.ref-activity:hover > svg { transform:rotate(-6deg) translateY(-3px); }
.ref-activity h2 { display:grid; align-content:center; font-family:Arial,Helvetica,sans-serif; font-size:1rem; font-weight:700; line-height:1.2; letter-spacing:-.015em; }
.ref-activity p { margin:0; font-size:.78rem; line-height:1.4; }
.ref-activity-star { position:absolute; right:0; top:16px; width:56px; height:56px; color:#b67962; transform:rotate(14deg); }

/* Paper depth is decoration; all schedule faces share a straight grid. */
.ref-schedule { position:relative; padding-block:0 32px; }
.ref-schedule-head { margin-bottom:24px; padding-right:64px; }
.ref-schedule h2 { font-size:2.25rem; letter-spacing:-.035em; }
.ref-schedule-grid,.ref-saturday-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:1fr; gap:24px; padding-right:10px; }
.ref-day { display:grid; grid-template-rows:32px 1fr; gap:12px; min-width:0; transform:none; }
.ref-day h3,.ref-saturday > h3 { margin:0; align-self:center; text-align:center; font-family:var(--serif); font-weight:400; font-size:1.35rem; line-height:1.2; letter-spacing:.015em; text-transform:uppercase; }
.ref-paper-box { position:relative; display:flex; flex-direction:column; justify-content:flex-start; gap:8px; min-width:0; min-height:164px; height:100%; padding:16px; background:#fffdf8; border:1.6px solid #a9857c; box-shadow:8px 8px 0 #eddcd2,9.5px 9.5px 0 #a9857c; }
.ref-paper-box:before { content:''; position:absolute; top:0; right:-8px; width:7px; height:100%; background:repeating-linear-gradient(45deg,#a9857c 0 1px,#fff9f4 1px 6px); }
.ref-paper-box:after { content:''; position:absolute; left:0; bottom:-8px; width:100%; height:7px; background:repeating-linear-gradient(45deg,#a9857c 0 1px,#fff9f4 1px 6px); }
.ref-session-title { margin:0; min-width:0; font-family:var(--hand); font-weight:400; font-size:1rem; line-height:1.45; letter-spacing:normal; overflow-wrap:break-word; }
.ref-session-times { margin:0; min-width:0; }
.ref-time-range { display:block; font-family:var(--serif); font-size:1.25rem; line-height:1.25; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ref-time-range + .ref-time-range { margin-top:8px; }
.ref-time-range time { display:inline; font:inherit; }
.ref-session-age { margin:0; font-size:.8125rem; line-height:1.4; }
.ref-saturday { position:relative; margin-top:32px; }
.ref-saturday > h3 { min-height:32px; margin-bottom:12px; }
.ref-schedule-rates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:32px; }
.ref-rate { display:grid; grid-template-rows:auto 1fr auto; align-items:start; gap:16px; min-width:0; padding:24px; color:var(--ink); }
.ref-rate-mini { background:var(--pink); }
.ref-rate-saturday { background:var(--sage); }
.ref-rate h3 { margin:0; font-family:var(--serif); font-size:1.5rem; font-weight:400; line-height:1.2; letter-spacing:-.035em; }
.ref-rate-prices { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:0; font-size:1rem; line-height:1.3; }
.ref-rate-prices > span { display:block; white-space:nowrap; }
.ref-rate-prices strong { font-family:var(--serif); font-weight:400; font-size:2.5rem; line-height:1.1; font-variant-numeric:tabular-nums; }
.ref-rate-note { margin:0; max-width:52ch; font-size:1rem; line-height:1.5; }
.ref-schedule-arrow { position:absolute; right:0; top:-16px; width:48px; height:48px; transform:rotate(65deg); }
.ref-schedule-crosses { position:absolute; right:-18px; bottom:-12px; width:48px; height:48px; transform:rotate(14deg); }

.ref-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.85fr); gap:16px; align-items:stretch; padding-block:16px 24px; }
.ref-gallery figure { aspect-ratio:4/3; min-width:0; overflow:hidden; background:#eee1d0; }
.ref-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.ref-gallery figure:hover img { transform:scale(1.035); }
.ref-gallery figure:first-child img { object-position:center 48%; }
.ref-gallery figure:nth-child(2) img { object-position:center 41%; }
.ref-gallery figure:nth-child(3) img { object-position:center 65%; }
.ref-gallery-note { position:relative; display:flex; align-items:center; justify-content:center; padding:16px 8px; font-size:1.55rem!important; line-height:1.45!important; transform:rotate(-5deg); }
.ref-gallery-note svg { position:absolute; right:2%; bottom:1%; width:43px; height:43px; color:#bb8c5a; }

.ref-birthday { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; margin-bottom:24px; }
.ref-birthday-photo { position:relative; min-height:0; aspect-ratio:1280/854; align-self:start; overflow:hidden; }
.ref-birthday-photo img { display:block; width:100%; height:auto; }
.ref-birthday-paper { position:relative; display:flex; flex-direction:column; align-items:start; justify-content:center; padding:32px; background:#dea9a2; }
.ref-birthday h2 { font-size:clamp(2.25rem,3.3vw,3.65rem); }
.ref-birthday p { max-width:430px; margin:16px 0 24px; font-size:.9rem; }
.ref-birthday-paper > svg { position:absolute; right:24px; bottom:16px; width:64px; height:52px; transform:rotate(13deg); }

.ref-summer { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr); align-items:stretch; min-height:320px; margin-bottom:48px; }
.ref-summer-paper { position:relative; z-index:2; display:flex; flex-direction:column; align-items:start; justify-content:center; padding:32px; background:#c6ceb9; }
.ref-summer h2 { font-size:clamp(2.3rem,3.4vw,3.7rem); }
.ref-summer p { max-width:535px; margin-top:12px; font-size:.85rem; }
.ref-summer .button { margin-top:24px; }
.ref-summer-art { position:relative; min-width:0; min-height:320px; overflow:hidden; background:#e6d7bd; }
.ref-summer-sky { position:absolute; inset:0; background:linear-gradient(140deg,#f0e4cf,#cbd6d2); }
.ref-summer-art:after { content:''; position:absolute; inset:auto 0 0; height:36%; background:#adc0aa; clip-path:polygon(0 50%,20% 18%,41% 47%,65% 23%,100% 54%,100% 100%,0 100%); }
.ref-summer-sun { position:absolute; right:8%; top:8%; width:88px; height:88px; color:#cb8d43; }
.ref-summer-house { position:absolute; z-index:2; bottom:20%; width:95px; height:92px; background:#e4a399; border:2px solid #62574d; }
.ref-summer-house:before { content:''; position:absolute; left:-6px; top:-39px; width:105px; height:40px; background:#ba8668; clip-path:polygon(0 100%,50% 0,100% 100%); }
.ref-summer-house i { position:absolute; left:34px; bottom:0; width:24px; height:46px; border:2px solid #62574d; background:#f0d5a8; }
.house-one { left:15%; transform:rotate(-6deg); }
.house-two { left:44%; bottom:15%; background:#dabe82; transform:rotate(8deg) scale(.8); }
.ref-summer-tent { position:absolute; z-index:3; right:5%; bottom:3%; width:125px; height:110px; transform:rotate(6deg); }
.ref-summer-art .hand-note { position:absolute; z-index:4; left:4%; bottom:7%; font-size:1.12rem; transform:rotate(-9deg); }
.reference-home .site-footer { padding-top:48px; }
.reference-home .site-footer h2 { font-size:2.6rem; }
.reference-home .footer-bottom { margin-top:40px; }

@media(max-width:1100px) {
  .reference-home .header-inner { grid-template-columns:120px minmax(0,1fr) auto; }
  .ref-hero h1 { font-size:clamp(3.1rem,5vw,4.7rem); }
  .ref-left-scrap,.ref-left-doodle { display:none; }
}
@media(max-width:960px) {
  .reference-home .header-inner { grid-template-columns:minmax(0,1fr) auto auto; }
  .reference-home .brand-wordmark { font-size:1.65rem; }
  .ref-hero { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ref-hero h1 { font-size:clamp(2.8rem,5.5vw,3.5rem); }
  .ref-house-sketch { width:85px; height:85px; top:80px; }
  .ref-activities { gap:16px; }
  .ref-activity > svg { width:104px; height:96px; }
  .ref-activity-star { width:42px; height:42px; top:8px; }
  .ref-schedule-grid,.ref-saturday-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ref-schedule-head { padding-right:0; }
  .ref-schedule-arrow,.ref-schedule-crosses { display:none; }
  .ref-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ref-gallery-note { grid-column:1/-1; min-height:88px; }
  .ref-birthday-paper,.ref-summer-paper { padding:24px; }
}
@media(max-width:700px) {
  .reference-home .header-inner { height:72px; }
  .ref-hero { grid-template-columns:minmax(0,1fr); gap:32px; padding-block:24px; }
  .ref-hero h1 { font-size:clamp(3rem,8.5vw,4.8rem); }
  .ref-hero-copy .hand-note { margin:16px 0 24px; font-size:1.18rem; }
  .ref-hero-art { width:100%; }
  .ref-left-scrap,.ref-left-doodle { display:none; }
  .ref-activities { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 16px; padding-block:24px 40px; }
  .ref-activity { grid-template-rows:104px 2.4em auto; }
  .ref-activity-star { right:0; top:8px; }
  .ref-schedule-head { display:block; }
  .ref-schedule h2 { font-size:2rem; }
  .ref-schedule-grid,.ref-saturday-row { gap:24px 16px; }
  .ref-schedule-rates { grid-template-columns:minmax(0,1fr); gap:16px; }
  .ref-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .ref-gallery figure:nth-child(3) { grid-column:1; }
  .ref-gallery-note { grid-column:2; min-height:0; padding:8px; font-size:1.25rem!important; }
  .ref-gallery-note svg { width:32px; height:32px; }
  .ref-birthday { grid-template-columns:minmax(0,1fr); }
  .ref-birthday-photo { aspect-ratio:1280/854; min-height:0; }
  .ref-birthday-paper { min-height:280px; padding-bottom:80px; }
  .ref-summer { grid-template-columns:minmax(0,1fr); }
  .ref-summer-paper { min-height:280px; }
  .ref-summer-art { min-height:260px; }
}
@media(max-width:430px) {
  .ref-paper-box { padding-inline:8px; }
  .reference-home .header-inner { grid-template-columns:minmax(0,1fr) auto; }
  .ref-hero h1 { font-size:clamp(2.55rem,10.6vw,3.5rem); }
  .ref-hero .actions { gap:8px; }
  .ref-hero .button { padding-inline:12px; font-size:.67rem; }
  .ref-house-sketch { top:65px; width:70px; height:70px; }
  .ref-scrap-ochre { width:90px; height:75px; }
  .ref-scrap-pink { right:0; width:72px; height:72px; }
  .ref-activity { grid-template-rows:88px 2.4em auto; }
  .ref-activity > svg { width:92px; height:84px; }
  .ref-activity h2 { font-size:.86rem; }
  .ref-activity p { font-size:.75rem; }
  .ref-gallery-note { font-size:1.08rem!important; }
  .ref-birthday h2,.ref-summer h2 { font-size:2.45rem; }
  .ref-summer-art { min-height:240px; }
  .house-one { left:5%; transform:rotate(-6deg) scale(.74); }
  .house-two { left:36%; transform:rotate(8deg) scale(.62); }
  .ref-summer-tent { width:90px; height:85px; }
}
@media(max-width:380px) {
  .ref-schedule-grid,.ref-saturday-row { grid-template-columns:minmax(0,1fr); }
  .ref-day h3,.ref-saturday > h3 { text-align:left; }
  .ref-paper-box { padding-inline:16px; }
}