/* The Tobi project uses the shared site shell and image viewer. */
.tobi-project { padding:64px 0 80px; background:#faf8f4; }
.tobi-story { max-width:1120px; margin:auto; padding:0 32px; color:#252a31; font:17px/1.65 Georgia,serif; }
.tobi-story p { font:inherit; color:inherit; margin:0 0 16px; }
.tobi-story a { color:#803823; text-underline-offset:4px; }
.tobi-hero { display:grid; grid-template-columns:.8fr 1.2fr; gap:36px; align-items:center; padding-bottom:46px; }
/* Opening only: restore the first draft's landscape composition. The source
   stays intact; this viewport rotates it and crops the unused outer margins. */
.tobi-hero > figure > a { position:relative; aspect-ratio:4/3; overflow:hidden; }
.tobi-story .tobi-hero img { position:absolute; width:97.297297%; max-width:none; height:auto; left:54.054054%; top:46.846847%; transform:translate(-50%,-50%) rotate(-90deg); }
.tobi-story .tobi-hero h1 { font-size:clamp(34px,5vw,56px); }
.tobi-story h1 { margin:16px 0 24px; font:normal clamp(38px,5.2vw,64px)/1.05 Georgia,serif; letter-spacing:-.035em; }
.tobi-story h2 { margin:0 0 13px; font:normal 28px/1.2 Georgia,serif; letter-spacing:-.015em; }
.tobi-story figure { margin:0; min-width:0; }
.tobi-story figure a { display:block; }
.tobi-story img { display:block; width:100%; height:auto; }
.tobi-story figcaption { color:#626970; margin:8px 0 0; font:13px/1.5 Arial,sans-serif; }
.tobi-story .tobi-pattern-link { display:inline-block; margin-top:12px; padding-bottom:3px; border-bottom:1px solid; font:600 15px/1.5 Arial,sans-serif; }
.tobi-step { border-top:1px solid #dcd8d1; padding:34px 0 38px; }
.tobi-step-heading { display:grid; grid-template-columns:48px 1fr; gap:13px; max-width:810px; margin-bottom:20px; }
.tobi-step-number { color:#8a3823; font:24px/1.2 Georgia,serif; padding-top:3px; }
.tobi-photos { display:grid; grid-template-columns:var(--photo-columns,repeat(2,minmax(0,1fr))); gap:20px; align-items:start; margin:22px 0 28px; }
.tobi-photos--single { max-width:800px; }
.tobi-photos--single:has(img[width="1200"][height="1600"]),.tobi-photos--single:has(img[width="1152"][height="1536"]) { max-width:600px; }
.tobi-step > p,.tobi-back-pocket > p { max-width:810px; }
.tobi-closing { border-top:1px solid #dcd8d1; padding-top:32px; }
.tobi-finished { margin:28px 0 0; max-width:960px; min-width:0; }
.tobi-closing .tobi-pattern-note { border:0; padding:0; max-width:780px; }
.tobi-photos--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
/* Match column widths to photo proportions: complete photographs, no padding bands. */
.tobi-photos--portrait-square { grid-template-columns:minmax(0,3fr) minmax(0,4fr); }
.tobi-photos--portrait-landscape { grid-template-columns:minmax(0,9fr) minmax(0,16fr); }
.tobi-result { border-top:1px solid #dcd8d1; padding:35px 0; }
.tobi-result .tobi-photos { margin-top:24px; }
.tobi-pattern-note { border-top:1px solid #dcd8d1; padding:30px 0 0; max-width:780px; }
.tobi-story a:focus-visible { outline:3px solid #803823; outline-offset:5px; }
@media(max-width:700px) {
  .tobi-project { padding:34px 0 50px; }
  .tobi-story { padding:0 22px; }
  .tobi-hero { grid-template-columns:1fr; gap:25px; padding-bottom:30px; }
  .tobi-story h1 { max-width:13ch; font-size:43px; }
  .tobi-story .tobi-hero h1 { font-size:43px; }
  .tobi-story h2 { font-size:26px; }
  .tobi-step { padding:28px 0; }
  .tobi-step-heading { grid-template-columns:33px 1fr; gap:8px; }
  .tobi-photos,.tobi-photos--three,.tobi-result .tobi-photos { grid-template-columns:1fr; gap:25px; }
}