/* Design handoff r02 for guides and other second-level pages. Loaded after guide.css. */
:root{--bg:#fffaf0;--ink:#151615;--ink-2:#62635e;--hair:#dedbd2;--soft:#f4f0e7;--blue:#1f4ff5;--marker:#ffdc3e}
body{background:#fffaf0}
h1,h2{font-family:Georgia,serif;font-weight:700;letter-spacing:-.035em}
.nav{background:#fffaf0ed}
.tile{border-radius:20px!important;background-color:#ffdc3e}
.card{border-radius:14px!important}
.list>a,.list .entry{border-radius:16px}
.buy{background:#ffdc3e!important;border-radius:18px;padding:28px!important}
.btn-black{background:#1f4ff5!important;border-radius:10px!important}
article{background:white;border:1px solid #dedbd2;border-radius:18px;padding:28px}
.trail a{color:#1f4ff5}
.head h1{font-size:clamp(38px,5vw,68px);line-height:1.05}
.head{padding-top:30px}
footer{background:#151615;color:white}
a:focus-visible,button:focus-visible{outline:3px solid #1f4ff5;outline-offset:4px}
@media(max-width:700px){article{padding:20px}
.head h1{font-size:40px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
}


/* Revision 04 review: guide tiles use the homepage illustrations, not the collage. */
.tile.ill{background:#fff8eb!important;background-image:none!important;border:1px solid #ece6d8;padding:0!important;place-items:stretch}
.tile.ill::after{display:none}
.tile.ill .tile-art{position:absolute;inset:6% 8% 18%;width:84%;height:76%;object-fit:contain}
.tile.ill .tile-gif{inset:10% 16% 24%;width:68%;height:66%;object-fit:cover;border-radius:12px;outline:3px solid #fa5638;outline-offset:3px}
.tile.ill .card{position:absolute;right:5%;bottom:6%;width:auto;max-width:min(64%,270px);padding:10px 12px;font-size:12.5px;gap:6px;
  background:rgba(255,250,240,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(21,22,21,.12)}
.tile.ill .card.dark{background:rgba(24,28,36,.9)}
.tile.ill .card .loupe{width:44px;height:44px;border-width:3px}
.list .tile.ill{padding:0!important}
/* Buttons match the homepage: rounded rectangle, 44px tall. */
.btn{border-radius:12px!important;min-height:44px}
.back{border-radius:12px!important;min-height:44px}
.releases .chip{background:#ffdc3e!important;color:#151615}
@media(max-width:700px){.tile.ill .card{max-width:60%;font-size:11.5px;padding:8px 10px}.tile.ill .card .row:last-child:not(:first-child){display:none}}
.list .tile.ill .card .row:last-child:not(:first-child){display:none}
.tile.ill .card .chips i{white-space:nowrap}
/* Option B: drawing to the upper left, evidence lower right, translucent, inside the tile. */
.tile.ill .tile-art{inset:5% auto auto 3%;width:62%;height:74%;object-position:center top}
.tile.ill .tile-gif{inset:8% auto auto 8%;width:58%;height:64%}
.tile.ill .card{right:16px;bottom:16px;max-width:min(52%,280px);background:rgba(255,250,240,.82);box-shadow:0 6px 16px rgba(23,33,62,.16)!important}
.tile.ill .card.dark{background:rgba(24,28,36,.86)}
@media(max-width:700px){.tile.ill .card{max-width:56%}}
/* The clipboard character: further left and smaller so the held files stay clear of the panel. */
.tile.ill .tile-art[src$="/clipboard.webp"]{left:1%;width:52%;height:62%}
.tile.ill .tile-art[src$="/paste.webp"]{left:1%;width:56%;height:64%}