/* Outdoors with Juan — prototype, original photographs from the user's website archive */
:root{--ink:#21312a;--forest:#173d32;--forest-dark:#0e2820;--sage:#71867a;--cream:#f7f5ef;--paper:#fcfbf8;--line:#deded5;--amber:#bd935d;--muted:#637168;--max:1176px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #c9a675;outline-offset:4px}button{font:inherit}strong{font-weight:650}.wrap{max-width:var(--max);padding:0 30px;margin:auto}.preview{font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:center;background:var(--forest-dark);color:#e0e8df;padding:8px 16px}.site-header{background:#fbfbf8;border-bottom:1px solid #e8e7e0;position:relative;z-index:4}.head-inner{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-mark{border:1.6px solid var(--forest);width:45px;height:45px;border-radius:50%;display:grid;place-items:center;color:var(--forest)}.brand-mark svg{width:29px;height:29px}.brand-name{font:700 18px/.98 Georgia,serif;letter-spacing:-.025em;display:flex;flex-direction:column}.brand-name em{font:600 9px/1.7 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.28em;color:var(--muted);font-style:normal;margin-top:5px}.nav{display:flex;align-items:center;gap:30px}.nav a{font-size:12px;font-weight:650;letter-spacing:.065em;text-transform:uppercase;transition:color .2s}.nav a:hover,.nav a.active{color:#8b6a3e}.nav .nav-contact{border:1px solid #bdc5bc;padding:11px 15px;border-radius:2px}.menu-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.2em;font-weight:750;color:#af8650}.section-pad{padding:86px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:30px}.section-head h2,.section-title{font:normal clamp(31px,3.7vw,49px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin:8px 0 0}.section-head p{margin:0;color:var(--muted);max-width:340px;font-size:14px}.text-link{display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid var(--amber);font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.1em;padding-bottom:6px}.text-link:hover{color:#956b3a}.hero{min-height:min(690px,73vw);height:660px;position:relative;display:flex;align-items:end;color:white;overflow:hidden;background:#4c6248}.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 54%}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,22,18,.67),rgba(10,22,18,.18) 70%),linear-gradient(0deg,rgba(9,23,20,.55),transparent 70%);z-index:1}.hero-content{position:relative;z-index:2;width:100%;padding-bottom:88px}.hero .eyebrow{color:#f5d9ac}.hero h1{font:normal clamp(48px,6.3vw,89px)/1.02 Georgia,serif;max-width:820px;letter-spacing:-.055em;margin:22px 0 22px}.hero p{font-size:17px;max-width:540px;color:#f4f3ed;line-height:1.72;margin:0 0 28px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:15px;padding:15px 23px;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.12em;border:1px solid transparent;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-solid{background:#e2bb82;color:var(--forest-dark)}.btn-solid:hover{background:#f4d1a0}.btn-outline{color:white;border-color:rgba(255,255,255,.7)}.btn-forest{background:var(--forest);color:#fff}.actions{display:flex;flex-wrap:wrap;gap:12px}.hero-photo-credit{position:absolute;right:30px;bottom:22px;z-index:2;font-size:10px;color:#f0ece5;letter-spacing:.04em}.values{border-bottom:1px solid var(--line);background:#f2f0e8}.values .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-top:24px;padding-bottom:24px}.value{display:flex;align-items:center;gap:12px;border-right:1px solid #d8d9d0}.value:last-child{border:0}.value .symbol{font:normal 26px/1 Georgia,serif;color:#9b784c}.value b{font-size:12px;letter-spacing:.03em}.value span{display:block;color:var(--muted);font-size:12px}.features{background:var(--paper)}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.story-card{display:block;min-width:0}.story-card img{width:100%;height:248px;object-fit:cover;transition:transform .35s}.story-card .image-frame{overflow:hidden;background:#ecece7}.story-card:hover img{transform:scale(1.035)}.story-card .category{display:block;color:#a77b45;font-size:10px;text-transform:uppercase;letter-spacing:.17em;font-weight:780;margin:19px 0 10px}.story-card h3{font:normal 27px/1.16 Georgia,serif;letter-spacing:-.025em;margin:0 0 10px}.story-card p{font-size:13px;line-height:1.75;color:var(--muted);margin:0 0 12px}.story-card .more{font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:780}.split{background:var(--cream);padding:0}.split-grid{display:grid;grid-template-columns:1.12fr .88fr;min-height:520px}.split-photo{width:100%;height:100%;object-fit:cover}.split-copy{padding:65px clamp(28px,5vw,78px);align-self:center;max-width:650px}.split-copy h2{font:normal clamp(35px,3.5vw,52px)/1.08 Georgia,serif;letter-spacing:-.04em;margin:14px 0 22px}.split-copy p{color:#606c62;margin-bottom:29px;max-width:440px}.photo-strip{background:#f8f8f4}.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:215px 215px;gap:12px}.mosaic img{width:100%;height:100%;object-fit:cover}.mosaic .tall{grid-row:span 2}.mosaic .wide{grid-column:span 2}.newsletter{background:var(--forest-dark);color:white;padding:78px 0}.newsletter-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}.newsletter h2{font:normal clamp(30px,4vw,51px)/1.12 Georgia,serif;letter-spacing:-.035em;max-width:640px;margin:13px 0 12px}.newsletter p{max-width:520px;color:#c6d3c9;margin:0}.foot{background:#14271f;color:#c1cfc3;padding:55px 0 30px}.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;padding-bottom:45px}.foot h3{font:normal 26px Georgia,serif;color:#fff;margin:0 0 14px}.foot p{max-width:380px;font-size:13px;line-height:1.8}.foot-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#e4e7df;margin-bottom:16px}.foot a{display:block;font-size:13px;padding:5px 0}.foot a:hover{color:white}.foot-bottom{border-top:1px solid #35463b;padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:11px}.page-hero{background:#edece6;padding:83px 0 72px}.page-hero .eyebrow{display:block}.page-hero h1{font:normal clamp(43px,6vw,74px)/1.05 Georgia,serif;letter-spacing:-.05em;max-width:900px;margin:17px 0 16px}.page-hero p{max-width:680px;font-size:16px;color:var(--muted);margin:0}.article-hero{padding-top:54px;padding-bottom:48px;background:var(--paper)}.breadcrumbs{font-size:11px;color:var(--muted);margin-bottom:28px}.breadcrumbs a{text-decoration:underline;text-underline-offset:4px}.article-hero h1{font:normal clamp(50px,6vw,80px)/1.04 Georgia,serif;max-width:900px;margin:15px 0}.article-meta{color:#758076;font-size:12px;letter-spacing:.035em}.article-cover{height:510px;width:100%;object-fit:cover}.article-body{max-width:790px;margin:0 auto;padding:48px 30px 90px}.article-body .lead{font:normal 25px/1.55 Georgia,serif;color:#34483b}.article-body p{line-height:1.95;color:#536158;font-size:16px}.article-body h2{font:normal 36px Georgia,serif;margin:38px 0 12px}.article-image{margin:34px 0}.article-image img{width:100%;max-height:560px;object-fit:cover}.article-image figcaption{margin-top:9px;font-size:12px;color:#727d75}.archive-note{background:#f0eee7;border-left:3px solid #b8935f;padding:18px 21px;font-size:13px;color:#5a685e;margin:38px 0}.subtle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.intro-text{font-size:17px;max-width:740px;color:var(--muted);line-height:1.9}.photo-legend{font-size:12px;color:var(--muted);margin-top:14px}.about-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:55px;align-items:center}.about-layout img{width:100%;height:420px;object-fit:cover}.about-layout h2{font:normal 45px/1.12 Georgia,serif;margin:10px 0 23px}.about-layout p{color:var(--muted)}
@media(max-width:940px){.head-inner{min-height:72px}.nav{gap:16px}.nav a{font-size:11px}.split-grid{grid-template-columns:1fr 1fr}.split-copy{padding:40px}.story-card img{height:210px}}
@media(max-width:690px){.wrap{padding:0 20px}.head-inner{min-height:74px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fbfbf8;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 8px 14px #00000012;padding:12px 20px 20px}.nav.open{display:flex}.nav a{padding:12px 0}.nav .nav-contact{padding:12px}.hero{height:610px;min-height:610px}.hero h1{font-size:53px}.hero p{font-size:15px}.hero-content{padding-bottom:70px}.hero-photo-credit{right:18px;bottom:13px}.values .wrap{grid-template-columns:1fr;gap:15px;padding-top:20px;padding-bottom:20px}.value{border-right:0;padding:0}.section-pad{padding:64px 0}.section-head{display:block}.section-head p{margin-top:14px}.cards{grid-template-columns:1fr;gap:34px}.story-card img{height:250px}.split-grid{grid-template-columns:1fr}.split-photo{height:300px}.split-copy{padding:48px 22px 56px}.mosaic{grid-template-rows:145px 145px;gap:7px}.newsletter-inner{display:block}.newsletter .btn{margin-top:26px}.foot-top{grid-template-columns:1fr 1fr}.foot-top>div:first-child{grid-column:span 2}.foot-bottom{display:block}.foot-bottom span{display:block;margin-top:8px}.page-hero{padding:60px 0}.article-cover{height:300px}.article-hero{padding-top:36px}.article-body .lead{font-size:21px}.subtle-grid{grid-template-columns:1fr}.about-layout{grid-template-columns:1fr;gap:28px}.about-layout img{height:280px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* OWJ brand refresh (October 2026) */
.brand-mark{width:58px;height:58px;flex:0 0 58px;border:0;border-radius:50%;display:block;color:var(--forest)}
.brand-mark svg{width:58px;height:58px;display:block}
.brand{gap:13px}
.brand-name{font:700 19px/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.018em;white-space:normal}
.brand-name em{font:500 10px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;letter-spacing:0;color:#4b6257;max-width:280px;margin-top:5px}
.nav{gap:22px}
.head-inner{min-height:93px}
@media(max-width:920px){.brand-mark,.brand-mark svg{width:49px;height:49px}.brand-mark{flex-basis:49px}.brand-name{font-size:17px}.brand-name em{font-size:9px;max-width:220px}}
@media(max-width:440px){.brand-name{font-size:16px}.brand-name em{font-size:8px;max-width:205px}.head-inner{min-height:79px}.wrap{padding-left:17px;padding-right:17px}}

.photo-gallery-offset{margin-top:70px}
.section-cream{background:var(--cream)}


/* OWJ 2026-10-23 — Mobile typography and flow QA candidate.
   Maintain the approved brand/logo; avoid fixed-height hero text clipping.
   Cross-browser phone validation, including Safari with enlarged text, still required. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:690px){
  .hero{
    height:auto;min-height:610px;min-height:min(700px,100svh);
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;
    overflow:hidden
  }
  .hero-content{padding-top:60px;padding-bottom:17px}
  .hero .eyebrow{font-size:12px;line-height:1.5;letter-spacing:.11em}
  .hero h1{font-size:clamp(37px,10.5vw,51px);line-height:1.04;margin:16px 0 18px;letter-spacing:-.045em}
  .hero p{font-size:16px;line-height:1.6;margin:0 0 24px;max-width:35rem}
  .hero .actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .hero .actions .btn{
    display:flex;width:100%;min-width:0;min-height:53px;
    justify-content:space-between;align-items:center;text-align:left;
    padding:14px 16px;font-size:13px;line-height:1.4;
    letter-spacing:.065em;overflow-wrap:break-word
  }
  .hero .actions .btn span[aria-hidden]{flex:0 0 auto;font-size:20px;line-height:1}
  .hero-photo-credit{
    position:relative;right:auto;bottom:auto;left:auto;
    align-self:flex-end;max-width:100%;padding:6px 17px 18px;
    font-size:11px;line-height:1.5;text-align:right;letter-spacing:.02em
  }
  .values .wrap{grid-template-columns:1fr;gap:21px;padding-top:22px;padding-bottom:24px}
  .value{align-items:flex-start;gap:14px;min-width:0}
  .value .symbol{flex:0 0 28px;font-size:24px;line-height:1.4;text-align:center}
  .value b{display:block;font-size:15px;line-height:1.4;letter-spacing:0}
  .value span{font-size:14px;line-height:1.5}
}
@media(max-width:365px){
  .hero-content{padding-top:42px}
  .hero h1{font-size:37px}
  .hero p{font-size:15px}
  .hero .actions .btn{font-size:12px;letter-spacing:.04em}
}


/* OWJ 2026-10-23 mobile v2: readable footer and photo-first mosaic at enlarged text sizes.
   No reduced global font sizing: support the visitor's chosen zoom. */
@media (max-width:690px){
  /* Give the footer links their own column rather than two narrow columns. */
  .foot-top{grid-template-columns:minmax(0,1fr);gap:26px;padding-bottom:32px}
  .foot-top>div:first-child{grid-column:auto}
  .foot-label{line-height:1.5;overflow-wrap:break-word}
  .foot a{line-height:1.5;overflow-wrap:break-word;padding:7px 0}
  .foot-bottom{line-height:1.7}
  /* Two readable photo columns, keeping the forest portrait and broad mountain view. */
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:180px 180px 210px;gap:10px}
  .mosaic img{min-width:0;width:100%;height:100%;object-fit:cover}
  .mosaic .tall{grid-row:span 2;grid-column:auto}
  .mosaic .wide{grid-row:auto;grid-column:span 2}
  .photo-strip .text-link{max-width:100%;line-height:1.5;overflow-wrap:break-word;min-height:44px}
}
@media (max-width:365px){
  /* With browser zoom/enlarged text, show each photograph at a useful width. */
  .mosaic{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:12px}
  .mosaic .tall,.mosaic .wide{grid-row:auto;grid-column:auto}
  .mosaic img{height:auto;aspect-ratio:4/3;object-fit:cover}
  .mosaic .tall{aspect-ratio:3/4}
  .mosaic .wide{aspect-ratio:16/10}
}


/* OWJ 2026-10-23 mobile header at increased page zoom:
   keep menu accessible while allowing the full approved wordmark/descriptor to wrap. */
@media (max-width:690px){
  .head-inner{
    display:grid;grid-template-columns:minmax(0,1fr) 44px;
    align-items:center;column-gap:10px;min-height:79px;
    padding-top:12px;padding-bottom:12px
  }
  .brand{min-width:0;max-width:100%;flex-shrink:1;gap:clamp(7px,2.5vw,13px)}
  .brand-mark{width:clamp(34px,10.5vw,49px);height:clamp(34px,10.5vw,49px);flex:0 0 clamp(34px,10.5vw,49px)}
  .brand-mark svg{width:100%;height:100%}
  .brand-name{min-width:0;max-width:100%;font-size:clamp(14px,4vw,17px);line-height:1.15;overflow-wrap:break-word}
  .brand-name em{font-size:clamp(8px,2.35vw,9px);line-height:1.3;max-width:100%;overflow-wrap:normal}
  .menu-toggle{display:block;position:relative;z-index:5;justify-self:end;
    width:44px;height:44px;min-width:44px;min-height:44px;padding:8px;margin:0}
  .menu-toggle span{width:24px;margin:5px auto}
  .preview{line-height:1.45;overflow-wrap:break-word}
}
@media (max-width:320px){
  .head-inner{column-gap:8px}
  .brand{gap:7px}
  .brand-mark{width:34px;height:34px;flex-basis:34px}
  .brand-name{font-size:14px}
  .brand-name em{font-size:8px}
}