/* Outdoor journal: native portfolio typography, color tokens, and motion. */
.outdoor-page { --ocean: #a5c7d1; --ocean-dim: rgba(165,199,209,.12); }
[data-theme="light"] .outdoor-page { --ocean: #386472; --ocean-dim: rgba(56,100,114,.1); }
.outdoor-shell,.outdoor-footer { width:min(100% - 96px,1184px); margin-inline:auto; }
.outdoor-shell { padding-top:128px; min-height:calc(100svh - 130px); }
.outdoor-intro { margin-bottom:48px; }
.outdoor-kicker { margin:0 0 20px; color:var(--muted); font:10px/1.5 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
.outdoor-intro h1,.session-intro h1 { margin:0; font:500 clamp(58px,7.8vw,104px)/.98 "Barlow Condensed",sans-serif; letter-spacing:-.035em; }
.outdoor-intro>p:last-child { max-width:520px; margin:24px 0 0; color:var(--body); font-size:23px; line-height:1.5; }
.places-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 0 22px; margin-bottom:30px; border-bottom:1px solid var(--hairline); }
.place-filters { display:flex; gap:8px; flex-wrap:wrap; }
.place-filters button { padding:11px 16px; border:1px solid transparent; border-radius:999px; color:var(--muted); background:transparent; font:15px "Barlow Semi Condensed",sans-serif; cursor:pointer; }
.place-filters button[aria-pressed="true"] { background:var(--surface-elevated); border-color:var(--hairline-strong); color:var(--text); }
.filter-count { margin-left:8px; font:10px "IBM Plex Mono",monospace; opacity:.65; }
.places-count { color:var(--muted); font:10px "IBM Plex Mono",monospace; }
.places-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.place-card { min-width:0; }
.place-card[hidden],.places-empty[hidden] { display:none; }
.place-link { display:block; border:1px solid var(--hairline-strong); border-radius:16px; background:var(--surface); overflow:hidden; color:var(--text); text-decoration:none; transition:transform 250ms var(--ease),border-color 200ms ease; }
.place-photo { position:relative; isolation:isolate; aspect-ratio:16/9; overflow:hidden; background:var(--canvas-soft); }
.photo-horizon { position:absolute; inset:0; overflow:hidden; opacity:.65; transition:transform 600ms var(--ease); background:radial-gradient(ellipse at 50% 80%,var(--ocean-dim),transparent 70%); }
.photo-horizon i { position:absolute; left:-25%; width:150%; height:150%; top:48%; border:1px solid var(--ocean); opacity:.22; border-radius:50%; transform:rotate(-12deg); }
.photo-horizon i:nth-child(2) { top:55%; }
.photo-horizon i:nth-child(3) { top:62%; }
.photo-horizon i:nth-child(4) { top:69%; }
.photo-horizon i:nth-child(5) { top:76%; }
.photo-pending { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--muted); font:11px "IBM Plex Mono",monospace; white-space:nowrap; }
.photo-location { position:absolute; bottom:20px; left:24px; color:var(--muted); font:9px "IBM Plex Mono",monospace; letter-spacing:.15em; }
.place-photo>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.place-copy { padding:18px 18px 0; }
.place-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font:9px/1.5 "IBM Plex Mono",monospace; }
.place-copy h2 { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:14px 0 8px; font:500 29px/1.1 "Barlow Condensed",sans-serif; letter-spacing:-.015em; }
.place-copy>p { margin:0; color:var(--body); font-size:15px; }
.place-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:19px 0; gap:10px; }
.place-stats>span { color:var(--muted); font-size:13px; }
.place-stats b { display:block; margin-bottom:5px; color:var(--text); font:500 23px "Barlow Condensed",sans-serif; }
.place-stats small { font-size:15px; color:var(--muted); }
.place-bottom { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--hairline); padding:13px 0; color:var(--muted); font-size:12px; }
.place-bottom>span:last-child { color:var(--text); }
.places-empty { grid-column:1/-1; padding:65px 24px; border:1px dashed var(--hairline-strong); border-radius:20px; text-align:center; }
.places-empty p { margin:0 0 12px; font:400 36px "Barlow Condensed",sans-serif; }
.places-empty>span { color:var(--muted); font-size:18px; }
.outdoor-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:80px; padding:28px 0 36px; border-top:1px solid var(--hairline); color:var(--muted); font:10px "IBM Plex Mono",monospace; }
.outdoor-footer a { color:var(--body); text-decoration:none; }
.outdoor-footer p { margin:0; }
.session-shell { padding-top:108px; }
.back-to-places { display:inline-block; margin-bottom:42px; color:var(--muted); text-decoration:none; font-size:15px; }
.session-intro h1 { font-size:clamp(55px,7.2vw,94px); }
.title-period { color:var(--ocean); }
.session-meta { display:flex; flex-wrap:wrap; gap:12px 26px; margin:24px 0 42px; color:var(--muted); font:11px/1.5 "IBM Plex Mono",monospace; }
.session-opening { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.session-photo .place-photo { min-height:470px; aspect-ratio:1; border-radius:22px; border:1px solid var(--hairline); }
.session-note { padding:7px 0 0; }
.note-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.note-heading h2 { margin:0; color:var(--muted); font:13px "IBM Plex Mono",monospace; }
.draft-badge { color:var(--muted); border:1px solid var(--hairline); padding:5px 9px; border-radius:6px; font-size:12px; }
.session-note h3 { margin:24px 0 18px; font:500 36px/1.12 "Barlow Condensed",sans-serif; letter-spacing:-.015em; }
.session-note p { margin:0 0 18px; color:var(--body); font-size:19px; line-height:1.6; }
.session-note strong { color:var(--text); font-weight:500; }
.session-note .note-disclaimer { margin-top:22px; color:var(--muted); font-size:13px; line-height:1.5; }
.conditions-section { margin-top:76px; }
.conditions-heading { margin-bottom:28px; }
.conditions-heading h2 { margin:0 0 12px; font:500 44px/1.1 "Barlow Condensed",sans-serif; letter-spacing:-.02em; }
.conditions-heading p { margin:0; color:var(--muted); font-size:18px; }
.conditions-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; }
.conditions-panel { min-width:0; padding:20px; border:1px solid var(--hairline); border-radius:16px; background:var(--surface); }
.conditions-panel h3 { margin:0 0 15px; color:var(--muted); font:12px "IBM Plex Mono",monospace; }
.metric { margin:0; font:500 43px/1 "Barlow Condensed",sans-serif; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.metric small { color:var(--body); font-size:18px; letter-spacing:0; }
.metric-caption { margin:9px 0 0; color:var(--body); font-size:14px; }
.metric-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.direction-chip { padding:8px 11px; border:1px solid var(--hairline); border-radius:10px; color:var(--ocean); font:15px "IBM Plex Mono",monospace; }
.bar-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; margin-top:24px; }
.chart-column { padding:0; background:transparent; border:0; border-radius:5px; cursor:pointer; color:var(--muted); font:10px "IBM Plex Mono",monospace; }
.bar-space { display:flex; height:80px; align-items:flex-end; background:linear-gradient(transparent 49%,var(--hairline) 50%,transparent 51%); border-bottom:1px solid var(--hairline); }
.chart-bar { position:relative; display:block; width:100%; height:var(--bar-height); background:var(--ocean); opacity:.42; border-radius:5px 5px 0 0; transition:opacity 180ms ease; transform-origin:bottom; }
.chart-column.is-active .chart-bar,.chart-column:focus-visible .chart-bar { opacity:1; }
.chart-time { display:block; padding:10px 0 2px; }
.chart-readout,.chart-footnote { margin:13px 0 0; min-height:16px; color:var(--muted); font-size:11px; line-height:1.5; }
.chart-readout { color:var(--ocean); }
.tide-panel .metric-row { align-items:flex-start; flex-direction:column; gap:0; }
.falling { color:var(--ocean); font-size:24px; }
.tide-chart { color:var(--ocean); margin-top:15px; }
.tide-chart svg { display:block; width:100%; height:80px; overflow:visible; }
.chart-gridline { stroke:var(--hairline); stroke-dasharray:3 9; fill:none; }
.tide-line { stroke:currentColor; stroke-width:3; fill:none; }
.tide-points { fill:var(--ocean); }
.tide-events { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.tide-events>div { display:grid; gap:4px; padding-top:10px; border-top:1px solid var(--hairline); }
.tide-events span { color:var(--muted); font-size:11px; }
.tide-events b { font:500 19px "Barlow Condensed",sans-serif; }
.swell-layout { display:grid; grid-template-columns:100px 1fr; align-items:center; gap:16px; min-height:140px; }
.swell-compass { position:relative; width:100px; height:100px; border:1px solid var(--hairline-strong); border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 24px,var(--hairline) 25px,transparent 26px); }
.swell-compass::before,.swell-compass::after { content:""; position:absolute; background:var(--hairline); }
.swell-compass::before { left:50%; top:0; width:1px; height:100%; }
.swell-compass::after { top:50%; left:0; height:1px; width:100%; }
.swell-compass>span { position:absolute; font:9px "IBM Plex Mono",monospace; color:var(--muted); }
.north { top:8px; left:calc(50% - 3px); }.south { bottom:8px; left:calc(50% - 3px); }.west { left:8px; top:calc(50% - 5px); }.east { right:8px; top:calc(50% - 5px); }
.swell-compass i { position:absolute; left:calc(50% - 5px); bottom:50%; width:10px; height:35px; background:var(--ocean); clip-path:polygon(50% 0,100% 100%,0 100%); transform-origin:50% 100%; transform:rotate(var(--bearing)); }
.swell-compass i:nth-of-type(2) { background:#aaa8a0; height:30px; }
.swell-compass i:nth-of-type(3) { background:#708a94; height:26px; }
.swell-compass b { position:absolute; width:8px; height:8px; top:calc(50% - 4px); left:calc(50% - 4px); border-radius:50%; background:var(--text); }
.swell-list { display:grid; gap:18px; }
.swell-list>div { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:13px; white-space:nowrap; }
.swell-list b { font-weight:500; }.swell-list small { font-size:12px; }.swell-list span { color:var(--body); }
.swell-dot { width:5px; height:5px; flex:none; border-radius:50%; background:var(--ocean); }.dot-1 { background:#aaa8a0; }.dot-2 { background:#708a94; }
.temperature-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.temperature-row>div>span { display:block; margin-top:8px; color:var(--body); font-size:13px; }
.daylight { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin-top:22px; border-top:1px solid var(--hairline); padding-top:16px; }
.daylight>div { display:flex; justify-content:space-between; gap:8px; font-size:13px; }.daylight span { color:var(--muted); }.daylight b { font-weight:400; }
.energy-row { display:flex; justify-content:space-between; align-items:center; gap:15px; color:var(--body); font-size:16px; }.energy-row b { color:var(--text); font:500 25px "Barlow Condensed",sans-serif; }.energy-row small { font-size:15px; color:var(--muted); }
.energy-track { height:5px; margin:8px 0 16px; background:var(--surface-elevated); border-radius:10px; overflow:hidden; }.energy-track i { display:block; height:100%; background:var(--ocean); }.offshore i { opacity:.5; }
.consistency { margin-top:16px; padding-top:12px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:center; color:var(--muted); }.consistency b { font:500 28px "Barlow Condensed",sans-serif; color:var(--text); }.consistency small { font-size:18px; color:var(--muted); }
.outdoor-motion .outdoor-reveal { opacity:0; transform:translateY(16px); transition:opacity 600ms var(--ease),transform 600ms var(--ease); }
.outdoor-motion .outdoor-reveal.is-visible { opacity:1; transform:none; }
@media(hover:hover) and (pointer:fine) { .place-link:hover { transform:translateY(-4px); border-color:var(--ocean); }.place-link:hover .photo-horizon { transform:translateY(-7px) scale(1.04); }.chart-column:hover .chart-bar { opacity:1; }.place-filters button:hover { color:var(--text); } }
@media(max-width:1100px) { .places-grid,.conditions-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.swell-layout { grid-template-columns:100px 1fr; }.swell-list { width:100%; }.session-opening { gap:28px; }.session-photo .place-photo { min-height:430px; }.daylight { gap:18px; }.daylight>div { flex-direction:column; gap:5px; } }
@media(max-width:767px) { .outdoor-shell,.outdoor-footer { width:calc(100% - 40px); }.outdoor-shell { padding-top:110px; }.outdoor-intro { margin-bottom:32px; }.outdoor-intro>p:last-child { font-size:20px; max-width:340px; }.places-toolbar { align-items:flex-start; flex-direction:column; gap:12px; }.place-filters { gap:3px; }.place-filters button { padding:10px 11px; font-size:14px; }.places-count { margin:0; }.places-grid,.session-opening,.conditions-grid { grid-template-columns:1fr; }.place-copy { padding:18px 18px 0; }.place-copy h2 { font-size:29px; }.place-meta { font-size:9px; }.outdoor-footer { margin-top:55px; font-size:9px; }.back-to-places { margin-bottom:30px; }.session-intro h1 { font-size:60px; max-width:500px; }.session-meta { font-size:10px; gap:10px 20px; margin:22px 0 28px; }.session-photo .place-photo { min-height:0; aspect-ratio:4/3; }.session-note { padding-top:6px; }.session-note h3 { font-size:33px; }.session-note p { font-size:18px; }.conditions-section { margin-top:48px; }.conditions-heading h2 { font-size:38px; }.conditions-heading p { font-size:16px; }.conditions-panel { padding:19px; }.metric { font-size:42px; }.tide-chart { margin:15px 0 0; }.tide-events { gap:10px; }.tide-events span { font-size:11px; }.tide-events b { font-size:19px; }.swell-layout { grid-template-columns:100px 1fr; gap:16px; }.swell-compass { width:100px; height:100px; }.swell-list>div { gap:6px; font-size:14px; }.swell-dot { display:none; }.daylight>div { flex-direction:row; }.chart-time { font-size:9px; } }
@media(max-width:380px) { .swell-layout { grid-template-columns:1fr; }.place-meta { flex-direction:column; gap:6px; }.filter-count { margin-left:4px; }.place-filters button { padding:10px 8px; }.outdoor-footer { align-items:flex-start; flex-direction:column; }.daylight { gap:18px 15px; }.daylight>div { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { .outdoor-motion .outdoor-reveal { opacity:1; transform:none; transition:none; }.place-link,.photo-horizon,.chart-bar { transition:none; }.place-link:hover,.place-link:hover .photo-horizon { transform:none; } }

.tide-axis { display:flex; justify-content:space-between; margin:4px 0 12px; color:var(--muted); font:10px "IBM Plex Mono",monospace; }

/* Brief, one-time data reveals; final values remain present for assistive technology. */
.metric-value { display:inline-block; font-variant-numeric:tabular-nums; }
.bar-value { position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%); color:var(--ocean); font:9px "IBM Plex Mono",monospace; }
.energy-track i { transform-origin:left; }
.chart-column:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
@media(min-width:768px) { .place-card { max-width:380px; } }
@media(max-width:767px) { .place-card { max-width:360px; }.conditions-grid { gap:12px; }.bar-space { height:72px; } }


/* Keep the sunset and Ferris wheel inside the detail page crop. */
.session-photo .santa-monica-photo { object-position:40% center; }

.session-note .note-heading + p { margin-top:24px; }

.conditions-source { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin:48px 0 0; color:var(--muted); font:11px/1.5 "IBM Plex Mono",monospace; }
.conditions-source a { display:inline-flex; align-items:center; gap:7px; color:var(--body); text-decoration:none; }
.conditions-source img { width:20px; height:20px; border-radius:5px; }
.conditions-source a:hover { color:var(--text); text-decoration:underline; text-underline-offset:4px; }
.conditions-source a:focus-visible { outline:2px solid var(--focus); outline-offset:5px; border-radius:3px; }
[data-outdoor-page="session"] .outdoor-footer { margin-top:20px; }