@charset "UTF-8";
/*
Theme Name: Outside the Box Life
Description: An integrated title and a pencil-led desert garden, developing from sketch into soft color.
Version: 2.7.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: outside-the-box-life
*/
:root { color-scheme:light; --paper:#f5eddb; --ink:#284d43; --muted:#526b61; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:#d8dfba; color:var(--ink); }
.garden-page { min-height:100svh; display:flex; flex-direction:column; overflow:hidden; }
.garden { flex:1; display:flex; align-items:center; justify-content:center; margin:0; }
.canvas { width:100%; position:relative; margin:0; }
.garden-art { display:block; width:100%; height:auto; object-fit:contain; mask-image:linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent); }
.illustrated-title { position:absolute; z-index:1; top:5.6%; left:5%; width:57%; }
h1 { margin:0; font-family:Baskerville, "Palatino Linotype", "Book Antiqua", Georgia, serif; font-weight:400; font-size:clamp(40px, 4.9vw, 94px); line-height:1.08; letter-spacing:-.045em; }
.title-start { display:block; color:#52614f; }
.title-end { display:block; margin:0 0 0 23%; color:var(--ink); font-size:1.48em; line-height:1; font-style:italic; letter-spacing:-.055em; }
.footing { display:flex; align-items:flex-end; justify-content:flex-end; padding:18px 4.5vw 25px; }
.footer-identity { display:flex; align-items:center; gap:18px; }
.mark { display:block; width:27px; height:auto; }
.thought p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; letter-spacing:.005em; }
.domain { color:var(--muted); font-size:10px; letter-spacing:.035em; padding-bottom:3px; }
@media (max-width:760px) {
 .garden { min-height:350px; padding:20px 0; }
 .canvas { padding-top:55px; }
 .illustrated-title { top:8px; left:6%; width:72%; }
 h1 { font-size:8.2vw; line-height:1.1; }
 .title-start { color:#52614f; }
 .title-end { margin-left:24%; font-size:1.5em; }
 .footing { padding:20px 6vw 25px; }
 .footer-identity { gap:15px; }
 .mark { width:24px; }
 .thought p { font-size:12px; }
 .domain { font-size:9px; }
}

.custom-logo-link { display:block; line-height:0; flex-shrink:0; }
.custom-logo-link img { display:block; width:27px; max-height:35px; height:auto; object-fit:contain; }
.document { width:min(90%, 900px); margin:70px auto; line-height:1.7; }
.document h1 { font-size:clamp(35px, 6vw, 65px); line-height:1.1; margin-bottom:30px; }
.document a { color:var(--ink); }
.document img { max-width:100%; height:auto; }
.document .return-link { display:inline-block; margin-bottom:40px; }
@media (max-width:760px) { .custom-logo-link img { width:24px; max-height:32px; } }

/* Three stages of the same live lettering: searching graphite, clean pen, filled ink. */
.drawing-effects { position:absolute; pointer-events:none; overflow:hidden; }
.title-sketch { display:inline-block; position:relative; color:#687262; filter:url(#otbl-pencil-contour); }
.title-ink { color:var(--ink); }
@supports (-webkit-text-stroke:1px black) {
 .title-sketch { color:transparent; -webkit-text-stroke:.6px #687262; }
 .title-sketch::after { content:attr(data-pencil); position:absolute; top:0; left:0; font:inherit; letter-spacing:inherit; white-space:pre; color:transparent; -webkit-text-stroke:.3px #75806f; opacity:.42; transform:translate(.55px, -.35px); pointer-events:none; }
 .title-ink { color:transparent; -webkit-text-stroke:.75px var(--ink); }
}