/* Casa Torres: shared stationery styles for the public pages (home, not-found). */
:root{
  color-scheme: light;
  --paper:#F5F0E4; --paper-2:#ECE4D3; --mat:#FBF8F1;
  --ink:#29271F; --ink-soft:#5E5848; --ink-faint:#8A836F; --rule:#A6946D;
  --shadow:48,40,24;
  --script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  --serif:"Cormorant Garamond",Garamond,Georgia,"Times New Roman",serif;
  --caps:"Cormorant SC","Cormorant Garamond",Georgia,serif;
  --grain:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20seed%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.36%20%200%200%200%200%20.32%20%200%200%200%200%20.22%20%200%200%200%20.12%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27220%27%20height%3D%27220%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"); --mottle:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27600%27%20height%3D%27600%27%3E%3Cfilter%20id%3D%27m%27%20x%3D%270%27%20y%3D%270%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.007%20.018%27%20numOctaves%3D%273%27%20seed%3D%2712%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.5%20%200%200%200%200%20.45%20%200%200%200%200%20.3%20%200%200%200%20.06%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27600%27%20height%3D%27600%27%20filter%3D%27url%28%23m%29%27%2F%3E%3C%2Fsvg%3E");
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--paper); -webkit-text-size-adjust:100%; }
body{ margin:0; min-height:100vh; min-height:100svh; color:var(--ink); font-family:var(--serif); font-weight:500;
  -webkit-font-smoothing:antialiased; font-variant-numeric:oldstyle-nums;
  background-color:var(--paper);
  background-image:var(--grain), var(--mottle), radial-gradient(120% 80% at 50% 0%, #FBF8EF 0%, var(--paper) 55%, var(--paper-2) 100%);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
img{ max-width:100%; }

/* the family mark: the supplied PNG used as a mask, coloured with warm ink */
.tm{ display:block; width:var(--tm-w,84px); aspect-ratio:1292 / 1199; background-color:var(--ink);
  -webkit-mask:url("/shared/img/torres-emblem.png") center / 100% 100% no-repeat; mask:url("/shared/img/torres-emblem.png") center / 100% 100% no-repeat; }
.ink-in{ animation:ink 1.1s ease-out both; }
@keyframes ink{ from{ opacity:0; } to{ opacity:1; } }

.page{ max-width:1240px; margin:0 auto; padding:clamp(36px,6vw,72px) clamp(22px,5vw,64px) clamp(48px,7vw,88px); }
.mark{ display:flex; justify-content:center; margin:0 0 clamp(34px,5vw,56px); }

/* home */
.spread{ display:grid; grid-template-columns:1fr; grid-template-areas:"title" "photo" "text"; gap:clamp(26px,4vw,40px); align-items:center; }
.title{ grid-area:title; text-align:center; margin:0; font-weight:400; }
.title .eyebrow{ display:block; font-family:var(--caps); font-weight:600; font-size:15px; letter-spacing:.32em; padding-left:.32em; color:var(--ink-soft); margin-bottom:10px; }
.title .name{ display:block; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(54px,9vw,96px); line-height:.98; letter-spacing:-.01em; color:var(--ink); }
.tagline{ font-style:italic; font-size:clamp(20px,2.2vw,24px); line-height:1.4; color:var(--ink-soft); margin:16px auto 0; max-width:22em; text-wrap:balance; }
.photo{ grid-area:photo; margin:0; justify-self:center; width:100%; max-width:520px; position:relative; isolation:isolate; }
.mat{ position:relative; z-index:1; background:var(--mat); padding:clamp(10px,1.6vw,16px); border:1px solid rgba(166,148,109,.55);
  box-shadow:0 1px 2px rgba(var(--shadow),.08), 0 22px 48px -18px rgba(var(--shadow),.28); }
.mat img{ display:block; width:100%; height:auto; aspect-ratio:2 / 3; object-fit:cover; background:#E7DFCF; }
.photo-in{ animation:ink 1.4s .15s ease-out both; }
/* an olive sprig tucked behind the corner of the print */
.mat-sprig{ position:absolute; z-index:0; width:clamp(120px,15vw,180px); height:auto; left:clamp(-70px,-5vw,-34px); bottom:clamp(-44px,-3.4vw,-26px);
  transform:rotate(-28deg); opacity:.9; pointer-events:none; }
.text{ grid-area:text; text-align:center; display:flex; flex-direction:column; align-items:center; }
.sprig{ width:150px; height:auto; mix-blend-mode:multiply; margin:2px 0 18px; opacity:.95; }
.body{ font-size:clamp(19px,1.9vw,21px); line-height:1.62; color:var(--ink); max-width:27em; margin:0; text-wrap:pretty; }
.valediction{ font-style:italic; font-size:20px; color:var(--ink-soft); margin:30px 0 0; }
.signature{ font-family:var(--script); font-weight:400; font-size:clamp(38px,4vw,46px); line-height:1.15; margin:2px 0 0; color:var(--ink); }

@media (min-width:900px){
  .spread{ grid-template-columns:minmax(0,50fr) minmax(0,50fr); grid-template-areas:"photo title" "photo text"; column-gap:clamp(48px,7vw,104px); row-gap:0; align-items:end; }
  .title{ align-self:end; }
  .text{ align-self:start; padding-top:8px; }
  .photo{ max-width:560px; justify-self:end; }
}

/* not-found */
.lost{ min-height:calc(100svh - 120px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.lost .eyebrow{ font-family:var(--caps); font-weight:600; font-size:14px; letter-spacing:.32em; padding-left:.32em; color:var(--ink-soft); margin:0 0 12px; }
.lost h1{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(40px,6vw,60px); line-height:1.05; margin:0; }
.lost p.body{ margin-top:20px; max-width:24em; color:var(--ink-soft); }
.home-link{ display:inline-flex; align-items:center; gap:14px; margin-top:32px; color:var(--ink); text-decoration:none;
  font-family:var(--caps); font-weight:600; font-size:15px; letter-spacing:.18em; padding:10px 6px; }
.home-link::before,.home-link::after{ content:""; width:24px; height:1px; background:var(--rule); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.home-link:hover::before,.home-link:hover::after,.home-link:focus-visible::before,.home-link:focus-visible::after{ width:38px; }
.home-link:focus-visible{ outline:1px solid var(--rule); outline-offset:6px; }

@media (prefers-reduced-motion: reduce){ .ink-in,.photo-in{ animation:none; } .home-link::before,.home-link::after{ transition:none; } }