/* Editorial chapters. Each sample has its own photographic subject and rhythm. */
html { scroll-padding-top: 130px; }
.demo-header { position:sticky; top:0; z-index:15; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 0 0 24px var(--paper); }
.demo-chapter { padding-block:70px; }
.demo-chapter h2 { margin-bottom:24px; }
.demo-chapter h2>span { display:block; }
.demo-chapter p { text-wrap:pretty; }
.demo-chapter figure { min-width:0; }
.demo-chapter .demo-text-link { margin-top:24px; }
.demo-chapter figcaption { font-size:13px; line-height:1.8; }
.demo-chapter figcaption>span:first-child { font:500 11px/1.7 Arial,sans-serif; letter-spacing:.1em; }
.demo-chapter img { object-fit:cover; }
.demo-hero-copy,.demo-chapter>div,.demo-chapter>figure { min-width:0; }
.demo-header a { text-underline-offset:6px; }
.demo-header a:active { opacity:.7; }

/* NOMA: a table setting and the pace of a quiet cafe. */
.cafe-table { position:relative; display:grid; grid-template-columns:1.15fr 1fr; gap:80px; align-items:center; border-top:1px solid var(--line); padding-block:70px 85px; }
.cafe-table figure { position:relative; }
.cafe-table figure img { aspect-ratio:1.12; border-radius:0 0 90px 0; }
.cafe-table figcaption { margin-top:14px; font:500 11px/1.7 Arial,sans-serif; letter-spacing:.1em; }
.cafe-table h2 { font:500 34px/1.8 var(--serif); }
.cafe-table>div>p+p { margin-top:22px; }
.cafe-table-mark { position:absolute; left:25px; top:30px; z-index:1; padding:14px 22px; background:var(--paper); font:italic 30px/1.05 Georgia,serif; transform:rotate(-9deg); }

