/* ---------- About: "The Profile", a newspaper feature about Angie ---------- */
.profile{padding-top:48px}
.profile-head{padding:22px 0 34px;max-width:860px}
.profile-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,72px);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.profile-head .sub{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.9vw,23px);line-height:1.4;color:var(--ink-soft);margin-top:16px;text-wrap:pretty}

/* photo + article on the left, fact box in a ruled sidebar on the right */
.profile-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-areas:"photo facts" "article facts";
  column-gap:40px;border-top:1px solid var(--ink);padding-top:28px}
.profile-grid .photo{grid-area:photo}
.profile-grid .article{grid-area:article}
.profile-grid .facts{grid-area:facts}

/* the photo, printed like a newspaper picture: black and white, a little grain, a fine dot screen */
.photo{margin-bottom:30px}
.photo .plate{position:relative;overflow:hidden;background:#E9DFD0}
.photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 28%;
  filter:grayscale(1) contrast(1.08) brightness(1.02) sepia(.08)}
.photo .plate::before,.photo .plate::after{content:"";position:absolute;inset:0;pointer-events:none}
.photo .plate::before{z-index:1;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.photo .plate::after{z-index:2;mix-blend-mode:multiply;
  background:radial-gradient(rgba(62,39,35,.2) .8px, transparent 1.15px) 0 0/3.2px 3.2px}
.photo figcaption{font-family:var(--type);font-size:12px;letter-spacing:.05em;color:var(--ink-soft);margin-top:10px}

/* article: two columns, a pull quote spanning both between paragraphs 2 and 3 */
.article{column-count:2;column-gap:36px;column-rule:1px solid var(--hair);font-size:17px;line-height:1.65}
.article p{margin-bottom:1em;text-wrap:pretty;hyphens:auto}
.article > p:first-of-type::first-letter{float:left;font-family:var(--serif);font-size:4.1em;line-height:.82;padding:6px 8px 0 0;color:var(--ink)}
.pull{column-span:all;margin:14px 0 30px;padding:26px 0 24px;border-top:3px double var(--ink);border-bottom:1px solid var(--ink);text-align:center}
.pull p{font-family:var(--serif);font-style:italic;font-size:clamp(30px,3.8vw,46px);line-height:1.12;color:var(--raspberry);margin:0;hyphens:none;text-wrap:balance}

/* fact box */
.facts{border-left:1px solid var(--rule);padding-left:32px}
/* collage cut-outs beside the article: floated so the text wraps around them, never under them */
.article .cdeco{float:right;margin:4px -4px 10px 16px;shape-outside:margin-box}
.article .bulb{width:120px;margin-top:-4px}
.article .heart{width:118px}
/* wide screens: the bulb hangs in the left margin beside the first paragraph, clear of the text */
@media (min-width:1400px){
  .article{position:relative}
  .article .bulb{float:none;position:absolute;left:-166px;top:-6px;width:150px;margin:0}
}
@media (min-width:1500px){ .article .bulb{left:-204px;width:180px} }
@media (min-width:601px) and (max-width:900px){ .article .bulb{width:170px} .article .heart{width:140px} }
.facts .box{position:sticky;top:28px}
/* the fact box is Angie's torn note with a paper clip (shared/collage.css .note-paper) */
.facts .box{padding:66px 30px 44px 26px;transform:rotate(-.8deg)}  /* text starts below the paper clip */
.facts dl{display:grid;gap:18px}
.facts dt{font-family:var(--type);font-size:12px;letter-spacing:.1em;color:var(--raspberry);margin-bottom:4px}
.facts dd{margin:0;font-size:16px;line-height:1.5}
.facts dd + dd{margin-top:2px}
.facts .resume{display:inline-flex;gap:8px;align-items:center;margin-top:22px;font-family:var(--type);font-size:13px;letter-spacing:.06em;
  text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px}
.facts .resume:hover{color:var(--raspberry);border-color:var(--raspberry)}

@media (max-width:900px){
  .profile{padding-top:32px}
  .profile-head{padding:18px 0 26px}
  /* phone: one column, photo first, fact box after the article */
  .profile-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "article" "facts";padding-top:22px}
  .article{column-count:1}
  .pull{margin:6px 0 26px;padding:20px 0 18px}
  .facts{border-left:0;padding-left:0;margin-top:10px}
  .facts .box{position:static;max-width:420px}
}
@media (max-width:600px){ .article .bulb{display:none} .article .heart{width:104px} }