/* mellow: a real hairstyle silhouette instead of another salon interior. */
.salon-style { display:grid; grid-template-columns:1fr .85fr; gap:100px; align-items:center; border-top:1px solid var(--line); }
.salon-style-copy { position:relative; padding-bottom:65px; }
.salon-style-copy>p:not([class]) { line-height:2.3; }
.salon-style figure { max-width:470px; }
.salon-style figure img { aspect-ratio:4/5; object-position:48% center; border-radius:2px 160px 2px 2px; }
.salon-style figcaption { font:500 11px/1.8 Arial,sans-serif; letter-spacing:.09em; margin-top:14px; }
.salon-style-word { position:absolute; bottom:-18px; right:5px; font:italic 88px/1 Georgia,serif; color:#6b7d6666; letter-spacing:-.07em; }

/* nagi: an arrangement acts as an atmospheric background, with solid paper text. */
.flowers-living { position:relative; isolation:isolate; padding-block:65px; margin-block:15px 35px; }
.flowers-living>img { position:absolute; inset:0; width:100%; height:100%; object-position:60% center; z-index:-1; }
.flowers-living-paper { background:#f4f2ebf5; padding:40px 42px; width:min(480px,48%); }
.flowers-living-paper>p+p { margin-top:22px; }
.flowers-living-paper h2 { font-size:30px; }

/* SŌ CRAFT: reveal the finished object in its everyday setting. */
.craft-life { border-top:1px solid var(--line); padding-bottom:55px; }
.craft-life-heading { display:flex; justify-content:space-between; gap:45px; align-items:flex-end; margin-bottom:35px; }
.craft-life-heading h2 { margin:0; font-weight:450; }
.craft-life-heading>p { max-width:360px; padding-bottom:5px; }
.craft-life>figure>img { width:100%; aspect-ratio:2/1; object-position:center 56%; }
.craft-life figcaption { display:flex; justify-content:space-between; align-items:center; gap:25px; padding-top:18px; }

/* PLAIN: show the conversation, then the work it makes possible. */
.business-path { background:var(--soft); }
.business-path-intro { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:75px; }
.business-path-intro h2 { font-size:34px; line-height:1.7; font-weight:750; margin:0; }
.business-path-intro figure img { aspect-ratio:1.5; object-position:center 40%; border-radius:0 55px 0 0; }
.business-path-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:48px 0 0; gap:36px; counter-reset:path; }
.business-path-steps li { border-top:1px solid var(--line); padding-top:22px; }
.business-path-steps li>span { font:750 38px/1 Arial,sans-serif; color:var(--accent); display:block; margin-bottom:16px; }
.business-path-steps h3 { font-size:23px; margin-bottom:12px; }
.business-path-steps p { font-size:14px; line-height:2; }

/* PACE.: a welcoming first visit, with three concrete points. */
.fitness-first { display:grid; grid-template-columns:1.08fr 1fr; gap:75px; align-items:center; border-top:1px solid var(--line); }
.fitness-first>figure img { aspect-ratio:1.15; border-radius:70px 0 0 0; object-position:47% center; }
.fitness-first figcaption { color:var(--accent); font:600 11px/1.7 Arial,sans-serif; letter-spacing:.1em; margin-top:13px; }
.fitness-first h2 { font-size:30px; line-height:1.75; font-weight:800; }
.fitness-first-steps { list-style:none; padding:0; }
.fitness-first-steps li { display:grid; grid-template-columns:30px 1fr; gap:16px; border-top:1px solid var(--line); padding-block:18px; }
.fitness-first-steps li>span { font:800 20px/1.5 Arial,sans-serif; color:var(--accent); }
.fitness-first-steps h3 { font-size:18px; margin-bottom:7px; }
.fitness-first-steps p { font-size:14px; line-height:1.9; }

/* frame / studio: a portfolio with four subjects and varied image proportions. */
.demo--photographer .photo-approach { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-block:70px 25px; }
.demo--photographer .photo-approach>div { width:auto; margin:0; padding:0; background:none; }
.photo-approach>div>p:not([class]) { max-width:490px; }
.photo-selected { padding-top:35px; }
.photo-selected-heading { display:grid; grid-template-columns:1fr auto; gap:15px 40px; align-items:end; margin-bottom:36px; }
.photo-selected-heading>.demo-kicker { grid-column:1/-1; margin:0; }
.photo-selected-heading h2 { font-size:29px; margin:0; font-weight:450; }
.photo-selected-heading>p:not([class]) { font-size:14px; }
.photo-work-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:48px 36px; align-items:start; }
.photo-work { grid-column:span 5; }
.photo-work--1 img,.photo-work--3 img { aspect-ratio:4/5; }
.photo-work--2 { grid-column:7/-1; padding-top:80px; }
.photo-work--2 img,.photo-work--4 img { aspect-ratio:1.5; }
.photo-work--3 { grid-column:2/7; }
.photo-work--4 { grid-column:8/-1; padding-top:70px; }
.photo-work figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; padding-top:14px; }
.photo-work figcaption>span:last-child { font-size:13px; color:#c7ccd3; }
.photo-selected-note { font-size:13px; color:#c7ccd3; border-top:1px solid var(--line); padding-top:20px; margin-top:38px; }

/* komugi: two individual product stories, with warm paper and flour. */
.bakery-selection { border-top:1px solid var(--line); padding-bottom:40px; }
.bakery-selection-heading { position:relative; margin-bottom:34px; padding-right:160px; }
.bakery-selection-heading h2 { margin:0; }
.bakery-selection-heading>span { position:absolute; right:12px; bottom:0; font:italic 35px/1.1 Georgia,serif; color:var(--accent); transform:rotate(-9deg); }
.bakery-product-pair { display:grid; grid-template-columns:1fr 1fr; gap:55px; }
.bakery-product-pair figure:nth-child(2) { padding-top:65px; }
.bakery-product-pair img { aspect-ratio:4/3; border-radius:4px; }
.bakery-product-pair figure:first-child img { border-radius:3px 80px 3px 3px; }
.bakery-product-pair figcaption { padding:22px 3px 0; }
.bakery-product-pair figcaption>span { color:var(--accent); }
.bakery-product-pair h3 { font-size:23px; margin:13px 0 12px; font-family:var(--serif); }
.bakery-product-pair p { font-size:15px; line-height:2; }

/* sumu.: shop and home workspace, rather than two similar living rooms. */
.interior-scenes { background:#e3e1d9; padding-bottom:50px; }
.interior-scenes-heading { display:grid; grid-template-columns:1fr auto; gap:15px 40px; align-items:end; margin-bottom:40px; }
.interior-scenes-heading>.demo-kicker { grid-column:1/-1; margin:0; }
.interior-scenes-heading h2 { margin:0; font-weight:450; }
.interior-scene { display:grid; grid-template-columns:1.4fr 1fr; gap:45px; align-items:end; }
.interior-scene img { aspect-ratio:1.4; }
.interior-scene figcaption { padding-bottom:15px; }
.interior-scene h3 { font-weight:500; font-size:24px; margin:16px 0 18px; }
.interior-scene p { font-size:15px; }
.interior-scene--study { grid-template-columns:1fr 1.3fr; margin:55px 0 0 85px; }
.interior-scene--study img { grid-column:2; grid-row:1; }
.interior-scene--study figcaption { grid-column:1; grid-row:1; }
.interior-scenes-note { margin-top:35px; border-top:1px solid var(--line); padding-top:20px; font-size:13px; }

/* tane: hands-on learning and a sequence that reads like a small workbook. */
.learning-make { background:var(--soft); padding-block:65px; }
.learning-make-intro { display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:center; }
.learning-make-intro figure { background:#fffcf2; padding:12px 12px 18px; transform:rotate(-2deg); box-shadow:7px 7px 0 #cfc398; }
.learning-make-intro figure img { aspect-ratio:1.2; }
.learning-make-intro figcaption { font:500 11px/1.7 Arial,sans-serif; letter-spacing:.1em; text-align:center; padding-top:12px; }
.learning-make-intro h2 { font-weight:800; }
.learning-make-intro>div>p:not([class]) { line-height:2.3; }
.learning-make-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; list-style:none; padding:55px 0 0; }
.learning-make-steps li { border-top:1px dashed #23594f80; padding-top:22px; position:relative; }
.learning-make-steps li>span { display:inline-grid; place-items:center; background:#e5bf4c; border-radius:50% 50% 50% 3px; width:46px; height:46px; font:800 17px Arial,sans-serif; }
.learning-make-steps h3 { margin:16px 0 12px; font-size:25px; }
.learning-make-steps p { font-size:14px; line-height:2; }

@media (max-width:999px) {
  .demo-chapter { padding-block:55px; }
  .cafe-table,.salon-style,.business-path-intro,.fitness-first,.learning-make-intro { gap:40px; }
  .cafe-table h2,.business-path-intro h2,.interior-scenes h2 { font-size:29px; }
  .salon-style h2,.fitness-first h2,.learning-make h2 { font-size:27px; }
  .salon-style-word { font-size:70px; }
  .flowers-living-paper { padding:30px; width:50%; }
  .flowers-living-paper h2 { font-size:27px; }
  .craft-life-heading { gap:25px; }
  .craft-life-heading h2 { font-size:27px; }
  .craft-life-heading>p { font-size:14px; }
  .demo--photographer .photo-approach { gap:40px; }
  .photo-work-grid { gap:36px 24px; }
  .photo-selected-heading h2 { font-size:25px; }
  .bakery-product-pair { gap:32px; }
  .bakery-product-pair h3 { font-size:21px; }
  .bakery-product-pair p { font-size:14px; }
  .interior-scenes-heading { grid-template-columns:1fr; }
  .interior-scene { gap:30px; grid-template-columns:1.2fr 1fr; }
  .interior-scene h3 { font-size:22px; }
  .interior-scene p { font-size:14px; }
  .interior-scene--study { margin-left:30px; grid-template-columns:1fr 1.2fr; }
}
@media (max-width:759px) {
  html { scroll-padding-top:110px; }
  .demo-header { box-shadow:0 0 0 20px var(--paper); }
  .demo-chapter { padding-block:42px; }
  .demo-chapter h2 { font-size:27px; margin-bottom:20px; }
  .demo-chapter p { font-size:14px; }
  .demo-chapter .demo-kicker { font-size:11px; }
  .cafe-table,.salon-style,.business-path-intro,.fitness-first,.learning-make-intro { display:flex; flex-direction:column; gap:28px; align-items:stretch; }
  .cafe-table { padding-top:45px; }
  .cafe-table figure { margin-top:8px; }
  .cafe-table figure img { aspect-ratio:1.2; border-radius:0 0 65px 0; }
  .cafe-table-mark { font-size:25px; top:28px; left:14px; padding:10px 16px; }
  .cafe-table>div>p+p { margin-top:18px; }
  .salon-style { position:relative; gap:24px; }
  .salon-style-copy { padding-bottom:0; }
  .salon-style figure { width:min(88%,390px); margin-left:auto; }
  .salon-style figure img { border-radius:2px 120px 2px 2px; }
  .salon-style-word { position:relative; display:block; text-align:right; font-size:65px; margin:-12px 10px -20px 0; }
  .flowers-living { padding:0; margin-block:5px 15px; }
  .flowers-living>img { position:relative; width:100%; aspect-ratio:1.35; height:auto; object-position:80% center; }
  .flowers-living>.demo-container { width:100%; }
  .flowers-living-paper { width:auto; padding:30px 24px 35px; background:#e7eae0; }
  .craft-life-heading { display:block; margin-bottom:28px; }
  .craft-life-heading>p { margin-top:22px; }
  .craft-life>figure>img { aspect-ratio:1.2; object-position:48% center; }
  .craft-life figcaption { display:block; }
  .craft-life figcaption>span { display:block; }
  .craft-life figcaption>span+span { margin-top:6px; font-size:13px; }
  .business-path-intro figure img { border-radius:0 45px 0 0; }
  .business-path-steps { grid-template-columns:1fr; gap:0; padding-top:30px; }
  .business-path-steps li { display:grid; grid-template-columns:45px 1fr; gap:8px 15px; padding-block:22px; }
  .business-path-steps li>span { grid-row:1/3; margin:0; font-size:30px; }
  .business-path-steps h3 { font-size:22px; margin:0; }
  .fitness-first>figure img { aspect-ratio:1.2; border-radius:55px 0 0 0; object-position:50% center; }
  .fitness-first-steps li { padding-block:16px; }
  .demo--photographer .photo-approach { display:block; padding-block:45px 10px; }
  .demo--photographer .photo-approach>div+div { margin-top:23px; }
  .photo-selected-heading { display:block; margin-bottom:28px; }
  .photo-selected-heading>.demo-kicker { margin-bottom:18px; }
  .photo-selected-heading h2 { font-size:25px; }
  .photo-selected-heading>p:not([class]) { margin-top:18px; }
  .photo-work-grid { display:block; }
  .photo-work { padding:0; width:100%; margin:0 0 32px; }
  .photo-work--1 { width:85%; }
  .photo-work--3 { width:85%; margin-left:auto; }
  .photo-work figcaption { display:block; padding-top:11px; }
  .photo-work figcaption>span { display:block; }
  .photo-work figcaption>span+span { margin-top:4px; }
  .photo-selected-note { font-size:13px!important; margin-top:10px; }
  .bakery-selection-heading { padding-right:0; margin-bottom:26px; }
  .bakery-selection-heading>span { position:relative; display:block; text-align:right; font-size:28px; margin-top:15px; padding-right:15px; }
  .bakery-product-pair { grid-template-columns:1fr; gap:35px; }
  .bakery-product-pair figure:nth-child(2) { padding-top:0; width:92%; margin-left:auto; }
  .bakery-product-pair figcaption { padding-top:18px; }
  .bakery-product-pair h3 { margin:12px 0 10px; }
  .interior-scenes-heading { display:block; margin-bottom:28px; }
  .interior-scenes-heading>.demo-kicker { margin-bottom:18px; }
  .interior-scenes-heading>p:not([class]) { margin-top:20px; }
  .interior-scene,.interior-scene--study { display:flex; flex-direction:column; gap:20px; align-items:stretch; margin:0; }
  .interior-scene--study { margin-top:32px; }
  .interior-scene h3 { font-size:22px; margin:12px 0; }
  .interior-scene figcaption { padding:0; }
  .interior-scenes-note { font-size:13px!important; margin-top:28px; }
  .learning-make-intro figure { width:calc(100% - 12px); margin-inline:3px; padding:9px 9px 14px; }
  .learning-make-steps { grid-template-columns:1fr; padding-top:30px; gap:22px; }
  .learning-make-steps li { display:grid; grid-template-columns:46px 1fr; gap:5px 18px; padding-top:20px; }
  .learning-make-steps li>span { grid-row:1/3; }
  .learning-make-steps h3 { font-size:23px; margin:0; }
}
@media (max-width:374px) {
  .demo-chapter h2 { font-size:24px; letter-spacing:.015em; }
  .flowers-living-paper { padding-inline:20px; }
  .salon-style-word { font-size:56px; }
  .bakery-product-pair h3,.interior-scene h3 { font-size:20px; }
}